Teal TealUI

补间动画util/tween

底层实现补间动画算法，以便实现平滑渐变的效果。

<div style="border: 1px solid #e89109; width: 318px;">
    <div id="box" style="width: 18px; height: 18px; background: #e89109; position: relative;"></div>
</div>
<div id="btn" class="doc" style="margin-top: 1rem;"></div>
<script>
    import Tween from "util/tween";
    import * as timingFunctions from "util/tween/timingFunctions";

    var html = "";
    for (var key in timingFunctions) {
        if (!/^ease/.test(key)) {
            html += `<input type="button" onclick="run(timingFunctions.${key})" value="${key}"> `;
            html += `<input type="button" onclick="run(timingFunctions.easeOut(timingFunctions.${key}))" value="easeOut(${key})"> `;
            html += `<input type="button" onclick="run(timingFunctions.easeInOut(timingFunctions.${key}))" value="easeInOut(${key})"> `;
            html += `<br>`;
        }
    }
    btn.innerHTML = html;

    var tween = new Tween();
    tween.duration = 3000;
    tween.set = (x) => {
        box.style.left = 300 * x + 'px';
    };
    
    export function run(timingFunction) {
        if (!tween.timer) {
            tween.reset();
        }
        tween.timingFunction = timingFunction;
        tween.start();
    }
    
    export { timingFunctions };
</script>
⏷
另参考
API
全局
Tween 类

API

全局

函数 描述
⮞ tween(callback, ...)(callback:function, duration?:number, timingFunction?:function):Tween

执行一个补间动画。

参数 类型 描述 默认值
callback* (value: number) => void —
duration number —
timingFunction (value: number) => number —

返回值

类型：Tween

返回新补间动画对象。

执行一个补间动画。

Tween 类

表示一个补间动画。

示例

var tween = new Tween();
tween.set = x => { console.log(x); }
tween.start();
字段 类型 描述
⮞ duration : number = 300

动画执行的总毫秒数。

 number

动画执行的总毫秒数。
⮞ fps : number = 50

每秒显示的帧数。

 number

每秒显示的帧数。
⮞ done : () => void

动画结束后执行的回调函数。

 function

动画结束后执行的回调函数。
方法 描述
⮞ timingFunction(value)(value:number):number

渐变曲线。通过渐变曲线更改变化因子的变化方式。

参数 类型 描述 默认值
value* number —

返回值

类型：number

返回转换后的变化因子，大小在 0-1 之间。

渐变曲线。通过渐变曲线更改变化因子的变化方式。
⮞ set(value)(value:number):void

当被子类重写时负责根据变化因子设置实际的值。

参数 类型 描述 默认值
value* number —

返回值

类型：void

当被子类重写时负责根据变化因子设置实际的值。
⮞ start()():void

开始执行动画。

返回值

类型：void

开始执行动画。
⮞ stop()():void

停止执行动画。

返回值

类型：void

停止执行动画。
⮞ reset()():void

重置动画。

返回值

类型：void

重置动画。
⮞ progress()():void

(保护的)显示下一帧。

返回值

类型：void

(保护的)显示下一帧。