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


 

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

4645. Аналіз діяльності Факультету соціології і права з позиції концепції життєвих циклів 386 KB
  Актуальність даної роботи полягає у необхідності гармонійного розвитку Факультету соціології і права, що був створений на основі двох різних факультетів, що мали свої власні особливості, методику та методологію навчання. Новостворений факульте...
4646. Світоглядна позиція В.А. Ющенка як керівника-стратега та перспективи України за його переконаннями і внутрішніми принципами 117 KB
  Розуміння природи управлінської праці й процесів управління; здатність мислити масштабно, перспективно; уміння розв’язувати нестандартні управлінські проблеми; уміння працювати з людьми, оволодіння мистецтвом управління людськими ресурсами; уміння використовувати сучасні інформаційні технології, засоби комунікацій та зв’язку;
4647. Організаційно-економічне обґрунтування діяльності дитячо-оздоровчого табору 399 KB
  Організаційно-економічне обґрунтування діяльності дитячо-оздоровчого табору Вступ Враховуючи екологію сьогоднішнього дня, та рівень захворюваності серед школярів, питання оздоровлення дітей та підлітків стоїть для України доволі гостро. Діти...
4648. Основы менеджмента. Власть и личное влияние 5.43 MB
  Власть и личное влияние 1.Руководство в организации Несмотря на то, что руководство - существенный компонент эффективного управления, эффективные лидеры не всегда являются одновременно и эффективными управляющими. Об эффективности лидера мож...
4649. Экономическая оценка инвестиций. Методика оценки эффективности инвестиций 90.68 KB
  В практикуме систематизирована методика оценки эффективности инвестиций, с учетом последовательного развития принципов и методов оценки эффективности. Практикум предназначен для первоначального изучения проблем и методов оценки эффективности инвести...
4650. Численные методы. Лабораторный практикум 3.77 MB
  Численные методы Лабораторный практикум. Учебное пособие по курсу Численные методы включает тематику курса лекций, практических и лабораторных занятий, контрольных работ содержит список вопросов выносимых на самостоятельное изуче...
4651. Модернизация спирального гидроциклона СГМ-ТПИ 171.48 KB
  Модернизация спирального гидроциклона СГМ-ТПИ Введение Производительность буровых работ повышается главным образом за счёт технического перевооружения. С развитием буровой техники актуальность вопросов повышения надёжности и долговечности деталей ма...
4652. Технологический расчет автотранспортного предприятия 809.5 KB
  В методических указаниях представлен алгоритм выполнения технологического расчета автотранспортного предприятия, рекомендуемые формы таблиц при оформлении, даны ссылки на источники для получения более подробной информации, представлены справочные да...
4653. Определение кратчайших расстояний между грузообразующими и грузопоглощающими пунктами 2.11 MB
  Определение кратчайших расстояний между грузообразующими и грузопоглощающими пунктами. Определим кратчайшие расстояния между грузообразующими и грузопоглощающими пунктами согласно схеме транспортной сети методом оценки возможных расстояний до пункта...