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