CAPH.WUI.ANI.ANILOADER
AniLoader represents a container that is useful to manage the entire life cycle of animation, and it is capable to hold various types of animation.
- The container preserves a full control for animation by the add, remove, start, pause, resume, stop and setLoop(make animation performs repeatedly) methods.
- It is so essential that each vector animation can run with it.
Contents
Constructor
AniLoader | ||
Description | ||
Construct a AniLoader. | ||
Parameters | ||
animation | Array | An instance of a certain type of animation or an array of instances of animation. If the former, then animation perform in the order of the sequence of added. If the latter, then all animation added perform concurrently. |
Emulator Support | ||
SDK Constraint | ||
Example | ||
var AniLoader = caph.wui.ani.AniLoader; var loader = new AniLoader(); |
Methods
AniLoader | ||
Description | ||
(Constructor) Construct a AniLoader. | ||
Parameters | ■animation - Object : Array - An instance of a certain type of animation or an array of instances of animation. If the former, then animation perform in the order of the sequence of added. If the latter, then all animation added perform concurrently. | |
Return | ■Object - The reference of the instance of AniLoader that created by user, user could apply the reference returned to add more animation. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var AniLoader = caph.wui.ani.AniLoader; var loader = new AniLoader(); |
clone | ||
Description | ||
Creates and returns clone object from current object, the cloned object will have the same properties and same methods with the current object. | ||
Parameters | ■Void | |
Return | ■Object - The cloned object. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var AniLoader = window.caph.wui.ani.AniLoader; var loader = new AniLoader(); var obj = loader.clone(); |
equals | ||
Description | ||
Compares the contents of two objects using strict equality, objects are considered equal if they both have the same set of properties and the values of those properties are equal. | ||
Parameters | ■Object - Object - The object which wants to compare with current object. | |
Return | ■Boolean - true : Indicates whether the two objects are equal, if they are equal, return true. - false : if they aren't equal, return false. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var AniLoader = window.caph.wui.ani.AniLoader; var loader =new AniLoader(); var obj = loader.clone(); var isequal = obj.equals(loader); |
add | ||
Description | ||
Put animation into the container. | ||
Parameters | ■animation - Object : Array - An instance of a certain type of animation or an array of instances of animation. If the former, then animation perform in the order of the sequence of added. If the latter, then all animation added perform concurrently. | |
Return | ■Object - The reference of the instance of AniLoader that created by user, user could apply the reference returned to add more animation. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var BounceAnimation = caph.wui.ani.BounceAnimation; var AniLoader = caph.wui.ani.AniLoader; var Box = caph.wui.widget.Box; var bounce = new BounceAnimation(); var loader = new AniLoader(); var widget = new Box({ frame: { width: 100, height: 100 } }); var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100}; bounce.add(widget, bounceOpt); loader.add(bounce); |
remove | ||
Description | ||
Remove the animation from the container, the removed animation would never perform again on the component. | ||
Parameters | ■animation - Object - An instance of a certain type of animation or an array of instances of animation. | |
Return | ■Object - The reference of the instance of AniLoader that created by user, user could apply the reference returned to add more animation. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var BounceAnimation = caph.wui.ani.BounceAnimation; var AniLoader = caph.wui.ani.AniLoader; var Box = caph.wui.widget.Box; var bounce = new BounceAnimation(); var loader = new AniLoader(); var widget = new Box({ frame: { width: 100, height: 100 } }); var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100}; bounce.add(widget, bounceOpt); loader.add(bounce); loader.remove(bounce); |
pause | ||
Description | ||
All animation in the container pause, animation could resume from the pause point by invoking the function 'resume()'. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var BounceAnimation = caph.wui.ani.BounceAnimation; var AniLoader = caph.wui.ani.AniLoader; var UIContext = caph.wui.widget.UIContext; var Box = caph.wui.widget.Box; var uiContext = new UIContext(); var bounce = new BounceAnimation(); var loader = new AniLoader(); var widget = new Box({ frame: { width: 100, height: 100 } }); widget.render(uiContext); var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100}; bounce.add(widget, bounceOpt); loader.add(bounce); loader.start(uiContext); loader.pause(); |
resume | ||
Description | ||
All animation in the container resume, from the pause point. If no pause point exists, would not work. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var BounceAnimation = caph.wui.ani.BounceAnimation; var AniLoader = caph.wui.ani.AniLoader; var UIContext = caph.wui.widget.UIContext; var Box = caph.wui.widget.Box; var uiContext = new UIContext(); var bounce = new BounceAnimation(); var loader = new AniLoader(); var widget = new Box({ frame: { width: 100, height: 100 } }); widget.render(uiContext); var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100}; bounce.add(widget, bounceOpt); loader.add(bounce); loader.start(uiContext); loader.pause(); loader.resume(); |
setLoop | ||
Description | ||
Circulate all the animation in the container, animation perform repeatedly by invoking the function. | ||
Parameters | ■number - Number - The times for animation recycle. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var BounceAnimation = caph.wui.ani.BounceAnimation; var AniLoader = caph.wui.ani.AniLoader; var UIContext = caph.wui.widget.UIContext; var Box = caph.wui.widget.Box; var uiContext = new UIContext(); var bounce = new BounceAnimation(); var loader = new AniLoader(); var widget = new Box({ frame: { width: 100, height: 100 } }); widget.render(uiContext); var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100}; bounce.add(widget, bounceOpt); loader.add(bounce); loader.setLoop(3); loader.start(uiContext); |
stop | ||
Description | ||
All animation in the container stopped, once stopped, could not resume, but take a start from the head. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var BounceAnimation = caph.wui.ani.BounceAnimation; var AniLoader = caph.wui.ani.AniLoader; var UIContext = caph.wui.widget.UIContext; var Box = caph.wui.widget.Box; var uiContext = new UIContext(); var bounce = new BounceAnimation(); var loader = new AniLoader(); var widget = new Box({ frame: { width: 100, height: 100 } }); widget.render(uiContext); var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100}; bounce.add(widget, bounceOpt); loader.add(bounce); loader.start(uiContext); loader.stop(); |
start | ||
Description | ||
Start animation added into the container, all animation perform one by one, or concurrently, depends on how they were added | ||
Parameters | ■uiContext - Object - it is the instance of UIContext, user's component are rendered. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var BounceAnimation = caph.wui.ani.BounceAnimation; var AniLoader = caph.wui.ani.AniLoader; var UIContext = caph.wui.widget.UIContext; var Box = caph.wui.widget.Box; var uiContext = new UIContext(); var bounce = new BounceAnimation(); var loader = new AniLoader(); var widget = new Box({ frame: { width: 100, height: 100 } }); widget.render(uiContext); var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100}; bounce.add(widget, bounceOpt); loader.add(bounce); loader.start(uiContext); |
addStateListener | ||
Description | ||
Registers a listener to watch state changes during the period of animation performing. | ||
Parameters | ■cb (Optional) - Function - Occurs when animation state changes. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var BounceAnimation = caph.wui.ani.BounceAnimation; var FadeAnimation = caph.wui.ani.FadeAnimation; var AniLoader = caph.wui.ani.AniLoader; var Box = caph.wui.widget.Box; var UIContext = caph.wui.widget.UIContext; var bounce = new BounceAnimation(); var fade = new FadeAnimation(); var loader1 = new AniLoader(); var loader2 = new AniLoader(); var uiContext = new UIContext(); var widget = new Box({ frame: { width: 100, height: 100 } }); widget.render(uiContext); var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100}; bounce.add(widget, bounceOpt); var fadeOpt = {opacity: 0.2, duration: 2000} fade.add(widget, fadeOpt); loader1.add(bounce); loader2.add(fade); loader1.addStateListener(function() { loader2.start(uiContext); }); loader1.start(uiContext); |
removeStateListener | ||
Description | ||
Removes the listener which had been registered to watch state changes during the period of animation performing. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var BounceAnimation = caph.wui.ani.BounceAnimation; var FadeAnimation = caph.wui.ani.FadeAnimation; var AniLoader = caph.wui.ani.AniLoader; var Box = caph.wui.widget.Box; var UIContext = caph.wui.widget.UIContext; var bounce = new BounceAnimation(); var fade = new FadeAnimation(); var loader1 = new AniLoader(); var loader2 = new AniLoader(); var uiContext = new UIContext(); var widget = new Box({ frame: { width: 100, height: 100 } }); widget.render(uiContext); var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100}; bounce.add(widget, bounceOpt); var fadeOpt = {opacity: 0.2, duration: 2000} fade.add(widget, fadeOpt); loader1.add(bounce); loader2.add(fade); loader1.addStateListener(function() { loader2.start(uiContext); }); loader1.removeStateListener(); loader1.start(uiContext); |