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 ArrayAn 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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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 SupportY
SDK Constraintnone
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);