JS版 transition 计算

CSS3的transition,很方便的用来制作动画,可惜无法用脚本控制,不能与画布兼容,上网搜了下一般只有曲线图，看不出时间效果，于是自己写了个，可以在5秒（可以设置）内看出运动的轨迹，不过没有做画布清除，可以刷新本页面重新看效果。

线性二次方in 二次方out 二次方in_out 三次方in 三次方out 三次方in_out 四次方in 四次方out 四次方in_out 五次方in 五次方out 五次方in_out 正弦余弦正弦-余弦指数in 指数out 指数in_out 循环in 循环out 循环in_out

//所有方法的参数一样,依次传入 目前的时间, 时间开始时的值, 时间结束时的值, 动画总时间
//线性
function linear(currentTime,start,stop,totalTime){
  return stop * currentTime/totalTime + start;
}
//二次方 in
function easing_in(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  return stop * currentTime*currentTime +start;
}
//二次方 out
function easing_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  return start - stop * currentTime * (currentTime);
}
//二次方 先in后out
function easing_in_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  if (currentTime < 1) return stop/2*currentTime*currentTime + start;
  currentTime--;
  return -stop/2 * (currentTime*(currentTime-2) - 1) + start;
}
//三次方 in
function cubic_in(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  return stop*currentTime*currentTime*currentTime + start;
}
function cubic_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  currentTime--;
  return stop*(currentTime*currentTime*currentTime + 1) + start;
}
function cubic_in_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  if (currentTime < 1) return stop/2*currentTime*currentTime*currentTime + start;
  currentTime -= 2;
  return stop/2*(currentTime*currentTime*currentTime + 2) + start;
}
//四次方
function quartic_in(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  return stop*currentTime*currentTime*currentTime*currentTime + start;
}
function quartic_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  currentTime /= totalTime;
  currentTime--;
  return -stop * (currentTime*currentTime*currentTime*currentTime - 1) + start;
}
function quartic_in_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime/2;
  if (currentTime < 1) return stop/2*currentTime*currentTime*currentTime*currentTime + start;
  currentTime -= 2;
  return -stop/2 * (currentTime*currentTime*currentTime*currentTime - 2) + start;
}
//五次方
function quintic_in(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  return stop*currentTime*currentTime*currentTime*currentTime*currentTime + start;
}
function quintic_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  currentTime--;
  return stop*(currentTime*currentTime*currentTime*currentTime*currentTime + 1) + start;
}
function quintic_in_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime/2;
  if (currentTime < 1) return stop/2*currentTime*currentTime*currentTime*currentTime*currentTime + start;
  currentTime -= 2;
  return stop/2*(currentTime*currentTime*currentTime*currentTime*currentTime + 2) + start;
}
//正弦线
function sinusoidal_in(currentTime,start,stop,totalTime){
  return -stop * Math.cos(currentTime/totalTime * (Math.PI/2)) + stop + start;
}
function sinusoidal_out(currentTime,start,stop,totalTime){
  return stop * Math.sin(currentTime/totalTime * (Math.PI/2)) + start;
}
function sinusoidal_in_out(currentTime,start,stop,totalTime){
  return -stop/2 * (Math.cos(Math.PI*currentTime/totalTime) - 1) + start;
}

//指数线
function exponential_in(currentTime,start,stop,totalTime){
  return stop * Math.pow( 2, 10 * (currentTime/totalTime - 1) ) + start;
}
function exponential_out(currentTime,start,stop,totalTime){
  return stop * ( -Math.pow( 2, -10 * currentTime/totalTime ) + 1 ) + start;
}
function exponential_in_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime/2;
  if (currentTime < 1) return stop/2 * Math.pow( 2, 10 * (currentTime - 1) ) + start;
  currentTime--;
  return stop/2 * ( -Math.pow( 2, -10 * currentTime) + 2 ) + start;
}

//循环
function circular_in(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  return -stop * (Math.sqrt(1 - currentTime*currentTime) - 1) + start;
}
function circular_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime;
  currentTime--;
  return stop * Math.sqrt(1 - currentTime*currentTime) + start;
}
function circular_in_out(currentTime,start,stop,totalTime){
  currentTime /= totalTime/2;
  if (currentTime < 1) return -stop/2 * (Math.sqrt(1 - currentTime*currentTime) - 1) + start;
  currentTime -= 2;
  return stop/2 * (Math.sqrt(1 - currentTime*currentTime) + 1) + start;
}