Студопедия

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника



Duration




Общее время, которое должна длиться анимация, в мс. Например, 1000мс.

step(progress)

Функция step(progress) занимается отрисовкой состояния анимации, соответствующего времени progress.

Каждый кадр выполняется, сколько времени прошло: progress = (now-start)/duration. Значениеprogress меняется от 0 в начале анимации до 1 в конце. Так как вычисления с дробными числами не всегда точны, то в конце оно может быть даже немного больше 1. В этом случае мы уменьшаем его до 1 и завершаем анимацию.

Создадим функцию animate, которая получает объект со свойствами delay, duration, step и выполняет анимацию.

function animate(opts) {

 

 

 

var start = new Date; // сохранить время начала

 

 

 

var timer = setInterval(function() {

 

 

 

// вычислить сколько времени прошло

 

var progress = (new Date - start) / opts.duration;

 

if (progress > 1) progress = 1;

 

 

 

// отрисовать анимацию

 

opts.step(progress);

 

 

 

if (progress == 1) clearInterval(timer); // конец :)

 

 

 

}, opts.delay || 10); // по умолчанию кадр каждые 10мс

 

 

 

}

Пример

Анимируем ширину элемента width от 0 до 100%, используя нашу функцию:

function stretch(elem) {

 

animate({

 

duration: 1000, // время на анимацию 1000 мс

 

step: function(progress) {

 

elem.style.width = progress*100 + '%';

 

}

 

});

 

}

Кликните для демонстрации: Открыть в новом окне

Функция step может получать дополнительные параметры анимации из opts (через this) или через замыкание.

Следующий пример использует параметр to из замыкания для анимации бегунка:

function move(elem) {

 

var to = 500;

 

 

 

animate({

 



duration: 1000,

 

step: function(progress) {

 

// progress меняется от 0 до 1, left от 0px до 500px

 

elem.style.left = to*progress + "px";

 

}

 

});

 

 

 

}

Кликните для демонстрации: Открыть в новом окне

Временная функция delta

В сложных анимациях свойства изменяются по определённому закону. Зачастую, он гораздо сложнее, чем простое равномерное возрастание/убывание.

Для того, чтобы можно было задать более хитрые виды анимации, в алгоритм добавляется дополнительная функция delta(progress), которая вычисляет текущее состояние анимации от 0 до 1, а step использует её значение вместо progress.

В animate изменится всего одна строчка. Было:

...

 

opts.step(progress);

 

...

Станет:

...

 

opts.step( opts.delta(progress) );

 

...

Такое небольшое изменение добавляет много гибкости. Функция step занимается всего лишь отрисовкой текущего состояния анимации, а само состояние по времени определяется в delta.



Разные значения delta заставляют скорость анимации, ускорение и другие параметры вести себя абсолютно по-разному.

Рассмотрим примеры анимации движения с использованием различных delta.


Дата добавления: 2015-09-15; просмотров: 5; Нарушение авторских прав







lektsii.com - Лекции.Ком - 2014-2021 год. (0.014 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты