[英]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.