CAPH.WUI.ENGINE.TWEEN.LAYER

Layer helps you organize the animation. You can create time sequential animations on one layer without affecting objects on another layer.


Contents

Constructor

Layer

Description
The constructor of Layer component, in order to create Layer object.
Emulator SupportY
SDK ConstraintNone
Example
var AccRendering = caph.wui.engine.rendering;
var basePage = new AccRendering.BasePage();

var element = document.createElement('div');
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#00AAAA';

var obj = new AccRendering.CssObject(element);
basePage.add(obj);

obj.setZScale(1.5);

var renderer = new AccRendering.CssRenderer();
renderer.render(basePage);

// NOTE: Animator is created, when a new Layer is created
var AccTween = caph.wui.engine.tween;
var layer = new AccTween.Layer();
layer.add(obj, {translateX:200}, {duration: 2000});
layer.add(obj, {rotateX:10*(Math.PI/180)}, {duration: 1000});
layer.start(renderer, basePage);

Methods

Layer

Description
(Constructor) The constructor of Layer component, in order to create Layer object.
Parameters
■Void
Return■Layer
  - instance of Layer
Emulator SupportY
SDK Constraintnone
Example
var AccRendering = caph.wui.engine.rendering;
var basePage = new AccRendering.BasePage();

var element = document.createElement('div');
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#00AAAA';

var obj = new AccRendering.CssObject(element);
basePage.add(obj);

obj.setZScale(1.5);

var renderer = new AccRendering.CssRenderer();
renderer.render(basePage);

// NOTE: Animator is created, when a new Layer is created
var AccTween = caph.wui.engine.tween;
var layer = new AccTween.Layer();
layer.add(obj, {translateX:200}, {duration: 2000});
layer.add(obj, {rotateX:10*(Math.PI/180)}, {duration: 1000});
layer.start(renderer, basePage);

setLoop

Description
Layer 'setLoop' method allows you to set animation loops for number of times given in number. If number is negative, timeline loops infinite times.
Parameters
■number
  - Number
  - The number of times the loop is to be played.
Return■Object
  - Layer object itself.
Emulator SupportY
SDK Constraintnone
Example
var AccRendering = caph.wui.engine.rendering;
var basePage = new AccRendering.BasePage();

var element = document.createElement('div');
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#00AAAA';

var obj = new AccRendering.CssObject(element);
basePage.add(obj);

obj.setZScale(1.5);

var renderer = new AccRendering.CssRenderer();
renderer.render(basePage);

var AccTween = caph.wui.engine.tween;
var layer = new AccTween.Layer();
layer.add(obj, {translateX:200}, {duration: 2000});
layer.add(obj, {rotateX:10*(Math.PI/180)}, {duration: 1000});
layer.setLoop(5);
layer.start(renderer, basePage);

start

Description
Layer 'start' method allows you to start animation associated with the layer, it takes renderer and basepage as an argument.
Parameters
■renderer
  - Object
  - The renderer used to render the basepage.    
■basepage
  - Object
  - The BasePage on which the object is added.    
■onComplete (Optional)
  - Function
  - oncompletion callback function
Return■Void
Emulator SupportY
SDK Constraintnone
Example
var AccRendering = caph.wui.engine.rendering;
var basePage = new AccRendering.BasePage();

var element = document.createElement('div');
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#00AAAA';

var obj = new AccRendering.CssObject(element);
basePage.add(obj);

obj.setZScale(1.5);

var renderer = new AccRendering.CssRenderer();
renderer.render(basePage);

var AccTween = caph.wui.engine.tween;
var layer = new AccTween.Layer();
layer.add(obj, {translateX:200}, {duration: 2000});
layer.add(obj, {rotateX:10*(Math.PI/180)}, {duration: 1000});
layer.start(renderer, basePage);

add

Description
Layer 'add' method is used to add animations on an object.
Parameters
■object /objectlist
  - Object
  - The object to which layer is to be added.    
    * animation args : Option arguments does not affect on subsequent animations
   * opacity : change opacity (0~1)
    - [default : 1]
   * rotateX : rotate Object along X axis 
    - [default : 0]
   * rotateY : rotate Object along Y axis 
    - [default : 0]

