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.
Constructor
Layer | ||
Description | ||
The constructor of Layer component, in order to create Layer object. | ||
Emulator Support | Y | |
SDK Constraint | None | |
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 Support | Y | |
SDK Constraint | none | |
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 Support | Y | |
SDK Constraint | none | |
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 Support | Y | |
SDK Constraint | none | |
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 Support | Y | |
SDK Constraint | none | |
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 Support | Y | |
SDK Constraint | none | |
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 Support | Y | |
SDK Constraint | none | |
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 Support | Y | |
SDK Constraint | none | |
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); |