Создание CSS-анимации при помощи Move.js


Оглавление (нажмите, чтобы открыть):

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53346e7f79aa906f • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Move.js

Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.

Examples

Move#set(prop, val)

Move#add(prop, val)

Increment prop by val, where val is an Number (click several times).

Move#sub(prop, val)

Decrement prop by val, where val is an Number (click several times).

Move#rotate(deg)

Move#duration(n)

Set animation duration to n which is a Number or a string such as «4s».

Move#translate(x[, y])

Translate x and optionally y axis. Aliased as Move#to(x[, y]) .

Move#x(n) / Move#y(n)

Translate x or y axis. Aliased by Move#translateX(n) and Move#translateY(n) .

Move#skew(x[, y])

Skew x, and optionally y. Move#skewX(n) and Move#skewY(n) are also available.

Move#scale(x[, y])

Scale the x, and optionally y axis. Move#scaleX(n) and Move#scaleY(n) are also available.

Move#ease(fn)

Use the given easing fn .

Move#end([fn])

The end() method triggers the animation to play, optionally invoking the callback fn when complete.

Move#delay(n)

Set animation delay to n which is a Number or a string such as «4s».

Move#then([fn])

Defer an action such as invoking a fn, end() ing the given Move instance, or returning a clone for chaining. The Move#pop() method is used to return the current Move instance’s parent in the chain.

move.select(selector)

This function is used throughout move to select elements. For example if we wanted to utilize jQuery, we could re-define this function as shown below.

move.defaults

Defaults used throughout Move, simply re-define to apply a new default.

move.ease

Easing function map, used by Move#ease() to allow for move(‘foo’).ease(‘in’) etc.

Обработка событий CSS3 анимации в JavaScript

CSS3 анимация более гладкая, по сравнению с анимацией на JavaScript, ее быстрее реализовать. Но, в отличие от анимации на JavaScript, в CSS3 анимации нет полного контроля над каждым кадром. К счастью, вы можете добавить обработчики событий для любого элемента, чтобы определить состояние анимации. Это дает более детальный контроль, например, позволяет проигрывать различные анимации в последовательности.

Рассмотрим простую анимацию CSS3:

Когда класс «enable» применяется к элементу с ID «anim», анимация с названием flash запускается три раза. Каждая итерация длится одну секунду, в течение которой элемент исчезает.

Во время анимации срабатывает три типа событий:

animationstart

Событие animationstart срабатывает, когда анимация начинается в первый раз.

animationiteration

Событие animationiteration срабатывает, когда начинается каждая новая итерация анимации, кроме первой.

animationend

Событие animationend срабатывает, когда анимация завершается.

Поддержка браузерами

На момент написания статьи Firefox, Chrome, Safari, Opera и IE10 поддерживают CSS3 анимацию и связанные с ней события. Правда, Opera, IE10 и WebKit браузеры используют вендорные префиксы.

W3C standard Firefox webkit Opera IE10
animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart
animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration
animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

Самый простой способ манипуляции с префиксами — это вызов addEventListener для всех префиксов и без префикса с помощью пользовательской функции:

Таким образом, кросс-браузерные обработчики событий могут быть навешены с помощью одной строки:

Объект Event

В приведенном выше примере, функция AnimationListener вызывается в ответ на события анимации. Объект Event передается в качестве первого аргумента. Кроме стандартных свойств и методов, этот объект содержит:

  • animationName: название CSS3 анимации (т.е. flash)
  • elapsedTime: время в секундах от начала анимации.

С помощью объекта Event мы можем определить, когда закончится анимация flash:

И, например, удалить существующий класс или применить другую анимацию.

На странице c демонстрацией отображается кнопка. Когда пользователь нажимает на нее, кнопке добавляется класс enable, который начинает анимацию flash. Текущий статус анимации выводится в консоли по событиям. Когда анимация заканчивается, класс enable удаляется, поэтому кнопка может быть нажата снова.

Дайте мне знать, если встречали интересные примеры обработки событий CSS анимации.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

14 JavaScript библиотек для создания анимации

Под термином «анимация» мы чаще всего понимаем мультипликационные фильмы — с детства любимые нами «мультики». Но если заглянуть в толковый словарь, то мы узнаем, что в переводе с французского оно означает «оживление», «одушевление». И вот тут-то оказывается, что это значение удивительно точно подходит не только к киноиндустрии, но и к веб-технологиям.

Использование различных анимационных эффектов (переходов, движений, трансформаций и т.п.) значительно «оживляют» веб-сайт, позволяют управлять вниманием пользователя, переключая его на требуемый элемент и давая определенные визуальные подсказки.

Говоря об анимации нельзя не упомянуть известные 12 принципов, сформулированные аниматорами студии Дисней, использование которых исключительно важно для разумного и качественного использования анимационных эффектов.

Говоря о технологиях, обеспечивающих использование анимации в веб-страницах, можно выделить несколько но, пожалуй, ни одна из них не является настолько мощной как JavaScript. Еще несколько лет назад технология Flash-анимации была грозным конкурентом и очень популярной. Но сейчас, похоже, ее лучшие годы позади и она постепенно вытесняется со страниц сайтов более мощными и гибкими Java-скриптами. И если вы решили всерьез использовать анимацию на своем сайте, то ставку следует делать именно на JavaScript. А чтобы сделать разумный выбор библиотеки я и сделал сегодняшний обзор.

Dynamics.js

Начну я, пожалуй, с Dynamics.js. Это серьезная и мощная библиотека, позволяющая создавать физически достоверную анимацию (как, например, гармонические затухающие колебания точки на главной странице сайта). Библиотека способна управлять CSS и SVG свойствами любого DOM-элемента. Dynamics.js используется для создания меню, кнопок, индикаторов процесса, маркеров. При этом доступны самые разнообразные параметры, такие как частота, декремент затухания, параметры, характеризующие упругость или продолжительность процесса и т.п.

Cta.js

