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()
``