Fabric.js бесконечная анимация

257

28 мая 2017, 19:22

    <html>
    <head>
    <script src="fabric.js"></script>
    </head>
    <body>
    <canvas id="canvas" width="450" height="250" style="border:1px solid saddlebrown"></canvas>
    <script>
    var canvas = new fabric.Canvas('canvas');
    var rectback = new fabric.Rect({
      left: -1,
      top: -1,
      fill: 'pink',
      width: canvas.width+1,
      height: canvas.height+1
    });
    canvas.add(rectback);
    var halfcircle1 = new fabric.Circle({
            radius: 25,
            left: 25,
            top: 206,
            angle: 0,
            startAngle: 0,
            endAngle: Math.PI,
            stroke: '#000',
            strokeWidth: 0.5,
            originX: 'center',
            originY: 'center',
            fill: 'blue'
    });
    canvas.add(halfcircle1);
    var halfcircle2 = new fabric.Circle({
            radius: 25,
            left: 25,
            top: 206,
            angle: 180,
            startAngle: 0,
            endAngle: Math.PI,
            stroke: '#000',
            strokeWidth: 0.5,
            originX: 'center',
            originY: 'center',
            fill: 'yellow',
    });
    canvas.add(halfcircle2);
    var rect = new fabric.Rect({
      left: -1,
      top: 230,
      fill: 'saddlebrown',
      width: canvas.width+1,
      height: 20
    });
    canvas.add(rect);
    function animation()
    {
    halfcircle1.animate('angle', '+=900', {
      onChange: canvas.renderAll.bind(canvas),
      duration: 3000,
      easing: fabric.util.ease.easeOutBounce
    });
    halfcircle1.animate('left', canvas.width-25, {
      onChange: canvas.renderAll.bind(canvas),
      duration: 3000,
      easing: fabric.util.ease.easeOutBounce
    });
    halfcircle2.animate('angle', '+=900', {
      onChange: canvas.renderAll.bind(canvas),
      duration: 3000,
      easing: fabric.util.ease.easeOutBounce
    });
    halfcircle2.animate('left', canvas.width-25, {
      onChange: canvas.renderAll.bind(canvas),
      duration: 3000,
      easing: fabric.util.ease.easeOutBounce,
    });
    }
    animation();

    </script>
    </body>
    </html>

    <html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="450" height="250" style="border:1px solid saddlebrown"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
var rectback = new fabric.Rect({
  left: -1,
  top: -1,
  fill: 'pink',
  width: canvas.width+1,
  height: canvas.height+1
});
canvas.add(rectback);
var halfcircle1 = new fabric.Circle({
        radius: 25,
        left: 25,
        top: 206,
        angle: 0,
        startAngle: 0,
        endAngle: Math.PI,
        stroke: '#000',
        strokeWidth: 0.5,
        originX: 'center',
        originY: 'center',
        fill: 'blue'
});
canvas.add(halfcircle1);
var halfcircle2 = new fabric.Circle({
        radius: 25,
        left: 25,
        top: 206,
        angle: 180,
        startAngle: 0,
        endAngle: Math.PI,
        stroke: '#000',
        strokeWidth: 0.5,
        originX: 'center',
        originY: 'center',
        fill: 'yellow',
});
canvas.add(halfcircle2);
var rect = new fabric.Rect({
  left: -1,
  top: 230,
  fill: 'saddlebrown',
  width: canvas.width+1,
  height: 20
});
canvas.add(rect);
function animation()
{
halfcircle1.animate('angle', '+=900', {
  onChange: canvas.renderAll.bind(canvas),
  duration: 3000,
  easing: fabric.util.ease.easeOutBounce
});
halfcircle1.animate('left', canvas.width-25, {
  onChange: canvas.renderAll.bind(canvas),
  duration: 3000,
  easing: fabric.util.ease.easeOutBounce
});
halfcircle2.animate('angle', '+=900', {
  onChange: canvas.renderAll.bind(canvas),
  duration: 3000,
  easing: fabric.util.ease.easeOutBounce
});
halfcircle2.animate('left', canvas.width-25, {
  onChange: canvas.renderAll.bind(canvas),
  duration: 3000,
  easing: fabric.util.ease.easeOutBounce,
});
}
animation();

</script>
</body>
</html>

Как сделать, что бы мяч доходил до границы и начинал катится в обратную сторону, бесконечно. Пробовал делать счетчик, но функции выполняются одновременно. Можно ли поставить какой то таймер или дать приоритеты функциям?

Answer 1

Можно воспользоваться функцией setInterval(function(){},ms); , которая будет вызываться каждый указанный отрезок ms В отличии от setTimeout(), эта функция будет выполняться бесконечно, а не один раз.