■optionArgs +L239
  - Object
  - Animation arguments affect on subsequent animations
   * transformOriginX : transform origin point from Object X position 
    - [default : 0]
   * transformOriginY : transform origin point from Object Y position 
    - [default : 0]
   * transformOriginZ : transform origin point from Object Z position 
    - [default : 0]
   * ease options : Linear
    - [default : None] 
   * Quadratic.In, Quadratic.Out, Quadratic.InOut, Cubic.In, Cubic.Out, Cubic.InOut, Quartic.In,Quartic.Out, Quartic.InOut, Quintic.In, Quintic.Out, Quintic.InOut, Sinusoidal.In, Sinusoidal.Out, Sinusoidal.InOut, Exponential.In, Exponential.Out, Exponential.InOut, Circular.In, Circular.Out, Circular.InOut, Elastic.In,Elastic.Out,Elastic.InOut, Back.In, Back.Out, Back.InOut, Bounce.In, Bounce.Out, Bounce.InOut 
delay : delay in milliseconds before start
    - [default : 0]
   * duration: how long the animation should be done (mili)
    - [default : 1000ms]

■onCompleteCB
  - Function
  - callback on completion
■onErrorCB
  - Function
  - callback on error
Return■Void
Emulator SupportY
SDK Constraintnone
Example
var AccRendering = caph.wui.engine.rendering;
var basePage = new AccRendering.BasePage();

var element = document.createElement('div');
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#00AAAA';

var obj = new AccRendering.CssObject(element);
basePage.add(obj);

obj.setZScale(1.5);

var renderer = new AccRendering.CssRenderer();
renderer.render(basePage);

var AccTween = caph.wui.engine.tween;
var layer = new AccTween.Layer();
layer.add(obj, {translateX:200}, {duration: 2000});
layer.add(obj, {rotateX:10*(Math.PI/180)}, {duration: 1000});
layer.start(renderer, basePage);

pause

Description
Layer 'pause' method used to pause animation of a layer.
Parameters
■Void
Return■Void
Emulator SupportY
SDK Constraintnone
Example
var AccRendering = caph.wui.engine.rendering;
var basePage = new AccRendering.BasePage();

var element = document.createElement('div');
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#00AAAA';

var obj = new AccRendering.CssObject(element);
basePage.add(obj);

obj.setZScale(1.5);

var renderer = new AccRendering.CssRenderer();
renderer.render(basePage);

var AccTween = caph.wui.engine.tween;
var layer = new AccTween.Layer();
layer.add(obj, {translateX:200}, {duration: 2000});
layer.add(obj, {rotateX:10*(Math.PI/180)}, {duration: 1000});
layer.start(renderer, basePage);

setTimeout(function() {
    layer.pause();
}, 500);

resume

Description
Layer 'resume' method used to resume animation of a layer.
Parameters
■Void
Return■Void
Emulator SupportY
SDK Constraintnone
Example
var AccRendering = caph.wui.engine.rendering;
var basePage = new AccRendering.BasePage();

var element = document.createElement('div');
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#00AAAA';

var obj = new AccRendering.CssObject(element);
basePage.add(obj);

obj.setZScale(1.5);

var renderer = new AccRendering.CssRenderer();
renderer.render(basePage);

var AccTween = caph.wui.engine.tween;
var layer = new AccTween.Layer();
layer.add(obj, {translateX:200}, {duration: 2000});
layer.add(obj, {rotateX:10*(Math.PI/180)}, {duration: 1000});
layer.start(renderer, basePage);

setTimeout(function() {
    layer.pause();
}, 500);

setTimeout(function() {
    layer.resume();
}, 1500);

stop

Description
Layer 'stop' method allows you stop the animation using Animator class’s animationComplete method.
Parameters
■Void
Return■Void
Emulator SupportY
SDK Constraintnone
Example
var AccRendering = caph.wui.engine.rendering;
var basePage = new AccRendering.BasePage();

var element = document.createElement('div');
element.style.width = '100px';
element.style.height = '100px';
element.style.background = '#00AAAA';

var obj = new AccRendering.CssObject(element);
basePage.add(obj);

obj.setZScale(1.5);

var renderer = new AccRendering.CssRenderer();
renderer.render(basePage);

var AccTween = caph.wui.engine.tween;
var layer = new AccTween.Layer();
layer.add(obj, {translateX:200}, {duration: 2000});
layer.add(obj, {rotateX:10*(Math.PI/180)}, {duration: 1000});
layer.start(renderer, basePage);

setTimeout(function() {
    layer.stop();
}, 500);