[英]Smooth KineticJS animation, controlled speed
我正在KineticJS中创建一个简单的平面动画,以获得乐趣。
目前动画运行有点生涩,我希望有一些缓和或补间,虽然我不知道如何开始。
任何人都可以借给我数学手吗?
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.5.0-beta.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 870,
height: 392
});
var layer = new Kinetic.Layer();
var xPos = 0;
var yPos = 126;
var growthFactorX = 6;
var growthFactorY = 2.6;
var growthFactorP = 3;
var planeRotation = 30;
// dashed line
var trail = new Kinetic.Line({
points: [{x: xPos,y: yPos}],
stroke: 'white',
strokeWidth: 2,
lineJoin: 'round',
dashArray: [6, 5]
});
var imageObj = new Image();
imageObj.src = '/assets/img/plane.png';
var plane = new Kinetic.Image({
x: xPos,
y: yPos - 15,
width: 54,
height: 30
});
imageObj.onload = function() {
plane.setImage(imageObj);
layer.add(plane);
stage.add(layer);
};
plane.rotateDeg( planeRotation );
layer.add(trail);
stage.add(layer);
var anim = new Kinetic.Animation(function(frame) {
if( xPos < 500 ) {
xPos = growthFactorX + xPos; // adds 3 to xPos on each loop
if( xPos > 400 ) {
yPos = yPos - growthFactorY;
if( plane.getRotationDeg() > 0 )
plane.rotateDeg( (-growthFactorP) ) ;
}
var curPoints = trail.getPoints();
var newPoints = [{x: xPos, y: yPos}];
trail.setPoints(curPoints.concat(newPoints));
plane.setX(xPos + 10);
plane.setY(yPos - 35);
}
else {
anim.stop();
}
}, layer);
anim.start();
</script>
我为你创造了一个小提琴,
并且已经改变了这些因素,我觉得它看起来很顺利,如果有任何规格,请告诉我
var xPos = 0;
var yPos = 126;
var growthFactorX = 5;
var growthFactorY = 2;
var growthFactorP = 1;
var planeRotation = 30;
我希望这会:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.