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


 

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

53431. Хімічна промисловість 91.5 KB
  Мета уроку: навчальна: Дати характеристику галузевої структури промисловості пояснити чинники розміщення різних типів підприємств визначити взаємозв’язки хімічної промисловості з іншими ознайомити учнів зі зразками полімерів продуктами хімічної промисловості пояснити хімічні процеси які відбуваються під час промислового синтезу речовин; розвивальна: розвивати пам’ять логічне мислення уміння нестандартного...
53432. Аналогії між літературними та математичними об’єктами 745 KB
  Вчитель математики: Іноді мені доводиться чути від учнів думку що не кожному з вас у подальшому житті знадобляться знання з математики. Перевірка домашнього завдання – 5 хвилин Вчитель літератури: Спочатку перевіримо домашнє завдання: вам потрібно було підібрати прислів’я в яких указувалося б на кількісні відношення. Команди по черзі називають прислів’я з числами; вчитель математики на дошці записує бали кожній команді.
53433. Правописание числительных – орфография на уроках математики 10.34 MB
  Сейчас вы уже знаете что имена числительные являются словесным выражением цифр и чисел. Теоретическая разминка по русскому языку Теоретическая разминка по математике Закончить предложение: Сумма двух отрицательных чисел Сумма двух противоположных чисел равняется Если произведение чисел – положительное число то множители имеют Если произведение чисел – отрицательное число то множители имеют Если произведение равно нулю то Любая теория важна для практики.
53434. Интеграция на уроках музыки 42.5 KB
  Интеграция уроков музыки и развития речи обеспечивает межпредметную связь и раскрывает взаимосвязь человека и искусства. Что же такое интеграция Вот как это понятие трактуется в логическом словаресправочнике Н. Кондакова: Интеграция это объединение в целом какихлибо частей элементов.
53435. Диффузия – основа жизни 38 KB
  Однако разрозненные знания не позволяют создать целостную картину мира поэтому основная задача нашего урока показать взаимосвязь казалось бы таких разных наук как физика и биология при изучении такого распространенного явления как диффузия. Дать определения понятиям осмос и диффузия. Какой процесс имел место а тургор б диффузия в осмос 6.
53436. Обучить формулам обращения в русском и английском языке 56 KB
  Традиции употребления обращений в русском и английском языке Цель: обучить формулам обращения в русском и английском языке; Задачи: Актуализировать знания учащихся по теме Формы обращения в русском и английском языке; Продолжить ознакомление учащихся с формулами обращения в русском и английском языке; Создать условия для активизации употребления формул речевого этикета в речи учащихся; Приобщать учащихся к культуре традициям и реалиям стран родного и иностранного языков в рамках конкретной ситуации общения отвечающей опыту...
53437. Звук «р», букви Р р. Письмо великої літери «Р». Парасолька Оле Лукойє 43 KB
  Парасолька Оле Лукойє. Тип уроку: комбінований Обладнання: парасолька ілюстрація Оле Лукойє розрізані букви складові таблиці по швидко читанню демонстраційна таблиця Р р ілюстрації квітів назви квітів розсипані слова фішки настроюфарби пензлик ескізи парасольки стрічки уваги мішечок. Діти як звуть цього дідуся Оле Лукойє Навіщо дідусю парасолька щоб творити дива Урок в нас діти незвичайний – Гостя радо зустрічаймо Казку слухати почнемо і дідусю доведемо Що настрій...
53438. Путешествие по карте Украины 57 KB
  Оборудование: компьютеры карта Украины фотографии с видами городов Украины. Каждый ученик при подготовке к уроку получил индивидуальное задание и задание для работы в группах проведя самостоятельную исследовательскую работу Работа по виртуальным картам Украины установленным на каждом мониторе компьютера. А знаете ли вы сколько в мире стран Около 200 Выберите правильный вариант названия страны изображённой на мониторе Италия Россия Франция Украина Польша Назовите и покажите на карте соседей Украины.
53439. Інтегрований урок з української мови та трудового навчання в 7-му класі «Кухарі-мовознавці» 53.5 KB
  Твіррозповідь про процес праці з трудового навчання – Особливості приготування страв із круп Мета уроку: навчити писати твіррозповідь про процес праці; навчити готувати страви з крупів; повторити типи та стилі мовлення особливості побудови розповіді та опису; ознайомити дітей з видами крупів їхнім значенням у харчуванні людини народними традиціями пов’язаними із зерновими культурами з різноманітністю способів і рецептів приготування каш; допомогти учням вибрати жанр і стиль майбутнього твору; розвивати усне та писемне...