几段小的动画处理

[hjin-me]

使用 requestAnimationFrame

// 外层作用域对象
let beginTime = NaN
let during = 400
let startStatus = 0
let endStatus = 0

() => {
  // 某处触发动画
  startStatus = // 新的起始状态 
  endStatus =  // 新的终止状态
  let animation = (ts) => {
    if (isNaN(beginTime)) {
      beginTime = ts
    }
    let delta = ts - beginTime // 计算时间变化量
    // 使用下面某个缓动函数计算状态变化量
    // 并绘制当前状态
    currentStatus = easeOutCirc(Math.min(delta, during), startTop, endStatus - startStatus, during) 
    if (delta <= during) {
      requestAnimationFrame(animation)
    }
  }
  let startNewAnimation = () => {
    // 触发动画启动
    beginTime = NaN
    requestAnimationFrame(animation)
  }
  startNewAnimation()
}

代码好处在于在动画执行完成之间可以反复出发动画并且状态正确。

css transition 动画处理

// TODO

常见的缓动函数

常见缓动函数

前端动画实现思想

一篇文章 PS. 缓动函数存档

// simple linear tweening - no easing, no acceleration

Math.linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

// quadratic easing in - accelerating from zero velocity

Math.easeInQuad = function (t, b, c, d) {
    t /= d;
    return c*t*t + b;
};

// quadratic easing out - decelerating to zero velocity

Math.easeOutQuad = function (t, b, c, d) {
    t /= d;
    return -c * t*(t-2) + b;
};

// quadratic easing in/out - acceleration until halfway, then deceleration

Math.easeInOutQuad = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};

// cubic easing in - accelerating from zero velocity

Math.easeInCubic = function (t, b, c, d) {
    t /= d;
    return c*t*t*t + b;
};

// cubic easing out - decelerating to zero velocity

Math.easeOutCubic = function (t, b, c, d) {
    t /= d;
    t--;
    return c*(t*t*t + 1) + b;
};

// cubic easing in/out - acceleration until halfway, then deceleration

Math.easeInOutCubic = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t*t + b;
    t -= 2;
    return c/2*(t*t*t + 2) + b;
};

// quartic easing in - accelerating from zero velocity

Math.easeInQuart = function (t, b, c, d) {
    t /= d;
    return c*t*t*t*t + b;
};

// quartic easing out - decelerating to zero velocity

Math.easeOutQuart = function (t, b, c, d) {
    t /= d;
    t--;
    return -c * (t*t*t*t - 1) + b;
};

// quartic easing in/out - acceleration until halfway, then deceleration

Math.easeInOutQuart = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t*t*t + b;
    t -= 2;
    return -c/2 * (t*t*t*t - 2) + b;
};

// quintic easing in - accelerating from zero velocity

Math.easeInQuint = function (t, b, c, d) {
    t /= d;
    return c*t*t*t*t*t + b;
};

// quintic easing out - decelerating to zero velocity

Math.easeOutQuint = function (t, b, c, d) {
    t /= d;
    t--;
    return c*(t*t*t*t*t + 1) + b;
};

// quintic easing in/out - acceleration until halfway, then deceleration

Math.easeInOutQuint = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t*t*t*t + b;
    t -= 2;
    return c/2*(t*t*t*t*t + 2) + b;
};

// sinusoidal easing in - accelerating from zero velocity

Math.easeInSine = function (t, b, c, d) {
    return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
};

// sinusoidal easing out - decelerating to zero velocity

Math.easeOutSine = function (t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
};

// sinusoidal easing in/out - accelerating until halfway, then decelerating

Math.easeInOutSine = function (t, b, c, d) {
    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
};

// exponential easing in - accelerating from zero velocity

Math.easeInExpo = function (t, b, c, d) {
    return c * Math.pow( 2, 10 * (t/d - 1) ) + b;
};

// exponential easing out - decelerating to zero velocity

Math.easeOutExpo = function (t, b, c, d) {
    return c * ( -Math.pow( 2, -10 * t/d ) + 1 ) + b;
};

// exponential easing in/out - accelerating until halfway, then decelerating

Math.easeInOutExpo = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2 * Math.pow( 2, 10 * (t - 1) ) + b;
    t--;
    return c/2 * ( -Math.pow( 2, -10 * t) + 2 ) + b;
};

// circular easing in - accelerating from zero velocity

Math.easeInCirc = function (t, b, c, d) {
    t /= d;
    return -c * (Math.sqrt(1 - t*t) - 1) + b;
};

// circular easing out - decelerating to zero velocity

Math.easeOutCirc = function (t, b, c, d) {
    t /= d;
    t--;
    return c * Math.sqrt(1 - t*t) + b;
};

// circular easing in/out - acceleration until halfway, then deceleration

Math.easeInOutCirc = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
    t -= 2;
    return c/2 * (Math.sqrt(1 - t*t) + 1) + b;
};