The TweenJS library is mainly used to adjust and animate HTML5 and Javascript attributes, providing a simple and powerful tweening interface.
TweenJS is a simple tween animation library using JavaScript. Its development is well integrated with EaselJS library, but it is not dependent or specific to it. It supports assignment of attributes of digital objects and CSS style attributes.
The API is simple but powerful, so it is easy to create complex projects through link commands.
TweenJS module
Defined in: TweenJS:9
The TweenJS Javascript library provides a simple but powerful gradient interface. It supports gradual digital object properties & CSS style properties, and allows you to link tween animations and actions together to create complex sequences.
Simple tween animation
This gradient changes the gradient target alpha attribute from 0 to 1 in one second, and then calls the handleCompletefunction.
target.alpha = 0;
createjs.Tween.get(target).to({alpha:1}, 1000).call(handleComplete);
function handleComplete() {
//渐变完成执行
}Parameters and ranges Tween always provides an call()accompanying parameter and/or a range. If no scope is passed, it is called an anonymous function (normal JavaScript behavior). In the development of object-oriented style, scope is useful to maintain scope.
createjs.Tween.get(target).to({alpha:0})
.call(handleComplete, [argument1, argument2], this);
Chain-programmable tween animation
This gradient will first wait for 0.5 seconds, the alpha attribute of the gradient target changes from 0 to 1, and the visible attribute changes from true to false. This process takes 1 second, and finally the handleCompletefunction is called .
target.alpha = 1;
createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 1000).call(handleComplete);
function handleComplete() {
//渐变完成执行
}
Browser support
TweenJS will work in modern browsers. TweenJS uses an old version of PreloadJS (0.4.1 and earlier) on IE8 or earlier.
This module provides the following classes: