function noEasing (t, b, c, d) {
                return c * t / d + b;
              }

@t is the current time (or position) of the tween. This can be seconds or frames, steps, seconds, ms, whatever – as long as the unit is the same as is used for the total time [3].

@b is the beginning value of the property.

@c is the change between the beginning and destination value of the property.

@d is the total time of the tween.

Cubic-EaseIn in Grapher

EasingFunctions = {
  linear: function (t) { return t },
  easeInQuad: function (t) { return t*t },
  easeOutQuad: function (t) { return t*(2-t) },
  easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
  easeInCubic: function (t) { return t*t*t },
  easeOutCubic: function (t) { return (--t)*t*t+1 },
  easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
  easeInQuart: function (t) { return t*t*t*t },
  easeOutQuart: function (t) { return 1-(--t)*t*t*t },
  easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
  easeInQuint: function (t) { return t*t*t*t*t },
  easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
  easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t }
}

Bezier Curve based easing functions – from concept to implementation

Easing Reference: designed by Alastair Halliday

Card stack UI interaction: designed by shivani goel

Rapid Interpolator: developed by MartinRGB

AE 获取方法

粗略计算

Get Bezier

Cubic Bezier Curve

// Converted from Python version: http://doswa.com/2009/01/02/fourth-order-runge-kutta-numerical-integration.html
function rk4(x, v, a, dt) {
  // Returns final (position, velocity) array after time dt has passed.
  //        x: initial position
  //        v: initial velocity
  //        a: acceleration function a(x,v,dt) (must be callable)
  //        dt: timestep
  var x1 = x;
  var v1 = v;
  var a1 = a(x1, v1, 0);

  var x2 = x + 0.5*v1*dt;
  var v2 = v + 0.5*a1*dt;
  var a2 = a(x2, v2, dt/2);

  var x3 = x + 0.5*v2*dt;
  var v3 = v + 0.5*a2*dt;
  var a3 = a(x3, v3, dt/2);

  var x4 = x + v3*dt;
  var v4 = v + a3*dt;
  var a4 = a(x4, v4, dt);

  var xf = x + (dt/6)*(v1 + 2*v2 + 2*v3 + v4);
  var vf = v + (dt/6)*(a1 + 2*a2 + 2*a3 + a4);

  return [xf, vf];
}}

Fourth Order Runge-Kutta Algorithm in Javascript

在动画时间中，每一单位时间，都会根据上一时间的速度和位置，结合加速度来决定如何运动

标注案例一

AE 的时间轴

标注文档

CABasicAnimation *animation = [CABasicAnimation animation];
//属性
animation.keyPath = @"position.x";
//变化量
animation.fromValue = @670;
animation.toValue = @170;
//时间
animation.duration = 0.42;
animation.fillMode = kCAFillModeForward;
animation.removedOnCompletion = NO;
//曲线C
animation.timingFunction =[CAMediaTimingFunction  functionWithControlPoints:0.78: 0.36: 0.14: 1.09];
[myView.layer addAnimation:animation forKey:@"myKey"];

以元素C的位移为例,用带有 TimingFunction 的 CAAnimation 即可描述动画

标注案例二:Prime Music

交互效果

标注图示

标注案例三:来自BBB612_POTATO