Небольшая по объему библиотека cta.js предназначена для создания на странице анимационных эффектов типа «действие-эффект», т.е. наведение или нажатие указателем мыши на объект приводит к определенному эффекту. Очень удобно использовать при разработке плиточных интерфейсов, когда нажатие на элемент приводит к его раскрытию в виде модального окна, на всю страницу, или в виде боковой слайд-панели.

Beep.js

Интересная библиотека, использующая WebAudio API для создания на странице музыкального синтезатора. Может найти применение при разработке онлайн-учебника по музыке или в качестве забавной игрушки.

Rainyday.js

Невероятно красивый эффект дождя с каплями разного размера, стекающими вниз. Правда, на мой взгляд, крупным каплям не хватает реалистичности (может той самой физики, которая присутствует в Dynamics.js?). Впрочем, имеющийся API позволяет создать собственные объекты и управлять их поведением, создавая еще более невероятные эффекты.

Iconate.js

lconate.js позволяет производить преобразование одного объекта в другой, используя различные эффекты и движения. Работает с иконочными шрифтами, глифами и пользовательским набором иконок.

Dom-Animator.js

Dom-Animator.js — это так называемое «пасхальное яйцо» (easter egg). Производимый ею эффект не виден «невооруженным» глазом, т.е. тем кто просматривает страницу в обычном окне браузера. Но те, кто будет разбирать ваш код, увидят ее в консоли (если вы все еще не поняли о чем речь, то здесь есть видеоролик, из которого все станет понятно).

Famous

Famous — событийно-ориентированная JS-библиотека для создания современной анимации. Имеет мощное геометрическое ядро, позволяющее манипулировать различными 3D объектами — точечными и объемными — прикладывать к ним силы и ускорения, накладывать ограничения и контролировать соударения.

Bounce.js

Неплохая JavaScript библиотека для создания впечатляющей анимации с использованием CSS. Позволяет применять к объектам различные виды движения, вращения, масштабирования и преобразования.

Snabbt.js

Легкая и быстрая библиотека, выдающая, по заверениям разработчиков, 60 fps даже на мобильных устройствах. При помощи матриц трансформирования CSS позволяет перемещать, вращать, масштабировать и производить другие манипуляции с объектами. Позволяет также применять к объектам специальные эффекты, привлекающие внимание, которые можно использовать при заполнении форм.

Rekapi

Rekapi позволяет использовать как CSS анимацию ключевых кадров (правило @keyframes), так и DOM анимацию при помощи JavaScript. Эта библиотека позволяет создавать довольно сложные динамические объекты, например круговые и линейные диаграммы, временные шкалы и другие элементы пользовательского интерфейса.

Shifty

Shifty — библиотека, содержащая все необходимое для полноценной анимации по ключевым кадрам (так называемый «твиннинг»), причем количество объектов может быть просто огромным. Это низкоуровневая библиотека, которую можно использовать как ядро для более высокоуровневых платформ или библиотек. Собственно, в качестве ядра вышеупомянутой Rekapi, используется как раз Shifty.

Tween.js

Tween.js использует технологию ключевых кадров (твиннинг) для манипуляции HTML, JavaScript и CSS свойствами. Можно манипулировать цифровыми и строковыми свойствами, задавать такие параметры как упругость, амплитуду, частоту и соединять отдельные преобразования в конвейеры.

Velocity.js

Очень мощная и хорошо оптимизированная библиотека со множеством функций. Среди них цветовая анимация, циклические преобразования, скручивание, прокрутки сцен и анимация SVG элементов. Velocity.js полностью совместима с jQuery — достаточно добавить ее на страницу и заменить все вызовы $.animate() на $.velocity(). По заверениям разработчиком вы будете поражены приростом производительности.

Move.js

Минималистическая библиотека, которая делает CSS-анимацию исключительно простой и элегантной. Среди множества возможных эффектов присутствуют перемещение, вращение, перемещение с деформацией, масштабирование, изменение цветовых свойств и множество других.

75 инструментов веб-анимации, которые вам нужно испробовать

Анимация — это один из трендов в дизайне веб-интерфейсов. Ее популярность непостоянна, но анимация всегда где-то присутствует как неотъемлемая часть каждого сайта. Это и крошечные, едва заметные индикаторы загрузки, и целые страницы, на которых вам словно показывают фильм, — анимация проникает во все области дизайна.

У тех, кто хочет использовать анимацию, богатый выбор вариантов: от чисто декоративных элементов, просто украшающих интерфейс, до эффектов, активно улучшающих пользовательский опыт. Перечисленные ниже инструменты позволят вам создавать анимацию разных масштабов и для самых разных целей. Это 75 плагинов и библиотек, с которыми стоит ознакомиться. Конечно, вы не будете пользоваться ими всеми и постоянно, но у каждого из этих инструментов есть своя определенная задача, и некоторые точно придутся вам по душе.

Мастер Йода рекомендует:  Разработчики создали интерфейс для нейросети, в котором можно рисовать словами

1. Animate.css

Это фундаментальная библиотека анимаций, совместимых со всеми браузерами и подходящих для множества задач. Она содержит все — от классических подскакиваний и затуханий до последних новинок и уникальных эффектов — и способна удовлетворить потребности практически любого проекта.

2. Magic Animations

Magic Animations концентрируется на необычных эффектах, придающих интерфейсу определенную изюминку. Эта библиотека не может похвастаться большим разнообразием, но ее достаточно, чтобы обогатить пользовательский опыт.

3. Bounce.js

Это небольшая площадка для экспериментов с CSS-анимацией. Просто добавьте элемент и выставьте настройки, чтобы все ожило, а потом экспортируйте CSS-файл.

4. AnijS

Это интуитивно понятный инструмент для работы с анимацией, позволяющий использовать собственные категории или Animate.css, чтобы создать что-нибудь интересное.

5. Snabbt.js

Знаменит своими минималистическим подходом, позволяющим создавать быстрые анимации. Он весит всего 5 килобайт, но способен заметно улучшить любой элемент, вращая его, наклоняя или масштабируя.

6. Kute.js

Это надежный движок для анимации, быстрый и совместимый с разными браузерами благодаря набору эффективных альтернатив для устаревших браузеров. Kute.js содержит множество плагинов для организации продуктивной рабочей среды.

7. Velocity.js

Velocity.js — непрезентабельный на первый взгляд движок. Однако в его арсенал входят все обычные типы анимации, он быстр и независим от jQuery.

8. Lazy Line Painter

С этим инструментом легко создавать масштабируемую векторную графику. Экспортируйте свои рисунки из Illustrator в формате SVG, загрузите в конвертер, и он сгенерирует файл iQuery, содержащий анимацию. При необходимости вы можете вносить изменения прямо в код.

9. SVG.js

SVG.js — это интуитивно понятная среда, в которой вы можете управлять файлами SVG и анимировать их. Это небольшой независимый инструмент с простой структурой и общим API. Вы можете делать все, что захотите: анимировать размер, цвет, позицию и текст, трансформировать компоненты, связывать их между собой и так далее.

10. Motion UI

В отличие от предыдущих примеров, при создании интересных CSS-анимаций Motion UI опирается на Sass. Инструмент содержит массу заранее заданных настроек и эффектов, которые можно применить к любому компоненту HTML. Все работает во всех популярных браузерах, кроме IE9.

11. Wait! Animate

Wait! Animate позволяет легко работать с ожиданием и задержками. Посчитайте все необходимые временные интервалы на небольшой панели и создайте естественную анимацию без лишней суеты.

12. Dynamics.js

Dynamics.js — это библиотека, работающая на JavaScript и предлагающая 9 стандартных эффектов. Вы можете задать продолжительность, частоту, трение, предполагаемый размер и силу, чтобы создать реалистичные анимации, основанные на законах физики.

13. Choreographer.js

С этой библиотекой вам больше не придется бояться сложных анимаций, потому что она возьмет все проблемы на себя. Пока она работает с ограниченным набором анимаций, но позволяет настраивать функции так, как вам удобно, чтобы создавать собственные шедевры.

14. Anime.js

Anime.js — это впечатляющий набор функций, позволяющих связывать множество анимаций, синхронизировать этапы, рисовать линии, изменять форму объектов, создавать собственные анимации и т.д.

15. Mo.js

Mo.js быстр, интуитивно понятен и прост. Он позволяет создавать вовлекающие тропинки, неожиданные диалоговые трансформации, пузыри, взрывные эффекты и многое другое.

16. Sequence.js

Sequence.js — это фрейм, работающий на CSS, для создания респонсивных пошаговых анимаций, которыми можно управлять с помощью прикосновений. Инструмент идеален для слайдеров, презентаций, баннеров и других динамических компонентов. Среди премиум-планов вы найдете бесплатный, обеспечивающий вас личной open-source лицензией.

17. Shifty

Shifty — это движок для построения промежуточных изображений, ставящий во главу угла оптимизацию, быструю работу сайта, гибкость и расширяемость. Этот инструмент считается достойной альтернативой GreenSock с гораздо более понятным интерфейсом.

18. It’s Tuesday

Tuesday — это автономная библиотека анимаций, которой можно пользоваться вместе с другими библиотеками. Она делает входы и выходы плавными, гладкими и элегантными и предлагает множество стандартных эффектов: затухание, расширение, сжатие, падение и т.д.

19. CSS Animate

CSS Animate — это простая площадка для написания рабочего кода для любой анимации. Задайте имя, класс, свойства анимации и фрейма, управляйте временной последовательностью и добавляйте маркеры — одним словом, настраивайте все, что вам нужно, чтобы создать стандартную анимацию, основанную на ключевом кадре.

20. Vivus.js

Vivus.js поддерживает три типа анимации: задержка, синхронизация и открытие одного изображения за другим, — и позволяет создавать плавные и естественные векторные анимации, так что загрузка контента станет приятным опытом.

21. Bonsai.js

Bonsai.js — это библиотека JavaScript для серьезной работы с графикой, с простым API и визуализацией SVG. Используйте онлайн-редактор, чтобы протестировать инструмент, познакомиться с его структурой и даже загрузить некоторые примеры, с которых можно начать работу.

22. GSAP by GreenSock

GSAP — это платформа для профессиональных аниматоров. На ней представлено множество плагинов и утилит, отвечающих за разные типы анимации: BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite и другие.

23. Popmotion

Popmotion — еще одна легкая и доступная альтернатива GreenSock. Это движок, позволяющий полностью контролировать каждый фрейм, с инструментами для построения промежуточных изображений, цветовых трансформаций и других эффектов, необходимых при разработке сложных решений.

24. Tween.js

С помощью Tween.js сделано немало хороших анимаций. Это передовой движок для построения промежуточных изображений со множеством настроек и отличное решение для улучшения проектов, работающих на Three.js.

25. Hover.css

Библиотеку Hover.css можно разделить на несколько главных категорий: 2D-трансформации, фоновые трансформации, анимация иконок, трансформации границ, теней и света, пузыри с текстом и завитки. Применяйте эти эффекты к любым элементам своего дизайна без ограничений.

26. Transit

Список функций Transit достаточно короток, однако в него входят самые важные вещи для создания 2D и 3D анимации. Например, вы можете задать задержку и продолжительность, добавить размытие, использовать относительные величины и так далее.

27. Rocket

Rocket — это решение для того, чтобы украсить перемещение объекта из одной точки в другую. В Rocket входят 8 таких эффектов, как пульсация и вращение, придающих движению изюминку.

28. Animo.js

Animo.js — это относительно небольшой инструмент для переходов и анимаций. В него входит набор таких дополнительных плагинов, как обратный отсчет и вращение, обогащающих библиотеку и облегчающих достижение нужного эффекта.

29. Shift.css

