Javascript kinetic.js同一动画循环中的两个tween
我认为动画循环中有一个tweens错误 如果在同一个循环中创建两个tweens并播放它们，则只有第二个tweens实际激发并起作用 第一个不适用于对象和/或不播放 我尝试过分离层，尝试过将所有的二者放在一个数组中，尝试过将对象放在一个数组中Javascript kinetic.js同一动画循环中的两个tween,javascript,kineticjs,Javascript,Kineticjs,我认为动画循环中有一个tweens错误 如果在同一个循环中创建两个tweens并播放它们，则只有第二个tweens实际激发并起作用 第一个不适用于对象和/或不播放 我尝试过分离层，尝试过将所有的二者放在一个数组中，尝试过将对象放在一个数组中 在同一个动画循环中创建的两个tween不起作用。一个动画循环每秒执行大约60次，除非将其限制在较低的速度 重要的是不要在动画循环中重复tween.play（） 您必须确保tween.play（）只运行一次，而不是每秒重复60次 下面是一个在动画循环中启动两个
在同一个动画循环中创建的两个tween不起作用。一个动画循环每秒执行大约60次，除非将其限制在较低的速度 重要的是不要在动画循环中重复tween.play（） 您必须确保tween.play（）只运行一次，而不是每秒重复60次 下面是一个在动画循环中启动两个tweens并成功播放的示例 注意：在下面的代码中，boostersAway变量用于确保tweens只播放一次 演示： 代码：
原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
$（函数（）{
var imageURLs=[]；//将图像的路径放在此处
var-imagesOK=0；
var-imgs=[]；
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/multple/Shuttle.png");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterRed.png");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterPurple.png");
加载图像（开始）；
函数LoadAllImage（回调）{
for（var i=0；i=imageURL.length）{
回调（）；
}
};
img.onerror=function（）{alert（“映像加载失败”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}
}
函数start（）{
//imgs[]数组保存完全加载的图像
//imgs[]与ImageURL[]的顺序相同
setImage（imgs[0]）；
boosterLeft.setImage（imgs[1]）；
setImage（imgs[2]）；
layer.draw（）；
animation.start（）；
}
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
var boosterLeft=新的动能图({
x:stage.getWidth（）/2-28，
y:stage.getHeight（）-128，
宽度：16，
身高：128，
图像：空，
});
图层。添加（boosterLeft）；
var boosterRight=新的动能.Image({
x:stage.getWidth（）/2+10，
y:stage.getHeight（）-128，
宽度：16，
身高：128，
图像：空，
});
图层。添加（boosterRight）；
var shuttle=新的动能图({
x:stage.getWidth（）/2-72/2，
y:stage.getHeight（）-122，
宽度：72，
身高：122，
图像：空，
});
层。添加（穿梭）；
var boostersAway=假；
var animation=新的动能.动画（函数（帧）{
log（boosterLeft.getY（））；
var shuttleY=shuttle.getY（）；
梭子。赛蒂（梭子-1）；
如果（shuttleY>150）{
boosterLeft.setY（boosterLeft.getY（）-1）；
boosterRight.setY（boosterRight.getY（）-1）；
}否则{
如果（！boostersAway）{
boostersAway=真；
tweenLeft.play（）；
tweenRight.play（）；
}
}
如果（沙特利）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var imageURLs=[]; // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/Shuttle.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterRed.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterPurple.png");
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
shuttle.setImage(imgs[0]);
boosterLeft.setImage(imgs[1]);
boosterRight.setImage(imgs[2]);
layer.draw();
animation.start();
}
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var boosterLeft= new Kinetic.Image({
x:stage.getWidth()/2-28,
y:stage.getHeight()-128,
width:16,
height:128,
image:null,
});
layer.add(boosterLeft);
var boosterRight= new Kinetic.Image({
x:stage.getWidth()/2+10,
y:stage.getHeight()-128,
width:16,
height:128,
image:null,
});
layer.add(boosterRight);
var shuttle= new Kinetic.Image({
x:stage.getWidth()/2-72/2,
y:stage.getHeight()-122,
width:72,
height:122,
image:null,
});
layer.add(shuttle);
var boostersAway=false;
var animation = new Kinetic.Animation(function(frame) {
console.log(boosterLeft.getY());
var shuttleY=shuttle.getY();
shuttle.setY(shuttleY-1);
if(shuttleY>150){
boosterLeft.setY(boosterLeft.getY()-1);
boosterRight.setY(boosterRight.getY()-1);
} else{
if(!boostersAway){
boostersAway=true;
tweenLeft.play();
tweenRight.play();
}
}
if(shuttleY<-122){animation.stop();}
}, layer);
var tweenLeft = new Kinetic.Tween({
node: boosterLeft,
duration: 3,
offsetX:100,
offsetY: -200,
rotation: -20*Math.PI/180,
});
var tweenRight = new Kinetic.Tween({
node: boosterRight,
duration: 3,
offsetX:-100,
offsetY: -200,
rotation: 20*Math.PI/180,
});
}); // end $(function(){});
</script>
</head>
<body>
<h4>2 Tweens started+playing in an animation loop.<br>
The red and purple boosters are separate tweens<br>
The animation moves the main shuttle.</h4>
<div id="container"></div>
</body>
</html>