[英]KineticJS how animate an image
我正在尝试使用KineticJS在整个屏幕上移动图像,但是却一直没有出现函数错误。 图像显示正常,但一直说imageObj.move不是函数,我也不知道为什么。 我是javascript和KineticJS的新手,所以我可能只是犯了一个非常基本的错误,因此欢迎您提供一些帮助。 谢谢!
window.onload = function(){ //init function
var stage = new Kinetic.Stage("container", 600, 600);
var fluffyImgLayer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function(){
imageF = new Kinetic.Image({
x: 0,
y: 250,
image: imageObj,
});
fluffyImgLayer.add(imageF);
stage.add(fluffyImgLayer);
}
imageObj.src = "Flutter_Fluffy_100.png";
stage.onFrame(function(frame){
console.log("fired")
imageObj.move(10,10);
fluffyImgLayer.draw();
});
var period = 2000;
stage.start();
}
实际上,要回答您的问题,问题是您试图在图像对象(而不是Kinetic.Image
对象)上使用KineticJS方法。 使用此代替:
imageF.move(10,10);
您可以执行以下操作并完成操作:
imageObj.x += 3;
imageObj.y += 3;
您需要在imageF前面添加var:
var imageF = new Kinetic.image({
看看: http : //www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/
您得到的错误是因为您没有在任何地方定义move()。 您可以创建移动功能并允许对象使用它。 或者,您可以创建如下函数:
function moveMyThing(myObj, xchange, ychange)
{
myObj.x += xchange;
myObj.y += ychange;
}
然后调用:
moveMyThing(imageObj, 3, 3);
如果一切正常,KineticJS倾向于刷新约60FPS,所以这3速度实际上非常快。 您还需要考虑检查是否是时候更新运动逻辑了。 最好将它们解耦。
例如:
stage.onFrame(function(frame){
console.log("fired")
time++;
if(readyToThink(time, 6)) //check if you want to do something
moveMyThing(imageObj,3,3); //Then move it...
fluffyImgLayer.draw();
});
function readyToThink(time, limit){
if(time > limit) //some amount of time to get here
{
time = 0; //reset counter
return true;
}
return false;
}
要考虑跳动,可以在动作之间进行补间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.