AnimationPoints(settings: Object);
settings. JSON object that contains values of class properties.
The AnimationPoints constructor creates an instance of the AnimationPoints 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 set, 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 a variable to stock animation duration
var startTime = 0;
// Get DOM node of the text area
var domNode = textArea.getDomNode();
// Create two points of animation
var animationPoints = new PP.Ui.AnimationPoints({
Items: [{
Value: 0,
// Determine animation arrea
Items: [{
Context: domNode,
PropertyName: "width", // changed parameter (width)
AnimationType: PP.Ui.AnimationType.CSS,
Start: 0, // initial value of changed parameter
End: 300, // Final value of changed parameter
Duration: 1000 // animation duration
}, {
Context: domNode,
PropertyName: "height", // changed parameter (width)
AnimationType: PP.Ui.AnimationType.CSS,
Start: 1, // initial value of changed parameter
End: 150, // final value of changed parameter
Duration: 1000 // animation duration
}
]
}, {
Value: 1000,
// Determine animation array
Items: [{
Context: textArea,
PropertyName: 'Rotate', // changed parameter (rotation angle)
AnimationType: PP.Ui.AnimationType.PPProp,
Start: 0, // initial value of changed parameter
End: 5, // final value of changed parameter
Duration: 500 // animation duration
}
]
}
]
});
// Handle the Started event
animationPoints.Started.add(function () {
// Determine time of animation start
startTime = Date.now();
// Display a message about animation start
console.log("Animation is started")
});
// Handle the Step event
animationPoints.Step.add(function () {
// Calculate duration of animation step
console.log("Animation step has finished, step duration: " + (Date.now() - startTime));
});
// Handle the Ended event
animationPoints.Ended.add(function () {
// Calculate the real animation suration
console.log("Animation has finished, animation duration: " + (Date.now() - startTime));
});
// Determine return function
var animateCallback = function (sender, args) {
/* After animation completion fill the text area
with yellow color */
args.Args.Node.style.backgroundColor = "yellow";
};
// Set return function
animationPoints.setCallback(PP.Delegate(this.animateCallback, animationPoints, {
Node: domNode
}));
// Set animation playing
animationPoints.run();
// Stop animation in 3.5 seconds after its start
setTimeout("animationPoints.stop();", 3500);
An object of animations group 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 of 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: 1006
Animation step is completed, step duration: 1505
Animation is completed, animation duration: 1506
See also: