timeline

this tool is inspired by a share from 杜伟 the douyu.com's fe in a ITA1024 WeChat Group Sharing;

and this is the article about that share.

About

this tool is suitable for some project with many time(second not minisecond) based action or animation.

too many setTimeout and setInterval will drop down the page's performace.

so this tool will make the only one setInterval, and every action and animation will run base with it's tick.

Concepts

frame

the core of timeline is a setInterval, and everytime the func pass to the setInterval be called, this is a frame

node

the timeline will maintence a list, and the item in the list is a node. it contains enough information about a action or animation, and it will tell timeline how to excute itself every frame.

Useage

you can start the timeline with

timeline.start();

and then you can add a node to it.

timeline.add({
    id: 'timeCountDown', // the identify of the node, must
    data: null, // anything you need save for the node, not required but recommend
    state: 'live', // 'live', 'die', 'pending' etc. tell timeline wheather remove it or not
    tick: function(node, time){}, // this is the func will be called every frame
    destroy: function(node, time){} // this will be call before timeline remove node from it's list
});

API

// TODO

Testing

our test spec is under the spec directory

we use the jasmine to build the test environment.

npm install jasmine -g // install the jasmine globally

and in the project's directory

jasmine

will auto run the specs