Shift.css — это фрейм для создания анимации внутри контейнера, позволяющий работать и с постоянными, и с адаптивными элементами и содержащий 15 стандартных анимаций, в том числе движение, появление, выход, падение и другие.

30. CSShake

CSShake включает в себя 11 категорий, заставляющих элементы вашего DOM дрожать. Вы можете выбрать направление (по горизонтали или по вертикали), тип (зафиксированный, сумасшедший, постоянный, прерывистый), интенсивность (слабо или сильно) или просто оставить настройки по умолчанию.

31. Saffron

Если вы предпочитаете миксины для легкого и быстрого управления анимациями и переходами, Saffron вам определенно подойдет. Это собрание методов многократного использования, написанное на Sass, с возможностью задавать параметры и переменные.

32. CSSynth

CSSynth — это маленький редактор, в котором вы насладитесь красотой синхронизации. Анимация основана на серии квадратов, количество которых вы можете задать на панели слева. Выберите эффект, задайте задержку и скачайте результат в формате CSS или SCSS.

33. Ceaser

Ceaser — старый, проверенный временем инструмент для проведения экспериментов с классической анимацией затухания, содержащий множество вариантов. Два дополнительных параметра (продолжительность и эффект) помогут довести результат до совершенства.

34. Morf.js

Если вам нужно немного больше, чем дает Ceaser, вам стоит попробовать Morf.js. Он предлагает переходы, основанные на полностью настраиваемых функциях затухания, и содержит почти 40 готовых вариантов, которые легко адаптировать под свои нужды.

35. Voxel.css

Voxel.css создан специально для 3D-рендеринга, и простота его установки и использования позволит освоить 3D CSS даже новичкам. Библиотека содержит 4 важных категории: сцена, мир, редактор и воксел, — которые помогут создавать игры и наслаждаться работой.

36. Repaintless.css

Этот инструмент использует технику FLIP для создания быстрых и плавных анимаций. Он неидеален, но это отличное начало для тех, кто особенно заботится о скорости работы своего сайта или приложения.

37. MixItUp

MixItUp — это библиотека красивых фильтров, сортировок, пересечений и действий, необходимых большинству интерфейсов вроде галерей, портфолио и т.д. Она автономна и обещает высокую скорость работы сайта.

38. Wallop

Wallop предназначен для создания красивых эффектов появления и исчезновения, и, естественно, с его помощью обычно делают слайдеры. Впрочем, никто не мешает вам развивать его потенциал и создавать что-нибудь интересное и интригующее.

39. Ramjet

Ramjet превращает один элемент в другой с иллюзией движения, возникающей благодаря функции затухания. Инструмент работает с элементами DOM, векторной графикой, статичными и анимированными изображениями.

40. jQuery DrawSVG

Основанный на движке jQuery, этот плагин прорисовывает части векторной графики и делает картинку резкой, но в то же время элегантной. Просто добавьте плагин на страницу, инициализируйте и запустите анимацию.

41. Animatic.js

Это отличное кросс-браузерное решение, оживляющее все с помощью CSS-трансформаций, 3D-трансформаций и JavaScript. Его главная задача — облегчить вам усилия при анимировании нескольких объектов сразу. Вы можете создавать параллельные и последовательные анимации и точно настраивать продолжительность, задержку и затухание.

42. Move.js

Move.js — это упрощенный инструмент для создания стандартных анимаций вроде масштабирования, вращения, движения или перехода. Каждую анимацию можно улучшить классической функцией затухания.

43. Eg.js

Eg.js — это тщательно подобранная коллекция различных эффектов и динамических элементов, призванных улучшить взаимодействие с интерфейсом. В ее состав входит 8 мощных компонентов для основных задач и 6 главных методов для других случаев.

44. GFX

GFX — это интересная библиотека 3D-анимации для создания программируемых анимаций на CSS3. Она работает с jQuery, так что добиться желаемых результатов довольно просто. Вы можете «поиграть» с масштабированием, вращением, переходами и прочими эффектами.

45. Stylie

Хотя Stylie и считается развлекательным инструментом, он определенно способен впечатлить вас своими возможностями. Центр управления содержит 4 вкладки, позволяющие настраивать ключевые кадры и затухание, экспортировать варианты и HTML, то есть легко создавать сложные анимации.

46. Iconate.js

Iconate.js «вдыхает жизнь» в трансформацию иконок, добавляя симпатичные эффекты и улучшая переходы между двумя объектами. Этот инструмент отлично работает не только со шрифтом Font Awesome, но и с Glyphicons, а также позволяет самостоятельно задать набор пиктограмм.

47. AnimateMate

AnimateMate — это компактный инструмент для создания и экспорта небольших анимаций из Sketch. Он позволяет работать с ключевыми кадрами и функциями затухания, управлять последовательностями и так далее.

48. CAAT

CAAT — это надежный фрейм, работающий в тандеме с JavaScript. В набор инструментов входят сцены, технологии мульти-рендера, маски, стандартный набор эффектов и другое.

49. Granim.js

Granim.js — это небольшая JavaScript-библиотека, помогающая украсить интерфейс интерактивными орнаментами, основанными на градиентах. Это может быть стандартный круговой градиент, или динамический градиент, применяемый к фону картинки, или движущиеся градиенты в сочетании с масками.

50. Animista

Animista — это площадка для проведения экспериментов с кучей готовых стандартных и нестандартных анимаций для CSS. Задайте продолжительность, время, задержку, количество взаимодействий и некоторые другие параметры и посмотрите на результат.

51. Obnoxious.css

Obnoxious.css содержит 5 уникальных анимаций, основанных на CSS и заставляющих элементы интерфейса дрожать, вращаться, увеличиваться, менять вес шрифта и имитировать строб-импульс. Все, что вам нужно, — это применить интересующий вас эффект к нужному элементу.

52. Animatelo

Animatelo включает в себя кучу привлекающих внимание динамических эффектов, взятых из знаменитого Animate.css, так что их легче применить. Поддерживается всеми современными браузерами.

53. Foxholder

Foxholder — это пакет с 15 маленькими интересными эффектами, созданными специально для улучшения взаимодействий пользователя с формой. Каждый из них выделяет поле для ввода данных: можно сделать его границы ярче, добавить визуальные подсказки, заставить текст двигаться и т.д.

54. Rhythm.js

Rhythm.js — это библиотека JavaScript с маленькими симпатичными анимациями, вдохновленными стилем диско: эффекты имитируют различные танцевальные движения. Она содержит почти 20 вариантов, которые привнесут на ваш сайт немного буги-вуги.

55. Colorido.js

Как и Granim.js, этот плагин для JavaScript создан для управления цветами. Он помогает динамически изменять тон и прозрачность фона и текста, а также создавать нестатичные радиальные, линейные, диагональные и горизонтальные градиенты.

56. Barba.js

Barba.js использует PJAX (технику, основанную на подходе ajax), чтобы избежать резкого переключения страниц. Этот инструмент мягко скрывает старый контейнер и заменяет его новым так, что это приятно глазу.

57. ScrollReveal.js

ScrollReveal.js — это популярный инструмент для создания анимации с прокруткой. Благодаря ему вы можете управлять несколькими анимациями и всеми их стандартными параметрами. Этот инструмент отлично работает и с десктопными, и с мобильными браузерами.

Мастер Йода рекомендует:  Растет популярность беспроводных сетей

58. Scrollanim

Scrollanim — не столь изысканный, но более удобный и простой инструмент. Он предназначен для CSS, но позволяет использовать и JavaScript API, чтобы создать анимацию, запускающуюся при прокрутке страницы. Он содержит несколько готовых решений, которые можно сразу же применить к своему проекту.

59. ScrollTrigger

Если предыдущие два инструмента концентрируются в основном на традиционном вертикальном скролле, то ScrollTrigger создан для разработки сайтов с горизонтальной прокруткой. Он позволяет создавать динамические горизонтальные интерфейсы, наполненные красивыми CSS-анимациями, и достаточно прост в обращении.

60. Force.js

Force.js — это компактное решение, не отличающееся богатством вариантов и функционала. Однако оно идеально для таких стандартных задач, как привести объекты в движение или украсить скроллинг, а благодаря эффектам затухания анимация получается чистой и опрятной.

61. AOS

AOS — еще один инструмент для анимации скроллинга с кучей готовых эффектов, запускаемых прокруткой. Если вы хотите сделать на своем сайте красиво появляющиеся секции, но не хотите закапываться в код, AOS подойдет вам.

62. Rellax

Rellax позволяет поработать с параллакс-эффектом. Это легкая универсальная JavaScript-библиотека для придания интерфейсу объема.

63. Tilt.js

Tilt.js создает интригующий эффект наклона, основанный на параллаксе. Этот инструмент позволяет наклонить объект, имитируя 3D в стандартной 2D-плоскости. Вы можете отрегулировать ось, а также сделать объект блестящим или парящим.

64. Transform-when

Transform-when — это отличное решение для создания опыта, основанного на сторителлинге, быстрое и поддерживающее мобильные устройства. Оно строится на двух жизненно важных параметрах: время и позиция скроллинга, — так что вы можете чутко контролировать взаимодействие пользователя с вашим интерфейсом. Решение работает и с векторной графикой, и с обычными элементами HTML.

65. CSS3 Animation


Это генератор стандартной CSS3-анимации с возможностью просмотра превью. CSS3 Animation включает в себя обычный центр управления, где вы можете задать длительность перехода, количество повторений, хронометраж и так далее. Задайте настройки, скопируйте получившийся код и вставьте его в свой проект.

66. Curve.js

Curve.js вдыхает жизнь в линии, заставляет их танцевать, кружиться и переливаться. Используйте этот инструмент для создания элегантных геометрических орнаментов.

67. Animator.js

Animator.js гибок, эффективен и быстр. Это простейший способ управлять ключевыми кадрами и генерировать CSS-анимации различных масштабов. К тому же, это автономный инструмент.

68. Cel-animation

Cel-animation — это миксин для Sass, позволяющий управлять ключевыми кадрами. Вы можете сделать подвижным любой элемент HTML или векторную графику.

69. Scrollissimo

Scrollissimo был создан, чтобы вместе с Greensock анимировать объекты при скроллинге. При помощи дополнительного JavaScript-плагина для устройств с сенсорным экраном этот инструмент работает на большинстве девайсов.

70. jqClouds

jqClouds — это простой плагин, который генерирует парящие облака, чтобы придать статичному интерфейсу динамичный вид. Вы можете заменить облака любыми другими объектами.

71. Color animation

Color animation — это инструмент для анимирования тона и прозрачности фона, границ и текста. Работает с цветом любого объекта.

72. Flubber

Чтобы предотвратить внезапные скачки и резкие метаморфозы, случающиеся, когда один объект превращается в другой, вы можете использовать Flubber. Единственный минус инструмента в том, что он работает только с 2D-графикой.

73. Particles.js

Если вам нравится популярная сегодня анимация частиц, вам стоит воспользоваться Particles.js. Этот генератор основан на библиотеке JavaScript, которая берет всю работу на себя. Задайте интересующие вас параметры: цвет, количество, форма, размер, прозрачность и прочее, — и просто экспортируйте результат.

74. 3D Lines Animation with Three.js

Это небольшой скрипт, не обладающий всеми возможностями плагинов, описанных выше. Тем не менее, он добавляет к вашему интерфейсу красивый фон с анимированными частицами. Вы можете задать цвет, линии, прозрачность и некоторые другие параметры, чтобы фон сочетался с остальными элементами вашего сайта.

Простая анимация с помощью animate.css

Собственно, работа данных библиотек очень просто и очень легко ее освоить. Все, что нам нужно — знать необходимый класс и пользоваться документацией на сайте animate.css. Ничего сложного.

