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


 

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

59063. Особливі, одиничні та суттєві ознаки. Корекційне заняття 4-й клас 38 KB
  Запитання озвучуються інші команди дають відповіді. Запрошення до зоопарку Капітан команди Євразія знайомить усіх дітей із кішкою рись. Капітан команди Африка знайомить усіх дітей із кішкою сервал яка проживає на Африканському континенті.
59064. Особливості побудови опису приміщення 31 KB
  Як ви гадаєте для чого використовуються описи приміщення Навіщо письменники їх складають Яким чином інтерєри розповідають про життя і працю людей допомагають зрозуміти внутрішній світ персонажів художніх творів Подумайте і назвіть твори в яких є описи приміщень....
59065. Оспівуючи душу... Бінарний урок позакласного читання із зарубіжної та української літератури за творчістю світових митців 45.5 KB
  Мета: зацікавити учнів у вивченні творів світової літератури; розвивати навички виразного читання, уміння аналізувати прозові та поетичні твори, критичне мислення і творчі здібності, усне та писемне звязне мовлення...
59066. Урок за поемою І. Франка Мойсей. Ось де ваш обітований край... 62.5 KB
  Мета: розкрити образ Бога в поемі як силу яка цілеспрямовує запобігає хаосу в душі людини та суспільстві; показати в образі Мойсея внутрішню боротьбу духовного з матеріалістично-корисливим що уособлене в образі Азазеля; спрямувати дітей до вищих духовних цінностей які концентруються в Богові...
59067. Перший раз у перший клас. Вручення підручників першокласникам 36 KB
  Вручення підручників першокласникам Дійові особи: Учениця-старшокласниця учень-старшокласник Листоноша Лисичка Вовчик Буквар Математика. Учениця Добрий день любі малята Для нас зміна ви завзята. Учениця Я вважаю що якраз Дарувати книги час. Учениця Ти Лисичко неправа.
59068. Побудова симетричних малюнків у графічному редакторі 28.5 KB
  Подолання вершини Снігова лавина 7 балів. Вчитель говорить: Дорогий альпіністе Якщо ти набрав більше 9 балів ти зійшов на вершину. Молодець Якщо набрав 9 балів подолав другу вершину. Якщо у тебе 7 балів ти зійшов на першу вершину.
59069. Повість Ясунарі Кавабата. Тисяча журавлів 63.5 KB
  Особливо виразно це виявилося у творах Ясунарі Кавабата 18991972. Недарма древня столиця Японії Кіото незмінно знаходиться у центрі художньої оповіді Ясунарі Кавабата. Ясунарі Кавабата один із визначних прозаїків XX століття якому в 1968 році була вручена Нобелівська премія за письменницьке мистецтво...
59070. Вистава на чотири дії. Повернуте право 42.5 KB
  З іншого боку шкутильгає хвора книга Українська мова. Українська мова. Привіт ровеснице Українська мова.
59071. Повторення вивченого про спілкування і мовлення. Ситуація спілкування та її складові 30.5 KB
  Мета: поновити в памяті учнів те що відомо їм про відмінності між мовленням та види мовленнєвої діяльності про мовленнєву ситуацію; розвивати в учнів логіку мислення звязне мовлення; виконувати правила етикету.