javascript - TweenJS 动画不起作用

Question

我正在开发一种工具，通过更新对象数组来执行动画序列。该数组将具有根据不同要求定制动画的所有参数。该工具是用 JavaScript 开发的，并利用 createJS 库和 TweenJS 来动画对象。对象是动态创建和定位的，然后应用补间。 Tween 似乎在我的代码中不起作用。

我有下面的完整代码

    var AnimationFlow = (function () {
    'use strict';


    var AnimationFlow = function (canvasID) {
        this.canvas = document.getElementById(canvasID);
        this.stage = new createjs.Stage(this.canvas);
        this.timeline = new createjs.Timeline();
        this.tween = [];

        this.preload;

        this.animData;
        this.manifest = [];
        this.animObject = [];
        this.stageObject = [];

        this.loadProgressLabel;
        this.loadingBarContainer;
        this.loadingBar;        
    };


    AnimationFlow.prototype.setData = function (data) {
        this.animData = data;
        this.manifest = [];

        this.renderProgressBar();

        for (var i = 0; i < this.animData.length; i++) {
            this.manifest.push({'src': this.animData[i].targeturl, 'id': this.animData[i].targetID});
        }
    };

    AnimationFlow.prototype.init = function () {

        createjs.Ticker.addEventListener("tick", this.tick.bind(this));
        createjs.Ticker.setFPS(30);
        createjs.Ticker.useRAF = true;

        this.preload = new createjs.LoadQueue(false);
        this.preload.addEventListener("complete", this.handleComplete.bind(this));
        this.preload.addEventListener("progress", this.handleProgress.bind(this));
        this.preload.loadManifest(this.manifest);
        this.stage.update();
    };

    AnimationFlow.prototype.handleProgress = function () {
        this.loadingBar.scaleX = this.preload.progress * this.loadingBarWidth;

        this.progresPrecentage = Math.round(this.preload.progress * 100);
        this.loadProgressLabel.text = this.progresPrecentage + "% Loaded";

        this.stage.update();
    };

    AnimationFlow.prototype.handleComplete = function () {
        //Load images logic to be added

        for (var i = 0; i < this.manifest.length; i++) {
            this.animObject.push(this.preload.getResult(this.manifest[i].id));
        }

        this.loadProgressLabel.text = "Loading complete click to start";
        this.stage.update();
        this.canvas.addEventListener("click", this.handleClick.bind(this));
    };

    AnimationFlow.prototype.handleClick = function () {
        this.start();

        this.stage.removeChild(this.loadProgressLabel, this.loadingBarContainer);
        this.canvas.removeEventListener("click", this.handleClick);
    };

    AnimationFlow.prototype.start = function () {

        for (var i = 0; i < this.animObject.length; i++) {
            this.obj = new createjs.Bitmap(this.animObject[i]);
            this.obj.x = this.animData[i].initialXPos;
            this.obj.y = this.animData[i].initialYPos;
            this.obj.visible = this.animData[i].initialVisibility;

            this.stage.addChild(this.obj);
            this.stageObject.push(this.obj);

            if(this.animData[i].isAnimatable){
                 var c = createjs.Tween.get(this.obj);
                  c.to({x:this.animData[i].params.xpos}, this.animData[i].duration);
                  c.call(this.tweenComplete);
                  this.timeline.addTween(c);
            }
        }
        this.stage.update();
    };

    AnimationFlow.prototype.tick = function () {
        console.log("heart beat on....");
        this.stage.update();
    };

    AnimationFlow.prototype.tweenComplete = function () {
        console.log("tweenComplete.......");        
    };

    AnimationFlow.prototype.renderProgressBar = function () {
        this.loadProgressLabel = new createjs.Text("", "18px Verdana", "black");
        this.loadProgressLabel.lineWidth = 200;
        this.loadProgressLabel.textAlign = "center";
        this.loadProgressLabel.x = this.canvas.width / 2;
        this.loadProgressLabel.y = 50;
        this.stage.addChild(this.loadProgressLabel);

        this.loadingBarContainer = new createjs.Container();

        this.loadingBarHeight = 20;
        this.loadingBarWidth = 300;
        this.LoadingBarColor = createjs.Graphics.getRGB(0, 0, 0);

        this.loadingBar = new createjs.Shape();
        this.loadingBar.graphics.beginFill(this.LoadingBarColor).drawRect(0, 0, 1, this.loadingBarHeight).endFill();

        this.frame = new createjs.Shape();
        this.padding = 3;
        this.frame.graphics.setStrokeStyle(1).beginStroke(this.LoadingBarColor).drawRect(-this.padding / 2, -this.padding / 2, this.loadingBarWidth + this.padding, this.loadingBarHeight + this.padding);

        this.loadingBarContainer.addChild(this.loadingBar, this.frame);
        this.loadingBarContainer.x = Math.round(this.canvas.width / 2 - this.loadingBarWidth / 2);
        this.loadingBarContainer.y = 100;
        this.stage.addChild(this.loadingBarContainer);
    };

    return AnimationFlow;
})();