Использование animate.css

Создали разметку, куда уже подключили наши стили и animate.css. Стили могут быть любыми вашими. Как же работает animate.css? Легко! просто добавляем к нужному элементу определенные классы animated и класс самой анимации (в нашем случае fadeInUp):

Проверяем — анимация работает. Но мы видим, что срабатывает она только когда перезагружаешь страницу. То есть, если мы хотим увидеть анимацию элемента НЕ на первом экране — у нас ничего не выйдет. И тут на помощь приходит wow.js

Добавляем wow.js

Добавляем еще секцию и обеим даем высоту 100vh. Подключаем в скриптах wow.js. Инициализируем библиотеку с помощью

И теперь, как мы видим, можно убирать класс «animated» и вместо него писать класс «wow». Работа анимации та же, но выполняться она будет лишь тогда, когда мы доскроллим до нее.

В сущности, это все. Но если Вам вдруг непонятно — я подготовил видео!

Надеюсь, данный урок был Вам полезен. Дальше — усложнение темы и естественно написание собственных анимаций вручную.

До скорых встреч, друзья!

Автор данного блога. Веб-разработчик. Фрилансер. Создаю крутые адаптивные сайты. Портфолио на https://maxgraph.ru/

Добавляйтесь в друзья Вконтакте! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика 🙂

Использование CSS-анимации

На этой странице

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS анимации позволяют анимировать переходы от одной конфигурации CSS стилей к другой. CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное, конечное и, возможно, промежуточное состояние анимируемых стилей.

Есть три преимущества CSS-анимации перед традиционными способами:

  1. Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.
  2. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .
  3. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.

Конфигурирование анимации

Чтобы создать CSS-анимацию Вы должны добавить в стиль элемента, который хотите анимировать, свойство animation или его подсвойства. Это позволит Вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет Вам настроить внешний вид анимации, который настраивается с помощью @keyframes , рассматриваемой далее в Определение последовательности анимации с помощью ключевых кадров.

Свойство animation имеет следующие подсвойства:

animation-name Определяет имя @keyframes , настраивающего кадры анимации. animation-duration Определяет время, в течение которого должен пройти один цикл анимации. .»> animation-timing-function Настраивает ускорение анимации. animation-delay Настраивает задержку между временем загрузки элемента и временем начала анимации . animation-iteration-count Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации. animation-direction Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию. animation-fill-mode Настраивает значения, используемые анимацией, до и после исполнения. animation-play-state Позволяет приостановить и возобновить анимацию.

Определение последовательности анимации с помощью ключевых кадров

После того, как вы настроили временные свойства (продолжительность, ускорение) анимации , вы должны определить внешний вид анимации . Это делается с помощью двух и более ключевых кадров после @keyframes . Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.

В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как width, height, margin, padding, и font-size.»> percentage , чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to .

Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.

Примеры

Скольжение текста

Этот простой пример анимирует скольжение текста в элементе представляет собой абзац.»>

от правого края окна браузера.

Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство overflow : hidden .

с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для @keyframes , описывающей саму анимацию, определено как «slidein».

можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.

Kлючевые кадры определяются с помощью правила @keyframes . В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации ( from ). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок представляет собой абзац.»>

находится за пределами правого края окна браузера .

Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок представляет собой абзац.»>

приплывает к левому краю окна браузера.

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

Добавление других ключевыч кадров

Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:

Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

Настройка повторения

Чтобы настроить повторение, нужно добавить свойство animation-iteration-count и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение infinite для бесконечного повторения:

Движение текста вправо и влево

Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова «запрыгивает» за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству animation-direction значения alternate :

Использование шорткодов

Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:

можно заменить на:

Внимание: подробнее об этом на странице раздела animation

Установка нескольких значений свойствам анимации

CSS cвойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.

В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:

Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, fadeInOut имеет продолжительность 2.5 с и количество повторений 2, и т.д.

В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.

Использование событий анимации

Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью событий анимации. Эти события, представленные объектом AnimationEvent , можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.

Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.

Добавление CSS

Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться «sl > animation-direction установлено alternate . В ключевых кадрах @keyframes установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

Добавление обработчика события анимации

Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

Это довольно стандартный код; Вы можете получить дополнительную информацию в документации element.addEventListener() . Последнее, что делает этот код — это установка класса «slidein» для анимируемого элемента; мы делаем это, чтобы запустить анимацию.

Мастер Йода рекомендует:  С Яндексом стало жить интересней и веселей

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса «slidein» для анимируемого элемента.

Регистрация событий

События будут передаваться функции listener() , показанной ниже.

Этот код также очень прост. Этот код следит за event.type , чтобы определить тип события, и добавляет элемент , чтобы залогировать произошедшее событие.

Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:

  • Started: elapsed time is 0
  • New loop started at time 3.01200008392334
  • New loop started at time 6.00600004196167
  • Ended: elapsed time is 9.234000205993652

Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend .

Ради полноты картины приведем код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

DOM — Анимация

Давайте рассмотрим, как можно создать HTML анимацию при помощи JavaScript.

Базовая веб-страница

Чтобы продемонстрировать создание HTML анимации с JavaScript, мы будем использовать следующую простенькую веб-страницу:

Контейнер для анимации

Вся анимация должна происходить относительно к элементу-контейнеру.

Стили для элементов

Элемент-контейнер должен быть создан со стилем «position: relative«.

Элемент, где будет происходить анимация, должен быть создан со стилем «position: absolute«.

Код анимации

Анимация JavaScript осуществляется путем программирования последовательных изменений стиля элемента.

Изменения вызываются по таймеру. Когда интервал таймера мал, анимация выглядит непрерывной.

30 примеров CSS анимации

Крутые CSS анимации

Семь анимированных точек двигаются влево и вправо, показывая загрузку.

Симпатичные анимированные эффекты, которые можно использовать на сайтах интернет- магазинов при добавлении товаров в корзину.

Создан на чистом CSS, без использования каких либо скриптов на JS.

