AnimationPoint Constructor

Syntax

PP.Ui.AnimationPoint(settings: Object);

Parameters

settings. JSON object that contains values of class properties.

Description

The AnimationPoint constructor creates an instance of the AnimationPoint 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:

Then create an animation object that implements smooth resizing of the area. After animation is completed, fill the text area with yellow color and calculate animation duration:

// Get DOM node of text area
var domNode = textArea.getDomNode();
var startTime = 0; // Variable used to store animation time
// Create animation point
var animationPoint = new PP.Ui.AnimationPoint({
    /* Play animation 
	 in 2 seconds after its start */
    Value: 2000,
    // Specify array of animations
    Items: [new PP.Ui.Animation({
            Context: domNode,
            PropertyName: "width",
            AnimationType: PP.Ui.AnimationType.CSS,
            Start: 50, // Minimum width - 50 pixels
            End: 300, // Maximum width - 300 pixels
            Duration: 2000 // Animation time is 2 seconds
        }), new PP.Ui.Animation({
            Context: domNode,
            PropertyName: "height",
            AnimationType: PP.Ui.AnimationType.CSS,
            Start: 1, // Minimum height - 1 pixel
            End: 150, // Maximum height - 150 pixels
            Duration: 2000 // Animation time is 2 seconds
        })]
});
// Determine callback function
var animateCallback = function (sender, args) {
    /* On animation end color text area 
	with yellow color */
    args.Args.Node.style.backgroundColor = "yellow";
};
// Set callback function
animationPoint.setCallback(PP.Delegate(this.animateCallback, animationPoint, {
    Node: domNode
}));
// Handle the Started event
animationPoint.Started.add(function () {
    // Determine animation start time
    startTime = Date.now();
});
// Handle the Ended event
animationPoint.Ended.add(function () {
    // Calculate actual animation time
    console.log("Animation time: " + (Date.now() - startTime));
});
// Start animation
animationPoint.run();
// Stop animation in 3.5 seconds after its start
setTimeout("animationPoint.stop();", 3500);

After executing the example an object is created to smoothly resize the area. Animation started playing in 2 seconds after it was started, and paused in 3.5 seconds. After animation is completed, the area is filled with yellow color:

Due to handleing the Started and Ended events, animation duration is calculated and shown to the browser console:

Animation duration: 1500

See also:

AnimationPoint