39058

Браузерная анимация

Доклад

Информатика, кибернетика и программирование

Это тот же принцип что и в кино: для непрерывной анимации достаточно 24 или больше вызовов таймера в секунду. Псевдокод для анимации выглядит так: У анимации есть три основных параметра: dely время между кадрами в миллисекундах т. stepprogress функция stepprogress занимается отрисовкой состояния анимации соответствующего времени progress. Значение progress меняется от 0 в начале анимации до 1 в конце.

Русский

2013-09-30

79 KB

0 чел.

Браузерная анимация.

С точки зрения HTML/CSS, анимация — это постепенное изменение стиля DOM-элемента.

Код, который производит изменение, вызывается таймером. Интервал таймера очень мал и поэтому анимация выглядит плавной. Это тот же принцип, что и в кино: для непрерывной анимации достаточно 24 или больше вызовов таймера в секунду.

Псевдо-код для анимации выглядит так:

У анимации есть три основных параметра:

delay - время между кадрами (в миллисекундах, т.е. 1/1000 секунды). Например, 10мс.

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

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

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

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

Пример

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

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

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

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

Было:

Станет:

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

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

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

Самая простая функция delta — это та, которая просто возвращает progress.

То есть, как будто никакой delta нет. Состояние анимации (которое при передвижении отображается как координата left) зависит от времени линейно.

Рис 1.3.1. Линейная функция

Рис. 1. По горизонтали - progress, а по вертикали - delta(progress).

Пример.

Здесь и далее функция move будет такой:

То есть, она будет перемещать бегунок, изменяя left по закону delta, за duration мс (по умолчанию 1000мс).

Рис 1.3.1. Пример таймера


 

А также другие работы, которые могут Вас заинтересовать

6914. План воспитательной работы в 10 классе на 2008 - 2010 учебный год 136.5 KB
  План воспитательной работы в 10 классе на 2008 - 2010 учебный год Планирование воспитательной работы на 2009 - 2010 учебный год составлено на основании методических рекомендаций по работе над социальным проектом, выбранным в прошлом году. ...
6915. Элегазовый выключатель ВГБ-35 229.5 KB
  Элегазовый выключатель Введение Выключатели высокого напряжения (ВК) предназначены для оперативных и аварийной коммутаций в энергосистемах, для выполнения операций включения и отключения отдельных цепей при ручном или автоматическом управлении. Во в...
6916. Проектирование выключателей нагрузки 107 KB
  Введение Выключатель нагрузки - это простейший высоковольтный выключатель. Он используется для отключения и включения цепей, находящихся под нагрузкой. Дугогасительные устройства выключателей рассчитаны на гашение маломощной дуги, возникающей при от...
6917. Конфлікти в нашому житті. Психологічний практикум 88 KB
  Мета:ознайомити студентів з поняттями конфлікт та його позитивними і негативними сторонами, агресія, стратегіями поведінки учнів в конфліктній ситуації (миролюбство, уникнення, агресія), причинами виникнення конфліктів, агресивності, конст...
6918. Электромагнитная совместимость радиоэлектронного оборудования 41.5 KB
  Электромагнитная совместимость радиоэлектронного оборудования Направление радиоэлектроники, призванное обеспечить одновременную и совместную работу различного радиотехнического, электронного и электротехнического оборудования - называется электромаг...
6919. Воздействие помех на РЭС 39 KB
  Воздействие помех на РЭС Зависит от: структуры спектрального состава энергии Необратимые и обратимые процессы Мощная помеха Отказы аппаратуры из-за изменения структуры полупроводниковых материалов вплоть до их разрушения. Может сущ...
6920. Характеристики РЭС вне основных полос частот излучения и приема радиосигналов 49.5 KB
  Характеристики РЭС вне основных полос частот излучения и приема радиосигналов Любое РЭС характеризуется совокупностью параметров: функциональные - отражают основные функции выполняемые РЭС влияющие на ЭМС Функциональные параметры...
6921. Внеполосное радиоизлучение 136 KB
  Внеполосное радиоизлучение Внеполосное радиоизлучение - нежелательное излучение в полосе частот примыкающей к необходимой полосе частот, является результатом модуляции сигнала. Причины появления: применение для передачи сигналов с большой...
6922. Антенные устройства и среда распространения 67 KB
  Антенные устройства и среда распространения Энергетические характеристики Степень воздействия ИП на РП зависит: от коэффициентов ослабления помех в фидерах...