Анимированный персонаж 404 от With An Es
Классный пример для 404 страницы, где разработчик работает на ошибками.

Высадка на марс от mgitch
Приземление на Марс. Сделано на CSS.

See the Pen CSS Mars Landing by Mathew Gitchell (@mgitch) on CodePen.

Мстители от mariosmaselli
Герои-Мстители на CSS прямо на вашем сайте. Круто, не правда ли?

See the Pen CSS The Avengers by mario sanchez maselli (@mariosmaselli) on CodePen.

Переключатель День/Ночь от jsndks
Теперь вы можете переключать день и ночь с CSS. Гениальная идея.

Анимация Google Now приложений от codecalm
Сторонние приложения от Google Now, теперь анимированы.

See the Pen clo clo by Judith Neumann (@judag) on CodePen.

Анимированная иконка меню от mariusbalaj
Простая идея анимированной иконки, которая меняется при прокрутке страницы.

Кнопка отправки от auginator
Кликните для потдверждения, и кнопка анимируется с загрузкой процесса, с показом результата.

Эластичный SVG сайдбар в стиле Material Design от suez
Перетащите белую полосу вправо, чтобы увидеть эластичный эффект боковой панели.

Кнопка с частицами от igcorreia
Удивительный эффект при наведении на кнопку.

Вращающаяся кнопка от hakimel
Кнопка с эффектом модального окна.

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

Мотоцикл от yy
Посмотрите на движущийся мотоцикл.

See the Pen Cruisin’ by Yusuf (@yy) on CodePen.

See the Pen 3d css cube wave by Kai Waddington (@waddington) on CodePen.

Эффект написания текста от drygiel
Вот подпись которая реализована не на GIF формате, а PNG анимации с CSS3.

Подобие GIF анимации от jascha
Посмотрите как фото появляется из пикселей.

See the Pen Gif Style CSS3 Animation by Jascha Goltermann (@jascha) on CodePen.

Анимация для формы от fluxus
Анимированный карандаш появляется, когда текстовая форма в фокусе.

Разноцветный треугольник от felpedefarias
Невероятная оптическая иллюзия, реализованная на CSS3.

Анимированный динозавр Google Chrome от nickspiel
Помните того динозаврика, которого вы можете увидеть когда соединение отсутствует в популярном браузере?

CSS тряска от elrumordelaliz
Наведите курсор, чтобы посмотреть эффект тряски на объектах.

Шагающий робот от P233
Этот робот идет, и идет, и идет…

See the Pen 3D walking robot by Peiwen Lu (@P233) on CodePen.

Анимация в JavaScript

Анимация в JavaScript

Здравствуйте! В этом уроке рассмотрим анимации в JavaScript. JavaScript-анимация применяется где не подходит CSS-анимации.

Например, анимация по сложной траектории, с специальной временной функцией, выходящей за рамки кривых Безье, на canvas. Еще её используют для анимации в старых IE. Хотя надо сказать, что для экономии ресурсов, особенно мобильных устройств предпочтительно использовать CSS анимации.

Функция setInterval

Сначала давайте дадим определение анимации . Итак с точки зрения HTML/CSS, анимация – это постепенное изменение стиля DOM-элемента. Например, увеличение координаты style.left от 0px до 100px сдвигает элемент влево.

Если увеличивать свойство left от 0 до 100 при помощи метода setInterval, делая по 50 изменений в секунду, то это будет выглядеть как плавное перемещение. Тот же принцип, что и в киноиндустрии: для анимации достаточно 24 или больше вызовов setInterval в секунду.

Код для анимации выглядит так:

Вот более полный пример кода анимации:

requestAnimationFrame

Если у вас не один такой setInterval, а несколько в разных местах кода, то браузеру нужно в те же 20 мс работать со страницей уже не один раз. А ведь кроме setInterval есть ещё другие действия, к примеру, прокрутка страницы, которую тоже надо нарисовать.

Если все действия по перерисовке производить независимо, то будет выполняться много двойной работы.

Гораздо лучше с точки зрения производительности – сгруппировать все перерисовки в одну и запускать их централизованно, все вместе.

Для этого в JavaScript-фреймворках, которые поддерживают анимацию, есть единый таймер:

Все анимации, которые запускает такой фреймворк, добавляются в глобальный общий список, и раз в 20 мс единый таймер проверяет его, запускает текущие, удаляет завершившиеся
Современные браузеры, кроме IE9-, поддерживают стандарт Animation timing, который представляет собой дальнейший шаг в этом направлении. Он позволяет синхронизировать все анимации со встроенными механизмами обновления страницы. То есть, сгруппированы будут не только наши, но и CSS-анимации и другие браузерные перерисовки.

При этом графический ускоритель будет использован максимально эффективно, и исключена повторная обработка одних и тех же участков страницы. А значит – меньше будет загрузка CPU, да и сама анимация станет более плавной.

Для этого используется функция requestAnimationFrame.

Такой вызов планирует запуск функции callback в ближайшее время, когда браузер сочтёт возможным осуществить анимацию.
Если запланировать в callback какое-то рисование, то оно будет сгруппировано с другими requestAnimationFrame и с внутренними перерисовками браузера.
Возвращаемое значение в requestId нужно для отмены запуска:

Функция callback получает один аргумент – время, прошедшее с начала загрузки страницы, результат вызова performance.now().

Как правило, запуск callback происходит очень скоро. Если у процессора большая загрузка или батарея у ноутбука почти разряжена – то пореже.

Если вы запустите этот код, то увидите промежутки между первыми 20 запусками requestAnimationFrame. Как правило, это 10-20 мс, но бывает и больше и меньше. Это оптимальная частота анимации с точки зрения браузера.

Функция анимации на основе requestAnimationFrame:

Структура анимации

На основе requestAnimationFrame можно соорудить и гораздо более мощную, но в то же время простую функцию анимации.

У анимации есть три основных параметра:

