PP.Ui.Animation(settings: Object);
settings. JSON object that contains values of class properties.
The Animation constructor creates an instance of the Animation class.
To execute the example, the HTML page must contain links to the jquery.js, PP.js, PP.Metabase.js, PP.Express.js script files and the PP.css styles file. Create a text area and an animation object, implement smooth change of area fill color from white to red, and estimate animation duration:
// 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); // Determine a return function which refills the text area var animateCallback = function (obj, args) { // Get current animation step var value = args.Value; // Get new fill color var color = PP.Ui.Animation.getStepColor("white", "red", value * 0.005, true); // Apply the fill color textArea.setStyle("background-color: " + color); // If animation is finished if (args.IsEnd) { // Get time of animation start time var startDate = Date.parse(animation.getStartTime()); // Get current time - animation end time var endDate = Date.now(); // Calculate animation duration in milliseconds console.log("Animation duration: " + (endDate - startDate)); }; }; // Create animation var animation = new PP.Ui.Animation({ Context: textArea, // Object which property will be changed PropertyName: "Style", // Name of changed property Duration: 1500, // Animation duration in milliseconds Start: 10, // Animation start step End: 200 // Animation end step });
Executing the example creates a text area and animation object with the following parameters: duration 1,500 ms, start step 10 and end step 200:
Then play animation that smoothly fills the text area with red color:
animation.run(PP.Delegate(this.animateCallback, this));
After executing the script line, the text area is smoothly filled with red color:
The browser console also displays estimated animation duration in milliseconds:
Animation duration: 1572
It is possible to get the same result by calling the following script line:
animation.animate(PP.Delegate(this.animateCallback, this));
See also: