hease

一个超级精简的缓动库

内置缓动函数速查表请参考: https://easings.net/zh-cn

安装

npm install hease

例子

import { hease, EASE } from 'hease';
// 播放，并注册相关事件
const ani = hease(0, 1, 2000, EASE.linear)
    .onUpdate((val) => {
        console.log(val);
    })
    .onComplate(() => {
        console.log('动画播放完成');
    })
    .play();
// 停止动画
ani.stop();
// 立即完成动画
ani.complete();

如何播放无数次动画？

// ...
// 只需要在播放数传入Infinity
ani.play(Infinity)
// ...

注意：无限播放动画将无法触发onComplete，但是可以通过手动调用complete方法触发

如何创建一个yoyo动画？

import { hease, EASE, yoyo } from 'hease';
// 使用内部实现的yoyoy辅助函数
const ani = hease(0, 1, 2000, yoyo(EASE.linear));

注意:时间正向和时间回溯的动画效果时不一样的，内置实现的时按照时间回溯的方式实现的

相关API补充

hease(from: number|number[], to: number|number[], duration = 1000, ease = EASE.linear)
创建一个缓动器
Hease.play()
直接播放1次动画，或者继续播放动画
Hease.play(num: number)
播放num次动画
bindTicker(fn: HeaseTicker)
绑定自定义刷新器
createUpdate(fn: (dt: number) => void)
创建一个刷新运行对象