AnimationSequence(settings: Object);
settings. JSON object that contains values of class properties.
The AnimationSequence constructor creates an instance of the AnimationSequence class.
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: