2个Javascript动画

我试图在同一页上制作多个动画。但我不知道如何创建另一个变量。这是样品

我尝试创建另一个

“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();

}

var appHeight=400，
appWidth=1000，
appCenterX=appWidth/2，
appCenterY=appHeight/2，
阶段=新的动力学阶段({
容器：'容器'，
宽度：appWidth，
高度：appHeight
}),
层=新的动能层（），
imageFile=新图像（），
生物，
贝特温；
imageFile.src=”http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";
var creatoreGroup=新的动能.Group（）；
生物=新动能。图像({
image:imageFile，
宽度：27，
身高：29，
x:-16，
y:-16
});
bezTween=新TweenMax（creatureGroup，6{
贝塞尔：{
类型：“软”，
值：[{setX:100，setY:250}，{setX:300，setY:0}，{setX:500，setY:400}，{setX:appWidth+20，setY:20}]，
//autoRotate需要知道如何调整x/y/旋转，因此我们传入相应KineticJS方法的名称
自动旋转：[“setX”、“setY”、“setRotationDeg”]
}, 
ease:Linear.easeNone，autoCSS:false，repeat:10}）；
对于（i=0；i您可以创建第二个
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
});

检查你的电话号码

编辑：

在这里，我根据你的要求为另一个生物用不同的路径更新了代码笔

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

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

检查
谢谢你的回复，但我想我没有说清楚，因为这不是我想要的。我想要的是用不同的路径创建另一个动画。因为从你的回复中我可以看到，你创建了另一个“生物”，但使用的是相同的现有路径。我正在尝试用相同的路径创建另一个“生物”新路径（可能是不同的随机方向）。谢谢你，很抱歉造成混乱。：（它正在工作！谢谢你！非常感谢你。你让我度过了美好的一天：D@FarahWC.很高兴提供帮助。如果它解决了您的问题，您应该接受它作为答案。通过检查正确的符号。