AnimationSequence Constructor

Syntax

AnimationSequence(settings: Object);

Parameters

settings. JSON object that contains values of class properties.

Description

The AnimationSequence constructor creates an instance of the AnimationSequence class.

Example

To execute the example, the HTML page must contain links to the PP.js script file and the PP.css stylrs file and the example itself should launched from the browser console. Create a text area and add it to the page:

// Create a text area
var textArea = new PP.Ui.TextArea({
    Width: 200, // Width
    Height: 100 // Height
});
// Add the area in the document
textArea.addToNode(document.body);

After executing the example a text area is added in the page:

Next create an object of animations sequence, that implements area resizing and rotation. After the animation is completed, fill the text area with yellow color, calculate duration of the whole animation and each animation step:

// Determine variable to stock animation duration
var startTime = 0;
// Get DOM node of text area
var domNode = textArea.getDomNode();
// Create 3 animation elements
var item1 = new PP.Ui.Animation({
    Context: domNode,
    PropertyName: "width", // changing parameter (width)
    AnimationType: PP.Ui.AnimationType.CSS,
    Start: 0, // start value of changing parameter
    End: 300, // end value of changing parameter
    Duration: 1000 // animation duration
})
var item2 = new PP.Ui.Animation({
    Context: domNode,
    PropertyName: "height", // changing parameter (height)
    AnimationType: PP.Ui.AnimationType.CSS,
    Start: 1, // start value of changing parameter
    End: 150, // end value of changing parameter
    Duration: 1000 // animation duration
})
var item3 = new PP.Ui.Animation({
    Context: textArea,
    PropertyName: 'Rotate', // changing parameter (rotation angle)
    AnimationType: PP.Ui.AnimationType.PPProp,
    Start: 0, // start value of changing parameter
    End: 3, // end value of changing parameter
    Duration: 500 // animation duration
})
// Create animation sequence
var as = new PP.Ui.AnimationSequence({
    Items: [
        [item1, item2],
        [item3]
    ]
})
// Handle the Started event
as.Started.add(function () {
    // Determine animation start time
    startTime = Date.now();
    // Display message about animation start
    console.log("Animation is started")
});
// Handle the Step event
as.Step.add(function () {
    // Calculate animation step duration
    console.log("Animation step is finished, step duration: " + (Date.now() - startTime));
});
// Handle the Ended event
as.Ended.add(function () {
    // Calculate real animation duration
    console.log("Animation is finished, animation duration: " + (Date.now() - startTime));
});
// Determine callback function
var animateCallback = function (sender, args) {
    /* After animation is finished, color text area 
	with yellow color */
    args.Args.Node.style.backgroundColor = "yellow";
};
// Set callback function
as.setCallback(PP.Delegate(this.animateCallback, as, {
    Node: domNode
}));
// Run animation
as.run();
// Stop animation in 3.5 seconds after start
setTimeout("as.stop();", 3500);

An object of animations sequence is created as the result of the example execution. This object implements smooth resizing and rotation of the text area. Animation was stopped in 3.5 seconds after it started. After animation is finished, the area is filled with yellow color:

Due to handleing the Started, Ended and Step events, duration of the whole animation handle and duration of each animation step are calculated and shown to the browser console:

Animation is started

Animation step is completed, step duration: 3

Animation step is completed, step duration: 1008

Animation is completed, animation duration: 1508

See also:

AnimationSequence