Часть 1. Сравнение технологий анимации - про #CSS
Это первая часть перевода статьи Сары Драснер о сравнении технологий анимации. Разбила на совсем не большие части, чтобы легче было воспринимать. Анимация вошла в сайтостроение и скоро будет одним из стандартов при разработке и внедрении сайта. Итак, начнем. Перевод ведется от лица Автора.Мне часто задают вопрос: какой инструмент для анимации Вы рекомендуете?
Работая с каждым из них, могу с уверенностью сказать, что правильного ответа нет. Это сложный вопрос, и сложный ответ. В данной статье рассмотрены возможности инструментов для анимации, когда и как нужно их использовать.
Нет возможности рассмотреть каждую библиотеку анимации, поэтому я буду рассказывать о тех, которыми пользовалась или которые меня интересуют. Пожалуйста, имейте в виду, что это рекомендации, основанные на моем собственном опыте. У каждого из вас может быть собственный опыт и мнение. Так и должно быть.
#Native Анимация
Прежде чем мы будем говорить о других библиотеках, давайте пробежимся по некоторым обычным внедрениям анимации.
#CSS
CSS остается одним из моих любимых способов анимации. Я использую его в течение многих лет и по-прежнему являюсь его фанатом из - за его четкости и отличной производительности. Анимации CSS позволяют переходить между различными состояниями, используя ряд ключевых фреймов .
Плюсы:
- Не нужна никакая внешняя библиотека.
- Большая производительность, особенно если вы делаете вещи, которые по сути аппаратно ускоряются (то есть разгружают GPU). Вот статья о свойствах, которые может вам помочь вникнуть.
- Препроцессоры (как Sass или Less) позволяют создавать последовательности переменных (для упрощения функций или синхронизаций), наряду с :nth-child псевдо - классами. И этого достаточно, чтобы получить ошеломляющие эффекты.
- Вы можете использовать onAnimationEnd и некоторые другие анимационные рычаги с обычным JavaScript .
- CSS постоянно развивается. Например, модуль CSS Motion Path уже сейчас позволяет создавать мультипликационное движение только средствами CSS.
- Это простой в использовании метод для гибкой разработки, потому что вы можете быстро изменить анимацию в соответствии с запросами.
Минусы:
- Функция Безье может быть немного ограничена. Вы не можете произвести некоторые сложные физические эффекты, которые хороши для реалистичного движения (но они и не нужны слишком часто).
- Если вы выходите за пределы цепочки из трех анимаций в строке, то лучше все-таки перейти на JavaScript. Секвенирование в CSS становится сложной, и вам в конечном итоге придется делать много перерасчетов при корректировках. Посмотрите вот эту работу от Val Head, здесь хорошо показано, что я имею в виду. Эффект поворота тоже легче написать в JavaScript. Длинные, сложные последовательные анимации проще писать и читать в JavaScript.
- Поддержка анимации в браузерах еще совсем слабая. Вы можете проголосовать за поддержку в Firefox здесь. Голосование за поддержку в Safari, насколько я могу понимать, более индивидуальное. Я зарегистрировалась, чтобы заполнить отчет об ошибке и просил модуль траектории движения в CSS в качестве признака.
- CSS + Анимация SVG имеет некоторые недочеты в реализации J . Одним из примеров является то, что в браузере Safari , элементы, отображаются непрозрачными и не. Другой пример – когда не-интуитивным способом происходит преобразование элемента. Надеюсь, в SVG 2 этого не будет, но на данный момент, CSS и SVG на мобильном телефоне иногда возникают странные хаки.
