私は数学が得意ではありません。アニメーションにこれを実装する方法を推測しようとしています。しかし、現在は機能していません。アニメーションのイージング機能を実行する方法を誤解していると思います。
平面を表すことを目的としたオブジェクトがあり、そのキャンバスには次のプロパティがあります。
Current Velocity = obj.velocity
Braking Distance = obj.stopDist
Current Position = obj.posX & obj.posY
Destination = obj.destX & obj.destY
次に、数学を組み込んで、イージング関数を使用して飛行機が滑走路に着陸するようにします。これにより、次のような現実世界の物理学でなくても、視覚的に半分まともに見えます。
function ease(easeDelta,accelerateBool){
if(accelerateBool){
// accelerating
return (easeDelta * easeDelta * easeDelta);
} else {
//decelerating
return ((easeDelta--) * easeDelta * easeDelta + 1);
}
}
function InRange(delta, minValue, maxValue){
var range = (maxValue - minValue);
var valueInRange = (range * delta);
var finalValue = (valueInRange + minValue);
return finalValue;
}
function landing(){ //part of animation loop
var delta = new Date().getTime() - obj.timer, //ms since previous frame
vectorX = obj.destX - obj.posX,
vectorY = obj.destY - obj.posY,
normal = Math.sqrt(vectorX*vectorX + vectorY*vectorY), //distance to destination
targetSpeed = 20,
easeDelta = (normal / obj.stopDist),
newSpeed = InRange(ease(easeDelta,false), obj.velocity, targetSpeed),
distance = delta * newSpeed;
obj.posX += (distance * vectorX);
obj.posY += (distance * vectorY);
obj.timer = new Date().getTime(); //ready for next frame
}
問題は、飛行機が目的地に向かって滑走路を長く進むときに減速しないことです。それは本当に遅いままです。
イージング関数の仕組みと数学を混同していませんか?