Animation Constructor

Syntax

PP.Ui.Animation(settings: Object);

Parameters

settings. JSON object that contains values of class properties.

Description

The Animation constructor creates an instance of the Animation class.

Example

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:

Animation