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


 

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

21741. Формы организации производства в очистных забоях 36 KB
  Цикличность ведение работ по циклам характеризуется повторяемостью выполнения определенных процессов в известной последовательности. Под циклом понимают совокупность всех процессов и операций выполняемых в определенной последовательности и объеме и необходимых для выемки полезных ископаемых по всей длине лавы очистного забоя на установленную паспортом величину подвигания забоя. Полный цикл совокупность всех процессов выполняемых в данном забое в определенном порядке и объеме необходимом для его подвигания на установленную величину...
21742. Проектирование организации очистных работ 23.5 KB
  Режим работы очистных забоев является исходным для составления проекта организации работ на добычном участке который включает графики организации производственных процессов в очистных и подготовительных забоях. Составление графиков организации очистных работдля случая когда режим работ и число циклов в сутки задано:для составления или корректировки необходимо посчитать объемы работ по каждому процессу и время для их выполнения; численность рабочих необходимых для выполнения каждого процесса комплексную норму выработки расценки. Для...
21743. Методика по выполнению раздела проекта: проектирование и организация работ в очистных забоях 65.5 KB
  Зависит от того задан ли режим работы рудника и число циклов в сутки либо режим работы и число циклов определяется как возможные в данных условиях. 1 Уточнить определить исходные данные задан ли режим работы и число циклов в скутки 2 Осуществляется анализ существующей организации производственных предприятий. Число производственных циклов в сутки по формуле: Кцп = 24 – число часов в сутки. коэффициент повторяемости – число повторений процессов подготовки на 1 цикл выемки полезного компонента.
21744. Организация производства подготовительных забоев 22 KB
  Время в течении которого выполняются все процессы проходческого цикла составляют продолжительность цикла. Процессы проходческого цикла могут выполняться последовательно или параллельно. При 2 способе продолжительность проходческого цикла сокращается и скорость в единицу времени повышается.
21745. Графики организации работ в подготовительных забоях 23 KB
  Анализ технологической проходки позволяет по ряду признаков классифицировать их на группы: по способу механизации проходческих работ графики делятся на: графики с применением БВР; графики с применением проходческих комбайнов; по степени совмещения отдельных процессов во времени: с последовательным выполнением основных процессов; с частичным совмещением; степень совмещения процессов во времени характеризуется коэффициентом совмещения равным отношению суммарной продолжительности полного проходческого цикла с учетом совмещенных...
21746. Методика проектирования организации работ в подготовительном забое 33.5 KB
  Методика зависит от необходимой величины суточного подвигания забоя выработки. Различают два случая суточного подвигания забоя выработки величина суточного подвигания забоя выработки задана величина суточного подвигания забоя выработки определяется как возможная в данных условиях. Методика проектирования организации работ в подготовительном забое в случае если величина суточного подвигания забоя выработки задана состоит из следующих пунктов Выбор технологической схемы проведения проходческих работ способа механизации отдельных...
21747. Обслуживание рабочих мест 23.5 KB
  Различают рабочие места: стационарные полустационарные подвижные Особенность горного производства: рабочие места подвижные и протяжённые. Организация рабочего места включает их планировку и оснастку. Правильное планирование заключается в приспособлении рабочего места средств труда и производственной среды к возможностям человека. Под технологической оснасткой понимают обеспечение рабочего места исправным производственным оборудованием и инструментом.
21748. Передовые методы организации работ по добыче полезного ископаемого 66 KB
  Структура рабочих мест на участке: начальник участка – 1 чел.; заместитель начальника участка – 1 чел.; геолог – 1 чел.; маркшейдер – 1 чел.