动画运动 缓动算法(easing function)

分类：

1. linear
2. ease-in
3. ease-out
4. ease-in-out

缓动公式

变量

 -  currentTime 当前时间
 -  duration  动画时长
 -  startValue 初始值
 -  changeValue 变化量

公式

• linear

缓动函数

   function linear(currentTime, startValue, changeValue, duration) {
     return changeValue * (currentTime / duration) + startValue;
   }

• ease-in

缓动函数

function easeInQuad(currentTime, startValue, changeValue, duration) {
   (currentTime /= duration);
  return changeValue * currentTime * currentTime + startValue;
}

• ease-out

缓动函数

function easeOutQuad(currentTime, startValue, changeValue, duration) {
  currentTime /= duration;
  return -changeValue * currentTime * (currentTime - 2) + startValue;
}

• ease-in-out

缓动函数

easeInOutQuad(currentTime, startValue, changeValue, duration) {
  currentTime /= duration / 2;
  if (currentTime < 1) return changeValue / 2 * currentTime * currentTime + startValue;
  currentTime--;
  return -changeValue / 2 * (currentTime * (currentTime - 2) - 1) + startValue;
}