2 Javascript中的动画

Question

我正在尝试在同一页面上制作多个动画。但我不知道如何创建另一个变量。这是示例，from Codepen。

我尝试创建另一个"imageFile = new Image()"，将其命名为"imageFile2 = new Image()，但它似乎不起作用。

我对此很陌生。请指导我。提前致谢。

var appHeight = 400,
    appWidth = 1000,
    appCenterX = appWidth/2,
    appCenterY = appHeight/2,
    stage = new Kinetic.Stage({
       container: 'container',
       width: appWidth,
       height:appHeight
     }),
    layer = new Kinetic.Layer(),
    imageFile = new Image(),
    creature,
    bezTween;

imageFile.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";

var creatureGroup = new Kinetic.Group();
creature = new Kinetic.Image({
  image: imageFile,
  width:27,
  height:29,
  x:-16,
  y:-16
});

bezTween = new TweenMax(creatureGroup, 6, {
  bezier:{
    type:"soft", 
    values:[{setX:100, setY:250}, {setX:300, setY:0}, {setX:500, setY:400}, {setX:appWidth+20, setY:20}],
    //autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
    autoRotate:["setX", "setY", "setRotationDeg"]
  }, 
  ease:Linear.easeNone, autoCSS:false, repeat:10});

  for (i = 0; i<200; i++){
  bezTween.progress(i/200);
  var circle = new Kinetic.Circle({
  radius:2,
    fill:'#333',
    x:bezTween.target.getX(),
    y:bezTween.target.getY()
});
layer.add(circle);
  layer.draw();
bezTween.restart();  
}

var creatureLayer = new Kinetic.Layer();
creatureGroup.add(creature); 
creatureLayer.add(creatureGroup);
stage.add(layer);
stage.add(creatureLayer);

TweenLite.ticker.addEventListener("tick", redraw);

function redraw(){
  creatureLayer.draw();

}

Answer 1

您可以创建第二个creature2。

var appHeight = 400,
    appWidth = 1000,
    appCenterX = appWidth/2,
    appCenterY = appHeight/2,
    stage = new Kinetic.Stage({
       container: 'container',
       width: appWidth,
       height:appHeight
     }),
    layer = new Kinetic.Layer(),
    imageFile = new Image(),
    imageFile2 = new Image(),
    creature,
    creature2,
    bezTween;

imageFile.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";

imageFile2.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";

var creatureGroup = new Kinetic.Group();
creature2 = new Kinetic.Image({
  image: imageFile2,
  width:50,
  height:50,
  x:20,
  y:-16
});

检查您的Updated Codepen Here。

编辑：

在这里，我根据您的需要为另一个生物更新了具有不同路径的 codepen。

我在那里创建了另一条路径。

bezTween1 = new TweenMax(creatureGroup1, 6, {
  bezier:{
    type:"soft", 
    values:[{setX:150, setY:300}, {setX:350, setY:0}, {setX:550, setY:450}, {setX:appWidth+50, setY:50}],
    //autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
    autoRotate:["setX", "setY", "setRotationDeg"]
  }, 
  ease:Linear.easeNone, autoCSS:false, repeat:10});

查看Codepen Here.