tween-task
TypeScript icon, indicating that this package has built-in type declarations

0.0.8 • Public • Published

tween-task

npm Github file size

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

Readme

Keywords

Package Sidebar

Install

npm i tween-task

Weekly Downloads

9

Version

0.0.8

License

MIT

Unpacked Size

8.86 kB

Total Files

7

Last publish

Collaborators

  • shalldie