PP.Ui.Animation(settings: Object);
settings. JSON-объект со значениями свойств класса.
Конструктор Animation создаёт экземпляр класса Animation.
Для выполнения примера необходимо наличие на html-странице ссылок на файлы сценария jquery.js, PP.js, PP.Metabase.js, PP.Express.js и файл стилей PP.css. Создадим текстовую область и объект анимации, а затем реализуем плавное изменение цвета заливки этой области от белого к красному и подсчитаем длительной данной анимации:
// Создадим текстовую область
var textArea = new PP.Ui.TextArea({
Width: 200, // Ширина
Height: 100 // Высота
});
// Добавим данную область в документ
textArea.addToNode(document.body);
// Определим возвратную функцию, перекрашивающую текстовую область
var animateCallback = function (obj, args) {
// Получим текущий шаг анимации
var value = args.Value;
// Получим новый цвет заливки
var color = PP.Ui.Animation.getStepColor("white", "red", value * 0.005, true);
// Применим данный цвет заливки
textArea.setStyle("background-color: " + color);
// Если анимация завершена
if (args.IsEnd) {
// Получим время начала анимации
var startDate = Date.parse(animation.getStartTime());
// Получим текущее время - время окончания анимации
var endDate = Date.now();
// Рассчитаем длительность анимации в миллисекундах
console.log("Длительность анимации: " + (endDate - startDate));
};
};
// Создадим анимацию
var animation = new PP.Ui.Animation({
Context: textArea, // Объект, свойство которого будет меняться
PropertyName: "Style", // Наименование изменяемого свойства
Duration: 1500, // Длительность анимации в миллисекундах
Start: 10, // Начальный шаг анимации
End: 200 // Последний шаг анимации
});
В результате выполнения примера была создана текстовая область и объект анимации с длительностью в 1500 миллисекунд с начальным шагом 10 и конечным шагом, равным 200:
Далее воспроизведём анимацию, плавно закрашивающую данную текстовую область в красный цвет:
animation.run(PP.Delegate(this.animateCallback,
this));
После выполнения данной строки сценария текстовая область была плавно окрашена в красный цвет:
Также в консоли браузера была выведена самостоятельно рассчитанная длительность анимации в миллисекундах:
Длительность анимации: 1572
Аналогичный результат можно получить при вызове следующей строки сценария:
animation.animate(PP.Delegate(this.animateCallback, this));
См. также: