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


 

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

2878. Загальна фізика 5.73 MB
  Друга частина конспекту лекцій з курсу загальної фізики для інженерно-технічних спеціальностей містить виклад розділів: Магнетизм (доц. М. Ковалець), Коливання і хвилі (доц. В. Вадець), Оптика (доц. В. Орленко), Елементи атомної фізики, квант...
2879. Волоконно-оптические сети и системы связи 4.53 MB
  Книга принадлежит перу одного из известных специалистов в области волоконно-оптической связи Олегу Константиновичу Склярову. Это его второй крупный труд об ВОЛС — важнейшей технологии современных систем передачи информации. К сожалению, последн...
2880. Атомное ядро. Радиоактивность. Элементарные частицы 1.59 MB
  Атомное ядро Основная масса материи в атоме не распределена равномерно по объёму атома, а сконцентрирована в плотном ядре, размер которого (~10-15 м) составляет одну стотысячную часть размера самого атома. Плотность ядерного вещества очень велика . ...
2881. ФИЗИОЛОГИЧЕСКИЕ МЕХАНИЗМЫ ГЕМОПОЭЗА 307 KB
  Фізика є основною наукою про природу. Вона вивчає найбільш загальні властивості і форми руху матерії. Одним із видів руху є механічний рух, під яким розуміють зміну положення тіла в просторі з часом. Механіка Галілея-Ньютона вивчає рух макроскопічни...
2882. Авиационные приборы и измерительно-вычислительные комплексы 935.25 KB
  Целью настоящей работы является изучение принципов построения и работы авиационных приборов: топливомеров, тахометров, датчиков давления, указателей скорости и высоты. Приведена  краткая теория работы и методические рекомендации по исследованию...
2883. Машини для земляних робіт 769.5 KB
  Розрахунки за кінематичними схемами одноківшевих (одномоторних) екскаваторів. Мета роботи: Виконати кінематичні та силові розрахунки в передачах екскаваторів. Методика розрахунку. Креслимо схему запасовки канатів заданого...
2884. Генетика бактерий 55 KB
  Генетика бактерий Наука о наследственности и изменчивости микроорганизмов. Наследственность это способность организмов воспроизводить одни и те же свойства из поколения в поколение благодаря передачи генов от родителей потомкам. Изменчивость - измен...
2885. Гибридологический метод Г. Менделя как основа генетического анализа 42 KB
  Гибридологический метод Г. Менделя как основа генетического анализа Почему же закономерности наследования, выявленные Менделем, не были приняты к рассмотрению научным сообществом того времени, хотя его работа с 1865 по 1900 год цитировалась не менее...
2886. Генетика. Законы наследственности 1.02 MB
  Генетика. Законы наследственности Задание 1. Основные термины и понятия Заполните таблицу: Понятия Характеристика Генетика Наследственность Генотип Фенотип Аллельные гены Доминантные признаки Рецессивные признаки Гомозиготные особи Гетерозиготные ...