Javascript Fabric.js动画精灵和文本字段_Javascript_Animation_Fabricjs

Javascript Fabric.js动画精灵和文本字段

javascript animation

Javascript Fabric.js动画精灵和文本字段,javascript,animation,fabricjs,Javascript,Animation,Fabricjs,大约一个月前，我问过如何为Fabric.js中的对象制作动画，@nickvans对此做出了回应。这是代码。基于此，我更改了代码，并使用HTML5拖放创建了该应用程序，它允许您为画布上的每个对象提供自己的一组不同命令。基本上是创造移动的场景。我的第一个问题是：是否也可以使用精灵。因此，它不是下面exmaple中的三角形，而是动画精灵，也会改变它的位置。第二个问题，是否有可能在物体移动过程中添加跟随物体的文本字段？有点像那些漫画。提前谢谢你的提示 function startAnimati

大约一个月前，我问过如何为Fabric.js中的对象制作动画，@nickvans对此做出了回应。这是代码。基于此，我更改了代码，并使用HTML5拖放创建了该应用程序，它允许您为画布上的每个对象提供自己的一组不同命令。基本上是创造移动的场景。我的第一个问题是：是否也可以使用精灵。因此，它不是下面exmaple中的三角形，而是动画精灵，也会改变它的位置。第二个问题，是否有可能在物体移动过程中添加跟随物体的文本字段？有点像那些漫画。提前谢谢你的提示

    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);
  }
}

函数startAnimationQueue（animationQueue）{
//将形状的动画排队
var runningDuration=0；//将animationQueue持续时间相加的变量
对于（var i=0；i
<!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>