duration Общее время, которое длиться анимация, в мс. Например, 1000. timing(timeFraction) Временная функция, которая, по аналогии с CSS-свойством transition-timing-function, будет по текущему времени вычислять состояние анимации.

Она получает на вход непрерывно возрастающее число timeFraction – от 0 до 1, где 0 означает самое начало анимации, а 1 – её конец.

Её результатом должно быть значение завершённости анимации, которому в CSS transitions на кривых Безье соответствует координата y.

Также по аналогии с transition-timing-function должны соблюдаться условия:

  • timing(0) = 0
  • timing(1) = 1…То есть, анимация начинается в точке (0,0) – нулевое время и нулевой прогресс и заканчивается в (1, 1) – прошло полное время, и процесс завершён.Например, функция-прямая означает равномерное развитие процесса:
  • Её график:
  • Как видно, её график полностью совпадает с transition-timing-function: linear, и эффект абсолютно такой же.Есть и другие, более интересные варианты, мы рассмотрим их далее.

draw(progress) Функция, которая получает состояние завершённости анимации и рисует его. Значению progress=0 соответствует начальная точка анимации, progress=1 – конечная.

Именно эта функция и осуществляет, собственно, анимацию.

Например, может двигать элемент:

Возможны в принципе любые варианты, анимировать можно что угодно и как угодно.

Временные функции

Выше мы видели самую простую, линейную временную функцию.

Рассмотрим примеры анимации движения с использованием различных timing.

В степени n

Вот еще один простой случай – progress в степени n. Частные случаи – квадратичная, кубическая функции и т.д.

Для квадратичной функции:

График квадратичной функции:

Увеличение степени влияет на ускорение. Например, график для 5-й степени:

Back: стреляем из лука

Эта функция работает по принципу лука: сначала мы «натягиваем тетиву», а затем «стреляем».

В отличие от предыдущих функций, эта зависит от дополнительного параметра x, который является «коэффициентом упругости». Он определяет расстояние, на которое «оттягивается тетива».

График для x = 1.5:

Отскок bounce

Представьте, что вы отпускаете мяч, он падает на пол, несколько раз отскакивает и останавливается.

Функция bounce делает то же самое, только наоборот: «подпрыгивание» начинается сразу.

Эта функция немного сложнее предыдущих и использует коэффициенты:

Упругая анимация

Эта функция зависит от дополнительного параметра x, который определяет начальный диапазон.

Реверсивные функции ease*

Итак, у нас есть коллекция временных функций.

Их использование называется «easeIn».

Иногда нужно показать анимацию в обратном режиме. Преобразование функции, которое даёт такой эффект, называется «easeOut».

easeOut

В режиме «easeOut», значение timing вычисляется по формуле: timingEaseOut(timeFraction) = 1 — timing(1 — timeFraction)

Например, функция bounce в режиме «easeOut»:

Полный пример – отскок в bounceEaseOut теперь не в начале, а в конце (и это куда красивее):
На этом графике видно преобразование easeOut изменяет поведение функции:

Если есть анимационный эффект, такой как подпрыгивание – он будет показан в конце, а не в начале (или наоборот, в начале, а не в конце).

Красным цветом обозначен обычный вариант, а синим – easeOut.

  • Обычно анимируемый объект сначала медленно скачет внизу, а затем, в конце, резко достигает верха…
  • А после easeOut – он сначала прыгает наверх, а затем медленно скачет внизу.

easeInOut

А еще можно сделать так, чтобы показать эффект и в начале и в конце анимации. Соответствующее преобразование называется «easeInOut».

Его код выглядит так:

Код, который трансформирует timing:

Трансформация «easeInOut» объединяет в себе два графика в один: easeIn для первой половины анимации и easeOut – для второй.
Это отлично видно, если посмотреть графики easeIn, easeOut и easeInOut на примере функции circ:

  • Красным цветом обозначен обычный вариант функции circ.
  • Зелёным – easeOut.
  • Синим – easeInOut.

Как видно, график первой половины анимации представляет собой уменьшенный «easeIn», а второй – уменьшенный «easeOut». Результирующая анимация начинается и заканчивается одинаковым эффектом.

Процесс анимации полностью в ваших руках благодаря timing. Её можно сделать настолько реалистичной, насколько захочется.

Впрочем, исходя из практики, можно сказать, что варианты timing, описанные выше, покрывают 95% потребностей в анимации.

Сложные варианты step

Конечно же анимировать можно все, что угодно. Вместо движения, как во всех предыдущих примерах, можно изменять в принципе любые CSS свойства… И не только!

Достаточно лишь написать соответствующий draw.

Набор текста

Можно, к примеру, анимировать набор текста в «скачущем» режиме:

Итого

Анимация выполняется путём вызовов requestAnimationFrame. Также можно использовать функцию setInterval, изменяя CSS свойства в единицу времени добиваться потрясающих эффектов.

Реализация анимации – очень простая и вместе с тем гибкая:

  • duration – длительность анимации в мс.
  • timing – функция, которая определяет состояние анимации каждый кадр. Получает часть времени от 0 до 1, возвращает завершенность анимации от 0 до 1.
  • draw – функция, которая отрисовывает состояние анимации от 0 до 1.

Эту функцию можно улучшить, например добавить коллбэк complete для вызова в конце анимации.

Мы рассмотрели ряд примеров для timing и трансформации easeOut, easeInOut, которые позволяют их разнообразить. В отличие от CSS мы не ограничены кривыми Безье, можно реализовать всё, что угодно.

Это же относится и к функции draw.

Такая реализация анимации имеет три основных области применения:

  • Нестандартные задачи и требования, не укладывающиеся в рамки CSS.
  • Поддержка IE9-.
  • Графика, рисование на canvas.

Задания

Анимируйте элемент

Сделайте так, чтобы элемент на веб-странице подпрыгивал.

Анимируйте падение элемента с отскоками вправо

Заставьте элемент на веб-странице падать вправо.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавить комментарий