КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
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; просмотров: 53; Мы поможем в написании вашей работы!; Нарушение авторских прав |