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. Пример таймера


 

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

64224. Общая характеристика эволюции психики 29.5 KB
  Исходя из этого следует что движение являлось решающим фактором эволюции психики. Леонтьев рассматривая эволюцию психики анализировал наиболее глубокие и качественные изменения которые претерпела психика в процессе эволюции животного мира.
64225. Элементарная сенсорная психика. Низший уровень психического развития. Характеристика сенсомоторной активности простейших 30 KB
  На низшем уровне психического развития находится довольно большая группа животных. Движения простейших отличаются большим разнообразием. Локомоция простейших осуществляется в виде кинезов элементарных инстинктивных движений.
64226. Общая характеристика психической активности простейших 27.5 KB
  Наряду с этим у простейших встречаются и элементы допсихического отражения простая раздражимость характерная для растений. У простейших встречаются разнообразные формы передвижения в водной среде но только на самом примитивном уровне инстинктивного поведения кинезов.
64227. Высший уровень развития элементарной сенсорной психики. Нервная система как фактор усложнения психической деятельности животных 26 KB
  Усложнение структуры организма обусловило возникновение нервной системы которая осуществляет координацию деятельности этих многоклеточных образований.
64228. Органы чувств и сенсорные способности низших многоклеточных беспозвоночных 28 KB
  Предполагается что первичные органы чувств вообще обладали лишь общей присущей всей живой материи чувствительностью но в повышенной степени. Согласно приведённой гипотезе все органы чувств многоклеточных животных развились из наименее дифференцированных осязательных рецепторов.
64229. Общая характеристика моторной активности низших многоклеточных беспозвоночных 25.5 KB
  Большинство же червей ползают и роются в придонном иле проглатывая его вместе с органическими остатками или собирают с поверхности дна мелких животных и мёртвые организмы. У кольчатых червей впервые в эволюции животного мира появляются настоящие парные конечности...
64230. Таксисы у низших беспозвоночных 26 KB
  Кюн выделил следующие категории высших таксисов которые в полной мере развиты лишь у высших животных: тропотаксисы телотаксисы менотаксисы и мнемотаксисы. Низшим беспозвоночным свойственны в разной степени только первые три формы высших таксисов. Особенно значимы эти два вида таксисов для хищников.
64231. Характеристика моторной активности животных с низшим уровнем развития перцептивной психики (на примере насекомых) 24 KB
  Членистоногие являются первыми наземными животными в истории Земли. Переход на сушу был сопряжён с развитием особых органов передвижения – конечностей в виде сложных рычагов, состоящих из отдельных, соединённых суставами, члеников.
64232. Характеристика сенсорной активности животных с низшим уровнем развития перцептивной психики (на примере насекомых) 28 KB
  Дело в том что зрительные рецепторы у насекомых очень лабильны и за единицу времени у них формируется больше последовательных образов чем у позвоночных. Таким образом характеризуя способности насекомых также как и головоногих моллюсков к оптическому...