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


 

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

20935. Методы работы с базой данных Вертикаль-Справочник 4 MB
  Цели и задачи: Изучить основные методы работы с базой данных ВертикальСправочник. После занятия студент должен: Знать: Основные методы работы с базой данных ВертикальСправочник Уметь: Загружать базы данных в рабочее поле системы; осуществлять поиск информации в базе данных; создавать таблицы типоразмеров; сортировать и заменять данные в таблицах. Для выполнения лабораторной работы необходимо: Проработать теоретический материал по теме: Методы работы с базой данных ВертикальСправочник.
20936. Приложение «Расчет режимов резания» 786 KB
  Уметь: Настроить текущий блок расчета режимов резанья настроить расчет параметров обработки параметров режущего инструмента параметров станка. [1] глава 13 [2] лекция №4 Индивидуальное задание: Настроить текущий блок расчета режимов резанья настроить расчет параметров обработки параметров режущего инструмента параметров станка. Как осуществляется настройка расчета параметров обработки 3. Назначение приложения Приложение Расчет режимов резания...
20937. Модификация структур баз данных, формирование SQL- запро-сов и VB-функций, настройка фильтрации данных в системе Вертикаль-Справочник 4.43 MB
  Цели и задачи: Изучить методику модификации структур баз данных порядок формирование SQL запросов и VBфункций настройку фильтрации данных в системе ВертикальСправочник. После занятия студент должен: Знать: Как отредактировать структуру баз данных и состав таблиц сформировать пользовательские SQLзапросы как настроить фильтрацию данных по различным признакам . Уметь: Подключить несколько таблиц к одному уровню сформировать пользовательские VBфункции настроить фильтрацию данных по различным признакам .
20938. Защита данных, организация вычислений по формулам, синхронизация серверных баз данных в системе Вертикаль-Справочник 4.58 MB
  Цели и задачи: Изучить методы защиты данных организацию вычислений по формулам синхронизацию серверных баз данных в системе ВертикальСправочник. После занятия студент должен: Знать: Методы защиты данных организацию вычислений по формулам синхронизацию серверных баз данных в системе ВертикальСправочник. Проработать теоретический материал по теме: Проектирование реляционной структуры пользовательских баз данных ВертикальСправочник.
20939. Проектирование объектной структуры пользовательских баз данных в системе Вертикаль-Справочник 2.93 MB
  После занятия студент должен: Знать: Принципы в структуре баз данных системы порядок регистрации нового класса объектов порядок настройки связи между объектами. Уметь: Выполнить регистрацию нового класса объектов настроить связи между объектами редактировать атрибуты связей объектов.3 [2] лекция №11 Индивидуальное задание: Выполнить регистрацию нового класса объектов настроить связи между объектами редактировать атрибуты связей объектов. Какой порядок регистрации нового класса объектов 3.
20940. Проектирование реляционной структуры пользовательских баз данных Вертикаль-Справочник 4.45 MB
  Цели и задачи: Изучить реляционные и объектные составляющие баз данных каталог баз данных редактор навигационных схем. После занятия студент должен: Знать: Общие сведения о каталоге баз данных как проектируются навигационные системы . Уметь: Заригистрировать новые базы данных настроить атрибуты связей объектов навигационной схемы.
20941. Редактор структуры данных, настройка основного и контекст-ного меню в системе Вертикаль-Справочник 3.79 MB
  Цели и задачи: Изучить редактор структуры данных настройку основного и контекстного меню в системе ВертикальСправочник После занятия студент должен: Знать: Порядок формирования структуры данных таблицы процедуры настройки основного меню методику присоединение списков к базе данных порядок подключения коментариев к таблицам базы данных и порядок подключения коментариев к таблицам баз данных . Уметь: Создать несколько структур данных для таблиц зарегистрировать маркеры пунктов и переменных контекстного меню. Проработать теоретический...
20942. Шифрування та дешифрування даних за допомогою блокових алгоритмів 321.24 KB
  Програма дешифрування інформації (повернення початкового вигляду файла) а також оцінити правильність процедури шифрування – дешифрування (відсутність зміни результату відносно початкового файлу).
20943. Шифрування та дешифрування даних за допомогою потокових алгоритмів 51.15 KB
  Програма шифрування інформації з використанням визначених алгоритмів. У якості інформації використовувати копію файлу з розробленою програмою. програма дешифрування інформації (повернення початкового вигляду файла)...