T:axis - Make it easier to manage animations in requestAnimationFrame
new Taxis([, options]);
-
timeline
Can check your settings in your timeline.
Useful during development.container
- Element to insert a Timeline
debug
- A Boolean that, if true, indicates that the time axis can be edited in TImeline.
const taxis = new Taxis({
timeline: {
container: document.querySelector('#timeline')
debug: true
}
});
taxis.add(key, duration, [, delay]);
taxis.add(key, duration, [, delay, position]);
key
- Key indicating the time axis
duration
- Duration of the time axis
delay
- Amount of delay in milliseconds before the animation should begin.
position
- Controls the insertion point in the timeline (by default, it’s the end of the timeline).
const taxis = new Taxis();
taxis.add("key#01", 2000);
taxis.add("key#02", 1000, 500);
taxis.add("key#03", 300, 200, 'key#01');
taxis.begin();
Called in the requestAnimationFrame.
taxis.ticker(callback);
time
- Elapsed time since begin()
axes
- Map data of Taxis
const taxis = new Taxis();
taxis.add("key#01", 2000);
taxis.add("key#02", 600);
taxis.add("key#03", 4000);
taxis.ticker((time, axes) => {
console.log(axes.get("key#01").progress); // 0.0 ~ 1.0
});
progress
- A number between 0.0 and 1.0 indicating the rate of progress
enter
- A Boolean that, if true, indicating that progress is greater than 0.0.
pass
- A Boolean that, if true, indicating that progress is equal to 1.0.