javascriptanimationeasing-functions

Easing functions for my animation not working


I'm not the best at maths, and im sorta trying to guess how to implement this for my animation. But currently it is not working, and I believe i have misunderstood how to do my easing function for my animation.

I have a object which is meant to represent a plane, on my canvas of which has the follow properties:

Current Velocity    = obj.velocity
Braking Distance    = obj.stopDist
Current Position    = obj.posX & obj.posY
Destination         = obj.destX & obj.destY

So i then incorporate the maths to try to have the plane land on a runway with an easing function so it looks half decent visually even if its not real world physics like this:

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    
}

The problem is the plane doesn't slow down as it goes a long the runway towards its destination. It just stays really slow.

Have i confused my maths with how easing functions work ?


Solution

  • Here are some extremely simple easing in and out equations written in that you might find helpful.

      // accelerating from zero velocity
      function easeIn(t)
      {
        return t*t
      }
    
      // decelerating to zero velocity
      function easeOut(t) 
      { 
        return t*(2-t) 
      }
    

    so you could use them like so:

    function ease(easeDelta,accelerateBool){
        if(accelerateBool){
              // accelerating
              return (easeDelta * easeDelta);
        } else {
             //decelerating
              return ((easeDelta*(easeDelta - 2)));
            }
    
    }