我正在尝试将多个图像层分别旋转和动画化。问题是当我在其中一张图像上调用动画旋转函数时,我的调试器说该图像没有旋转函数。这是我得到的
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer1 = new Kinetic.Layer();
var layer2 = new Kinetic.Layer();
var layer3 = new Kinetic.Layer();
var layer4 = new Kinetic.Layer();
var logo4 = new Image();
var logo3 = new Image();
var logo2 = new Image();
var logo1 = new Image();
var logoRing, logoCross, logoCentreRings, logoCentre;
var loadCount = 0;
logo4.onload = function() {
loadCount ++;
if(loadCount == 4&& !loaded){
loaded = true;
putOnStage();
}
};
logo3.onload = function() {
loadCount ++;
if(loadCount == 4&& !loaded){
loaded = true;
putOnStage();
}
};
logo2.onload = function() {
loadCount ++;
if(loadCount == 4&& !loaded){
loaded = true;
putOnStage();
}
};
logo1.onload = function() {
loadCount ++;
if(loadCount == 4 && !loaded){
loaded = true;
putOnStage();
}
};
var loaded = false;
logo4.src = "logo_ring.png";
logo3.src = "logo_cross.png";
logo2.src = "logo_centre_rings.png";
logo1.src = "logo_centre.png";
var logoPosX = 0;
var logoPosY = 0;
var logoWidth = 300;
var logoHeight = 300;
function putOnStage(){
logoRing = new Kinetic.Image({
x: 0,
y: 0,
image: logo4,
width: logoWidth,
height: logoHeight
});
layer4.add(logoRing);
stage.add(layer4);
logoCross = new Kinetic.Image({
x: 0,
y: 0,
image: logo3,
width: logoWidth,
height: logoHeight
});
layer3.add(logoCross);
stage.add(layer3);
logoCentreRings = new Kinetic.Image({
x: 0,
y: 0,
image: logo2,
width: logoWidth,
height: logoHeight
});
layer2.add(logoCentreRings);
stage.add(layer2);
logoCentre = new Kinetic.Image({
x: 0,
y: 0,
image: logo1,
width: logoWidth,
height: logoHeight
});
layer1.add(logoCentre);
stage.add(layer1);
}
var angularSpeed = 360 / 4;
var rotateCentreRings = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
logoCross.rotate(angleDiff);
}, layer2);
rotateCentreRings.start();
最佳答案
您使用的是哪个版本的 KineticJS?最新版本已弃用 rotateDeg
,而改为简单地使 rotate
使用度数而不是弧度。
此外,您将在加载图像之前创建并启动动画。这就是当您尝试旋转 logoCross
时未定义它的原因。将其移至 putOnStage
内部,它应该可以工作。
function putOnStage(){
logoRing = new Kinetic.Image({
x: 0,
y: 0,
image: logo4,
width: logoWidth,
height: logoHeight
});
layer4.add(logoRing);
stage.add(layer4);
logoCross = new Kinetic.Image({
x: 0,
y: 0,
image: logo3,
width: logoWidth,
height: logoHeight
});
layer3.add(logoCross);
stage.add(layer3);
logoCentreRings = new Kinetic.Image({
x: 0,
y: 0,
image: logo2,
width: logoWidth,
height: logoHeight
});
layer2.add(logoCentreRings);
stage.add(layer2);
logoCentre = new Kinetic.Image({
x: 0,
y: 0,
image: logo1,
width: logoWidth,
height: logoHeight
});
layer1.add(logoCentre);
stage.add(layer1);
var angularSpeed = 360 / 4;
var rotateCentreRings = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
logoCross.rotate(angleDiff);
}, layer2);
rotateCentreRings.start();
}
关于javascript - Kinetic JS 图像分层和动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22570419/