README
cubic-bezier-timing-function
三次贝塞尔计时函数
Usage
创建一条三次贝塞尔曲线,需要提供4个点P0、P1、P2、P3。计时函数所对应的贝塞尔曲线的P0和P3是确定的,分别为P0(0, 0)和P3(1, 1),我们只需提供P1(x1, y1)和P2(x2, y2)。
We need 4 points to create a bezier curve. The bezier curve corresponding to the timing function has established P0(0, 0) and P3(1, 1). We need to provide the other 2 points P1(x1, y1) and P2(x2, y2).
// @param {number} x1
// @param {number} y1
// @param {number} x2
// @param {number} y2
// @param {number} precision 近似解的精度,默认值为 0.00001。
// The precision of the calculation. It is not necessary and has a default value 0.00001.
cubicBezierTimingFunction(x1, y1, x2, y2, precision)
// cubicBezierTimingFunction(0.4, 0.3, 0.9, 1.2)
// cubicBezierTimingFunction(0.4, 0.3, 0.9, 1.2, 0.0001)
// @param {string} presetName 预设方案名称。
// 'linear': [0, 0, 1, 1],
// 'ease': [0.25, 0.1, 0.25, 1],
// 'ease-in': [0.42, 0, 1, 1],
// 'ease-out': [0, 0, 0.58, 1],
// 'ease-in-out': [0.42, 0, 0.58, 1]
// @param {number} precision 近似解的精度,默认值为 0.00001。
// The precision of the calculation. It is not necessary and has a default value 0.00001.
cubicBezierTimingFunction(presetName, precision)
// cubicBezierTimingFunction('linear')
// cubicBezierTimingFunction('linear', 0.000001)
import cubicBezierTimingFunction from 'cubic-bezier-timing-function'
let timingFn = cubicBezierTimingFunction('ease')
let duration = 2000 // 动画时长,单位ms。 animation duration in milliseconds.
let startTime
function update() {
if (!startTime) {
startTime = Date.now()
}
let x = (Date.now() - startTime) / duration
let y = timingFn(x)
// 使用 y 值去更新其他值或视图
// update something with y
if (x < 1) {
requestAnimationFrame(update)
}
}
update()