play();
The play method starts playing timeline animation.
To execute the example, the page must contain the Timeline component named timeline (see Example of creating the Timeline component). Start animation playing, next pause it after one second and process the following events: Started, Paused, Finished and ValueChanged:
// Process the Started event
timeline.Started.add(function (sender, args) {
console.log("Animation is started.");
});
// Process the Paused event
timeline.Paused.add(function (sender, args) {
console.log("Animation is paused.");
});
// Process the Finished event
timeline.Finished.add(function (sender, args) {
console.log("Animation is finished.");
});
// Process the ValueChanged event
timeline.ValueChanged.add(function (sender, args) {
console.log("Current tick mark of animation: " + args.TickIndex);
});
// Start animation
timeline.play();
if (timeline.getIsStarted()) {
// Then pause animation each second
setTimeout("timeline.pause();", 1000);
};
As the result of the example execution, animation is started and then paused after one second:
The browser console displays appropriate notifications and current animation steps:
Current animation step: 2
Animation is started.
Current animation step: 3
Animation is paused.
Resume animation and finish it in one second:
// Continue animation
timeline.resume();
// Stop animation in 1 second
setTimeout("timeline.stop();", 1000);
After animation is finished, the timeline returns to initial state, that is, index of the animation current step is 0:
The browser console displays notifications on animation start and end, as well as current animation steps:
Current animation step: 4
Animation is started.
Current animation step: 5
Current animation step: 0
Animation is finished.
See also: