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


 

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

31329. Реставрация дома в Иркутской области 1.05 MB
  Подготовка и оклейка поверхности обоями 31 2. По всем показателям вид отделки лицевой поверхности керамическая плитка для пола аналогична фасадной керамической плитке. Назначение и виды штукатурных работ Штукатуркой называется отделочный слой на поверхности различных конструктивных элементов зданий стен перегородок перекрытий колонн и др. выравнивающий эти поверхности или придающий им определенную форму и фактуру.
31330. Модернизация электрооборудования продольношлифовального станка модели 3Б722 1.22 MB
  Присоединительные клеммы располагаются в закрытой коробке имеющей резьбовое отверстие или патрубок для ввода проводов: снятие двигателя и его установка не должны вызывать частичного или полного демонтажа механизмов станка; замена и изменение натяжения ремней должна быть простой. Выбор элементов монтажа С целью защиты проводников от механических повреждений и вредных воздействий машинного масла пыли и охлаждающей жидкости производится в стальных тонкостенных трубах...
31331. Робота з базами даних і можливість автоматизації роботи кулінарного сайту 268.5 KB
  Необхідність вдосконалення методів і прийомів визначення економічної ефективності і розрахунків пояснюється тим, що впровадження обчислювальної техніки - дорогий процес, і тому доцільність витрат на створення і впровадження інформаційної системи повинно бути серйозно обґрунтовано. На створення інформаційної системи потрібні одноразові витрати на її розробку і придбання необхідного комплексу технічних засобів. Економічна ефективність системи визначається з урахуванням одноразових витрат і поточних витрат.
31332. Проектирование локальной вычислительной сети ООО «РАСКО» 4.84 MB
  Локальные сети в сравнении с глобальными сетями внесли много нового в способы организации работы пользователей. Доступ к разделяемым ресурсам стал гораздо удобнее - пользователь мог просто просматривать списки имеющихся ресурсов, а не запоминать их идентификаторы или имена. После соединения с удаленным ресурсом можно было работать с ним с помощью уже знакомых пользователю по работе с локальными ресурсами команд.
31333. Информационные технологии решения комплекса задач подсистемы МТС АСУ предприятия ФГУП «НИИ Точных приборов» 11.23 MB
  Задача 1: Определение потребности МР на производство оборудования на год 50 3. Выбор сетевого оборудования. Обеспечение соответствия оборудования рабочего места требованиям эргономики. и медицинской радиоэлектронной техники; создание и использование по целевому назначению наземных специальных комплексов в интересах решения конверсионных задач дистанционного зондирования Земли; проведение аэросъемочных работ изготовление аналоговых цифровых электронных карт на основе материалов аэрокосмического зондирования...
31335. СПЕЦИФІКА ВИКОНАННЯ РЕНЕСАНСНОЇ ВОКАЛЬНОЇ МУЗИКИ В УМОВАХ ВІТЧИЗНЯНОЇ ХОРОВОЇ ПРАКТИКИ 3.14 MB
  ДАНЬШИНА Наталія Володимирівна СПЕЦИФІКА ВИКОНАННЯ РЕНЕСАНСНОЇ ВОКАЛЬНОЇ МУЗИКИ В УМОВАХ ВІТЧИЗНЯНОЇ ХОРОВОЇ ПРАКТИКИ 17. Інтерес до старовинної музики паростки якого можна побачити у так званих історичних концертах XIX століття активізувався на початку XX ст. Звернення насамперед саме до музики Бароко призвело до вкрай вкрай переконливого художнього репертуару: на засадах реконструкції відповідних епосі музичних інструментів та узлагодження з їх звучанням вокальної манери співаків дивовижно змінився...