Javascript中的2个动画

2019年8月6日 120次阅读

我想在同一页面上制作多个动画.但我不知道如何创建另一个变量.这是样本,
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();

}

最佳答案 你可以创建第二个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.

点赞