tween
Simple, purely functional tweening function.
Installation
$ npm install @f/tween
Usage
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, easing, interval)
start
- Object containing the initial value of the properties you want to tween.end
- Object containing the final value of the properties you want to tween.duration
- The length of time, in milliseconds, your tween should be for. Defaults to 350ms.easing
- An easing function that takes a tick value and interpolates it according to some easing function. Defaults to linear.interval
- The tick length you want to use, in milliseconds. Defaults to 16.66ms (i.e. a single requestAnimationFrame timer).
Returns: A partially applied function that accepts a single parameter, t
and returns the interpolated properties for that tick. The t
parameter is a unitless value that corresponds to the frame of the tween you are requesting. So, if you are using requestAnimationFrame
and the default interval, you just increment t once for each tick.
License
MIT