微调

简单,纯粹的功能调整功能.

安装

$ npm install @f/tween

使用量

var tween = require('@f/tween')
var applyStyles = require('@f/apply-styles')

function animate (element, start, end, duration, easing, cb) {
  var tick = tween(start, end)
  var t = 0

  requestAnimationFrame(function ticker () {
    var props = tick(t)
    applyStyles(element, props)

    if (props !== end) {
      t++
      requestAnimationFrame(ticker)
    } else {
      cb()
    }
  })
}

animate(element, {width: 10, left: 2}, {width: 100, left: 200})

API 密码

tween( 启动、 结束、 持续时间、 放松、 间隔)

• start - 包含您想要调整的属性初始值的对象.
• end - 包含您想要调整的属性最终值的对象.
• duration - 时间的长度,以毫秒, 你的tween应该是。 默认为350ms.
• easing - 放松功能,需要勾选值并根据放松功能进行插值。 默认为线性.
• interval - 你想使用的勾点长度,以毫秒计。 默认为16.66ms(即单一请求AnimationFrame定时器).

回返情况: 接受单一参数的部分应用函数, t 并返回该勾选的插入属性。 这个 t 参数是一个与您所请求的 tween 框架相对应的无单位值。 所以,如果你正在使用 requestAnimationFrame 和默认间隔, 您只需每勾选一次递增 t . t 不需要是一个整数.

许可证

麻省理工学院