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.


Contents

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 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});

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 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});

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 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});

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 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});

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 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});

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 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});

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 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});

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 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});

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 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});

var timeline = new AccTween.Timeline();
timeline.add('first', layer);
timeline.start(renderer, basePage);

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