tween-task

A lib to make easy tween task.

简易缓动函数库。

Installation

npm install tween-task

Usage

import Task from './tween-task';
// let Task = window.TweenTask; // window
// let Task = require('tween-task'); // commonjs

// run a task with default interval
// 使用内置的 setInterval 来启动任务
Task.run({
    from: { x: 1 },
    to: { x: 100 },
    onUpdate({ x }) {
        console.log('x has been updated:' + x);
    },
    done() {
        console.log('task has been done.')
    }
});

// or update when you like
// 或者在你喜欢的时机去更新

const task = new Task({
    from: { x: 1 },
    to: { x: 100 },
    onUpdate({ x }) {
        console.log('x is :' + x);
    },
    done() {
        console.log('task has been done.')
    }
});

(function update() {
    task.update();
    if (task.done) {
        return;
    }
    requestAnimationFrame(update);
})();

Support

IE6+

Api

ITaskOptions

interface ITaskOptions<T> {
    from: T;
    to: T;
    duration?: number;
    tween?: Function;
    onUpdate?: (cord: T) => void;
    done?: (cord: T) => void;
}

| Name | Required | Type | Default | Description | | :------- | :------: | :--------: | :------------------: | :------------------------------------------------------------ | | from | true | Object | | properties of from 起始的属性 | | to | true | Object | | properties of to 目标属性 | | duration | false | Number | 1000 | duration of the task. 任务持续时间 | | tween | false | Function | a function of linear | custom tween function 自定义的缓动函数 | | onUpdate | false | Function | | Function invoked when task updated 任务每次更新的时候触发 | | done | false | Function | | Function invoked when task finished 任务结束的时候触发 |

Methods

| Name | Description | | :------ | :-----------------------------------------: | | update | make the task to computed 主动触发计算 | | dispose | dispose the task 释放资源、停止动画 |

Example:

const Task = new Task({...});
Task.update();

Enjoy it! :D