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


 

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

49031. Расчёт основных характеристик цифровой системы передачи непрерывных сообщений 539.5 KB
  Кодирование отсчетов сигнала bti: kразрядный равномерный двоичный код с добавлением одного бита проверки на четность. Канал связи с постоянными параметрами и аддитивной помехой имеет полосу пропускания ΔFk значительно большую чем ширина спектра модулированного сигнала ΔFU. Смесь сигнала и шума на выходе канала zt=stnt где st= ut∙Kпк – сигнал на выходе канала nt аддитивный гауссовский шум с равномерным энергетическим спектром белый...
49032. Разработка технологического процесса изготовления детали по чертежу 1.51 MB
  Технология изготовления заготовки Возможные способы изготовления заготовки. Технологический процесс изготовления заготовки. Технология изготовления детали Технологический процесс стр...
49034. Разработка технологии изготовления заготовки и детали с выбором оборудования и инструмента 271.5 KB
  Задание по курсовой работе Целью и заданием данной курсовой работы является разработка технологии изготовления заготовки и детали. Технологический процесс изготовления заготовки Данную заготовку получаем в литейной форме продольный разрез которой показан на рисунке.
49035. Технологический процесс изготовления заготовки опоры 735.17 KB
  При литье в кокиль отливки получают путем заливки расплавленного металла в металлические формы – кокили. Полости в отливках оформляют песчаными, оболочковыми или металлическими стержнями. Кокили с песчаными или оболочковыми стержнями используют для получения отливок сложной конфигурации.
49036. СИСТЕМА АВТОМАТИЧЕСКОГО РЕГУЛИРОВАНИЯ ЧАСТОТЫ ВРАЩЕНИЯ ДВИГАТЕЛЯ ПОСТОЯННОГО ТОКА 2 MB
  Анализ действующих на систему возмущающих воздействия и их влияние на статические характеристики САР Принцип работы системы Классификация САР Позвенное аналитическое описание процессов в САУ. Получим дифференциальные уравнения и передаточные функции звеньев САУ Разработка структурной схемы САР Уравнения динамики замкнутой САР Анализ на структурную устойчивость САР Расчёт требуемого коэффициента усиления в разомкнутом состоянии...
49037. Экономическая теория. Особенности экономических процессов 957.34 KB
  Экономика – одна из древнейших наук, которая всегда привлекала внимание ученых и образованных людей. Объясняется это тем, что изучение экономической теории – это реализация объективной необходимости познания мотивов, действий людей в хозяйственной деятельности, законов хозяйствования во все времена.
49038. ПРАВА ГРОМАДЯН У СФЕРІ ВИКОНАВЧОЇ ВЛАДИ: АДМІНІСТРАТИВНО-ПРАВОВЕ ЗАБЕЗПЕЧЕННЯ РЕАЛІЗАЦІЇ ТА ЗАХИСТУ 798.5 KB
  Досліджуються актуальні проблеми адміністративно-правового забезпечення реалізації та захисту прав громадян у сфері виконавчої влади. Ґрунтовно розглядаються політико-правові аспекти взаємодії людини, держави і управління, розвиток демократичних засад державного управління у світлі сучасного європейського досвіду...
49039. Выполнение действия в виде функций с динамическим распределением памяти программным способом 365.5 KB
  Вывести результат сглаживания заданной вещественной матрицы размером 10 на 10. Соседями элемента Аij в матрице назовем элементы. Операция сглаживания матрицы дает новую матрицу того же размера, каждый элемент которой получается как среднее арифметическое имеющихся соседей соответствующего элемента исходной матрицы.