// Создадим текстовую область
var textArea = new PP.Ui.TextArea({
    Width: 200, // Ширина
    Height: 100 // Высота
});
// Добавим данную область в документ
textArea.addToNode(document.body);

// Определим переменную для хранения длительность анимации
var startTime = 0;
// Получим DOM-вершину текстовой области
var domNode = textArea.getDomNode();
// Создадим 2 точки анимации
var animationPoints = new PP.Ui.AnimationPoints({
    Items: [{
            Value: 0,
            // Укажем массив анимаций
            Items: [{
                    Context: domNode,
                    PropertyName: "width", // изменяемый параметр (ширина)
                    AnimationType: PP.Ui.AnimationType.CSS,
                    Start: 0, // начальное значение изменяемого параметра
                    End: 300, // конечное значение изменяемого параметра
                    Duration: 1000 // длительность анимации
                }, {
                    Context: domNode,
                    PropertyName: "height", // изменяемый параметр (высота)
                    AnimationType: PP.Ui.AnimationType.CSS,
                    Start: 1, // начальное значение изменяемого параметра
                    End: 150, // конечное значение изменяемого параметра
                    Duration: 1000 // длительность анимации
                }
            ]
        }, {
            Value: 1000,
            // Укажем массив анимаций
            Items: [{
                    Context: textArea,
                    PropertyName: 'Rotate', // изменяемый параметр (угол поворота)
                    AnimationType: PP.Ui.AnimationType.PPProp,
                    Start: 0, // начальное значение изменяемого параметра
                    End: 5, // конечное значение изменяемого параметра
                    Duration: 500 // длительность анимации
                }
            ]
        }
    ]
});
// Обработаем событие Started
animationPoints.Started.add(function () {
    // Определим время начала анимации
    startTime = Date.now();
    // Выведем сообщение о начале анимации
    console.log("Анимация началась")
});
// Обработаем событие Step
animationPoints.Step.add(function () {
    // Рассчитаем длительность шага анимации
    console.log("Шаг анимации закончился, длительность шага: " + (Date.now() - startTime));
});
// Обработаем событие Ended
animationPoints.Ended.add(function () {
    // Рассчитаем реальную длительность анимации
    console.log("Анимация закончилась, длительность анимации: " + (Date.now() - startTime));
});
// Определим возвратную функцию
var animateCallback = function (sender, args) {
    /* По завершении анимации закрасим текстовую область 
	жёлтым цветом */
    args.Args.Node.style.backgroundColor = "yellow";
};
// Зададим возвратную функцию
animationPoints.setCallback(PP.Delegate(this.animateCallback, animationPoints, {
    Node: domNode
}));
// Запустим воспроизведение анимации
animationPoints.run();
// Остановим анимацию через 3,5 секунды после её запуска
setTimeout("animationPoints.stop();", 3500);