MapContentMilestone.startAnimation

Syntax

startAnimation();

Description

The startAnimation method starts animation of map layer milestone.

Example

To execute the example the HTML page must contain an object of the MapContentMilestone class named milestone (see the page with description of the MapContentMilestone.getMilestonePosition method). Play milestone animation by moving it from the middle of top border of the RU-KYA map layer area to the middle of bottom border and back. Process milestone events: AnimationStarted, AnimationCycleCompleted, and AnimationCompleted:

// Variable to store time in milliseconds
var currentTime = 0;
// Process the AnimationStarted event for the milestone
milestone.AnimationStarted.add(function () {
    console.log("Animation is started");
    currentTime = Date.now();
});
// Process the AnimationCompleted event for the milestone
milestone.AnimationCompleted.add(function () {
    console.log("Reverse animation cycle is played for " +
        (Date.now() - currentTime) + " ms");
});
// Process the AnimationCycleCompleted event for the milestone
milestone.AnimationCycleCompleted.add(function () {
    console.log("Direct animation cycle is played for " +
        (Date.now() - currentTime) + " ms");
});
// Create a map animation object
var animation = new PP.MapMilestoneAnimation({
    Target: milestone, // Play milestone animation
    AnimationPointsList: "0.5,0 0.5,1", // End points of milestone movement
    AutoReverse: true, // Enable reverse animation cycle
    StepTime: 3000 // Animation cycle duration
});
// Process the AnimationStarted event for the milestone
animation.AnimationStarted.add(function () {
    milestone.AnimationStarted.fire(this);
});
// Process the AnimationCompleted event for the milestone
animation.AnimationCompleted.add(function () {
    milestone.AnimationCompleted.fire(this);
});
// Process the AnimationCycleCompleted event for the milestone
animation.AnimationCycleCompleted.add(function () {
    milestone.AnimationCycleCompleted.fire(this);
});
// Set animation object for the milestone
milestone._Animation = animation;
// Start animation
milestone.startAnimation();

As the result of executing the example the milestone smoothly moves from the middle of top border to the middle of bottom border in the RU-KYA map layer area.

The AnimationStarted event fires when animation is started. When the milestone reaches the second point, the AnimationCycleCompleted event fires, and the AnimationCompleted event occurs when the milestone returns to the initial position. The results of event processing are shown to the browser console:

Animation is started

Direct animation cycle is played for 5008 ms

Reverse animation cycle is played for 9041 ms