var data = [{targetID: 'background', targeturl: 'assets/images/heliGame/sky.png',isAnimatable:true, duration: 2000, params: {xpos: '600'}, isVisibleAfterAnimation: true, isVisibleAtStartAnimation: true, initialVisibility: true, initialXPos: '0', initialYPos: '0'},
    {targetID: 'mousePointer', targeturl: 'assets/images/heliGame/helicopter.png',isAnimatable:true, duration: 1000, params: {xpos: '500'}, isVisibleAfterAnimation: false, isVisibleAtStartAnimation: true, initialVisibility: true, initialXPos: '0', initialYPos: '0'}];

var buttons = ["playPauseBtn", "startFirstBtn", "reverseBtn"];


var animTool = new AnimationFlow('testCanvas');
animTool.setData(data);


animTool.init();

我在 JSFiddle 中有代码

https://jsfiddle.net/jamesshaji/t4pxzsoo/

Answer 1

有几个问题。首先，您需要将所有仓位定义为整数而不是字符串(即:从数据对象中的仓位数据中去掉引号)。其次，你需要调用: this.timeline.gotoAndPlay(0);开始时间线执行。否则动画将无法播放。这是一个固定版本:

var AnimationFlow = (function() {
  'use strict';


  var AnimationFlow = function(canvasID) {
    this.canvas = document.getElementById(canvasID);
    this.stage = new createjs.Stage(this.canvas);
    this.timeline = new createjs.Timeline();
    this.tween = [];

    this.preload;

    this.animData;
    this.manifest = [];
    this.animObject = [];
    this.stageObject = [];

    this.loadProgressLabel;
    this.loadingBarContainer;
    this.loadingBar;
  };


  AnimationFlow.prototype.setData = function(data) {
    this.animData = data;
    this.manifest = [];

    this.renderProgressBar();

    for (var i = 0; i < this.animData.length; i++) {
      this.manifest.push({
        'src': this.animData[i].targeturl,
        'id': this.animData[i].targetID
      });
    }
  };

  AnimationFlow.prototype.init = function() {

    createjs.Ticker.addEventListener("tick", this.tick.bind(this));
    createjs.Ticker.setFPS(30);
    createjs.Ticker.useRAF = true;

    this.preload = new createjs.LoadQueue(false);
    this.preload.addEventListener("complete", this.handleComplete.bind(this));
    this.preload.addEventListener("progress", this.handleProgress.bind(this));
    this.preload.loadManifest(this.manifest);
    this.stage.update();
  };

  AnimationFlow.prototype.handleProgress = function() {
    this.loadingBar.scaleX = this.preload.progress * this.loadingBarWidth;

    this.progresPrecentage = Math.round(this.preload.progress * 100);
    this.loadProgressLabel.text = this.progresPrecentage + "% Loaded";

    this.stage.update();
  };

  AnimationFlow.prototype.handleComplete = function() {
    //Load images logic to be added

    for (var i = 0; i < this.manifest.length; i++) {
      this.animObject.push(this.preload.getResult(this.manifest[i].id));
    }

    this.loadProgressLabel.text = "Loading complete click to start";
    this.stage.update();
    this.canvas.addEventListener("click", this.handleClick.bind(this));
  };

  AnimationFlow.prototype.handleClick = function() {
    this.start();

    this.stage.removeChild(this.loadProgressLabel, this.loadingBarContainer);
    this.canvas.removeEventListener("click", this.handleClick);
  };

  AnimationFlow.prototype.start = function() {

    for (var i = 0; i < this.animObject.length; i++) {
      this.obj = new createjs.Bitmap(this.animObject[i]);
      this.obj.x = this.animData[i].initialXPos;
      this.obj.y = this.animData[i].initialYPos;
      this.obj.visible = this.animData[i].initialVisibility;

      this.stage.addChild(this.obj);
      this.stageObject.push(this.obj);

      if (this.animData[i].isAnimatable) {
        console.log("animatable:" + this.animData[i].params.xpos + " " + this.animData[i].duration);
        var c = createjs.Tween.get(this.obj);
        c.to({
          x: this.animData[i].params.xpos
        }, this.animData[i].duration);
        c.call(this.tweenComplete);
        this.timeline.addTween(c);
      }
    }
    this.timeline.gotoAndPlay(0);
    this.stage.update();
  };

  AnimationFlow.prototype.tick = function() {
    this.stage.update();
  };

  AnimationFlow.prototype.tweenComplete = function() {
    console.log("tweenComplete.......");
  };

  AnimationFlow.prototype.renderProgressBar = function() {
    this.loadProgressLabel = new createjs.Text("", "18px Verdana", "black");
    this.loadProgressLabel.lineWidth = 200;
    this.loadProgressLabel.textAlign = "center";
    this.loadProgressLabel.x = this.canvas.width / 2;
    this.loadProgressLabel.y = 50;
    this.stage.addChild(this.loadProgressLabel);

    this.loadingBarContainer = new createjs.Container();

    this.loadingBarHeight = 20;
    this.loadingBarWidth = 300;
    this.LoadingBarColor = createjs.Graphics.getRGB(0, 0, 0);

    this.loadingBar = new createjs.Shape();
    this.loadingBar.graphics.beginFill(this.LoadingBarColor).drawRect(0, 0, 1, this.loadingBarHeight).endFill();

    this.frame = new createjs.Shape();
    this.padding = 3;
    this.frame.graphics.setStrokeStyle(1).beginStroke(this.LoadingBarColor).drawRect(-this.padding / 2, -this.padding / 2, this.loadingBarWidth + this.padding, this.loadingBarHeight + this.padding);

    this.loadingBarContainer.addChild(this.loadingBar, this.frame);
    this.loadingBarContainer.x = Math.round(this.canvas.width / 2 - this.loadingBarWidth / 2);
    this.loadingBarContainer.y = 100;
    this.stage.addChild(this.loadingBarContainer);
  };

  return AnimationFlow;
})();



var data = [{
  targetID: 'background',
  targeturl: 'https://s13.postimg.org/tyj4iop93/Sky_Pic.jpg',
  isAnimatable: true,
  duration: 2000,
  params: {
    xpos: -100
  },
  isVisibleAfterAnimation: true,
  isVisibleAtStartAnimation: true,
  initialVisibility: true,
  initialXPos: 0,
  initialYPos: 0
}, {
  targetID: 'mousePointer',
  targeturl: 'http://jamesshaji.com/angular/assets/images/heliGame/helicopter.png',
  isAnimatable: true,
  duration: 2000,
  params: {
    xpos: 100
  },
  isVisibleAfterAnimation: false,
  isVisibleAtStartAnimation: true,
  initialVisibility: true,
  initialXPos: 450,
  initialYPos: 50
}];

var buttons = ["playPauseBtn", "startFirstBtn", "reverseBtn"];


var animTool = new AnimationFlow('testCanvas');
animTool.setData(data);
animTool.init();

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tweenjs/0.6.2/tweenjs.min.js"></script>

<div>Animation</div>

<canvas height="500" width="500" id="testCanvas">

</canvas>