CAPH.WUI.ENGINE.TWEEN.TIMELINE
The Timeline organizes and controls animations of the content over time in layers. Layers are like multiple film strips stacked on top of one another, each containing a different animations of different objects.
Methods
remove | ||
Description | ||
Timeline 'remove' method allows you to remove a layer from timeline. | ||
Parameters | ■layerName - String ■errorCB (Optional) - function | |
Return | ■Object - Timeline 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}); var layer2 = new AccTween.Layer(); layer2.add(obj, {tarnslateY:100}, {durtaion: 3000}); var timeline = new AccTween.Timeline(); timeline.add('first', layer); timeline.add('second', layer2); timeline.remove('second'); timeline.start(renderer, basePage); |
onComplete | ||
Description | ||
Timeline 'onComplete' is a callback method, automatically called when timeline is complete . | ||
Parameters | ■cb - Function - Callback function to be called when timeline completes | |
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}); var timeline = new AccTween.Timeline(); timeline.add('first', layer); timeline.onComplete(onCompleteCallbackFn); timeline.start(renderer, basePage); function onCompleteCallbackFn() { console.log("Timeline completion"); } |
setLoop | ||
Description | ||
Timeline 'setLoop' method used to loop timeline for number of times given in 'number'. If number is negative, timeline loops infinite times. | ||
Parameters | ■number - Number - The number of loops to be set. | |
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}); var timeline = new AccTween.Timeline(); timeline.add('first', layer); timeline.setLoop(5); timeline.start(renderer, basePage); |
start | ||
Description | ||
Timeline 'start' method allows you to start animation on timeline with attached renderer and basepase. | ||
Parameters | ■renderer - Object - The renderer attached to the timeline. ■basepage - Object - The basepage attached to the timeline. | |
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}); var timeline = new AccTween.Timeline(); timeline.add('first', layer); timeline.start(renderer, basePage); |
add | ||
Description | ||
Timeline 'add' method used to add layer to the timeline with given layerName, errorCB,errorCB is called when an error occurs. | ||
Parameters | ■layerName - Object - Layer name to be added. ■Layer - Object - The Layer to be attached ■errCB (Optional) - Function - callback function in case any error occurs | |
Return | ■Object - Timeline 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}); var timeline = new AccTween.Timeline(); timeline.add('first', layer); timeline.start(renderer, basePage); |
Timeline | ||
Description | ||
The constructor of Timeline component, in order to create Tineline object. | ||
Parameters | ■Void | |
Return | ■Object - instance of Timeline | |
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}); var timeline = new AccTween.Timeline(); timeline.add('first', layer); timeline.start(renderer, basePage); |
pause | ||
Description | ||
Timeline 'pause' method allows you to pause timeline animation. | ||
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}); var timeline = new AccTween.Timeline(); timeline.add('first', layer); timeline.start(renderer, basePage); setTimeout(function() { timeline.pause(); }, 500); |
resume | ||
Description | ||
Timeline 'resume' method allows you to resume timeline animation. | ||
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}); var timeline = new AccTween.Timeline(); timeline.add('first', layer); timeline.start(renderer, basePage); setTimeout(function() { timeline.pause(); }, 500); setTimeout(function() { timeline.resum(); }, 1500); |
stop | ||
Description | ||
Timeline 'stop' method allows you to stop timeline animation. | ||
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}); var timeline = new AccTween.Timeline(); timeline.add('first', layer); timeline.start(renderer, basePage); setTimeout(function() { timeline.stop(); }, 500); |