Question

大约一个月前，我问我如何为Fabric.js中的对象排队动画，我从@nickvans得到了回复。这是代码。基于此，我更改了代码并使用HTML5拖放创建了aplication，它允许您在画布上为每个对象提供自己的一组不同命令。基本上创建移动场景。我的第一个问题是：如果有可能也使用精灵。因此，代替下面的例子中的三角形将是动画精灵，它也会改变它的位置。第二个问题是，有可能以某种方式添加在移动过程中跟随对象的文本字段吗？像漫画那样的东西。提前感谢任何提示

    function startAnimationQueue(animationQueue){
// queues up the animations for the shape

var runningDuration = 0; // variable that adds up the animationQueue durations
for (var i=0; i<animationQueue.length; i++){
    var animationDefinition = animationQueue[i];

    // Create a closure around the animationDefiniton so that each       setTimeout gets sequential animationDefinition inputs
    var fn = (function(animationDefinition){
        return function(){
            triangle.animate('left', animationDefinition.left, {duration: animationDefinition.duration, onChange:canvas.renderAll.bind(canvas)})
            triangle.animate('top', animationDefinition.top, {duration: animationDefinition.duration, onChange:canvas.renderAll.bind(canvas)})
            // Note: you can animate additional attributes here if you want, just add additional attributes to the objects in
            //   the animationQueue list. You could also have one of those inputs be the object to be animated in case you want
            //   to animate multiple objects using the same queue.
            };
        })

    // Create the timeout that will apply the transformations sequentially
    // If you want you could set the window.setTimeout to a variable that you could destroy if you need 
    // to interrupt the animation queue after you create it (but before it finishes)
    window.setTimeout(fn(animationDefinition), runningDuration);

    // set the next setTimeout duration to be .duration later than the previous one
    // this makes the second animation fire after the first one completes
    runningDuration += animationDefinition.duration;
}
    }
    document.onreadystatechange = function () {


if (document.readyState == "complete") {

    // I put the canvas init stuff in here because of (I think) a failed race condition or something that caused
    // your original method to fail in Chrome
    window.canvas = new fabric.Canvas('scene');

    window.triangle = new fabric.Triangle({
        width: 30
      , height: 30
      , fill: 'red'
      , left: 30
      , top: 0
    });

    window.canvas.add(window.triangle);
    window.canvas.renderAll();

    // Create a list of animations to apply
    var animationQueue = [
        {"left": "+=0", "top": "+=100", "duration": 1000},
        {"left": "+=55", "top": "+=0", "duration": 2000}

    ]

    // Apply the animations in sequence using window.setTimeout
    startAnimationQueue(animationQueue);
  }
}

和HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
</head>
<body>
  <canvas id="scene" width="400" height="400" />
</body>
</html>

Fabric.js动画sprite和文本字段

0 个答案: