У меня есть пара иллюстраций, сделанных в Illustrator, и я планирую анимировать их для веб-сайта, над которым я работаю, я слышал о инструментарии Create.js с flash, но это лучший способ или есть другой » лучше "способ сделать это?
Вот пример анимации, к которой я стремлюсь: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Ответы:
Есть много способов оживить вещи в Интернете. Существует еще больше способов создания анимации, чем экспорт в веб-анимацию.
Есть огромные преимущества для создания анимации в чем-то вроде AfterEffects или Animate CC (которые могут импортировать файлы Illustrator и Photoshop) по очевидным причинам разделения труда и использования графического редактора.
Учитывая сказанное, вы всегда должны в конце концов выполнить одно из следующих действий :
Ограниченные возможности взаимодействия:
Более полно интерактивный:
Теперь я подробно расскажу о каждом из них.
GIF - это хороший способ, когда анимация не требует большого взаимодействия, не требует динамического размера и относительно небольшого размера. Хорошо сделанные GIF-изображения могут быть такими же подробными, как и иллюстрации, на которые вы ссылаетесь, без каких-либо проблем с производительностью. Возможно даже незначительное взаимодействие с использованием прозрачного наложения, помещенного поверх него (или только его части).
Примечание: теперь существует .gifvформат, созданный Imgur, который на лету преобразует GIF-файлы в видеоформаты WebM или MP4. Это повышает производительность за счет значительного уменьшения размера конечного файла. Вы могли бы рассмотреть возможность сделать то же самое.
Еще один способ сохранить плавную, но стильную анимацию - использовать спрайт. Google использует этот подход для таких вещей, как анимация логотипа . Еще один замечательный пример - старый сайт Александра Энгзелла, на котором использовалась нездоровая типографская анимация с использованием этого подхода. Это оптимально, когда GIF будет слишком большим, но вам не нужно много взаимодействия.
Я также видел очень интересную анимацию JavaScript, которая напоминает спрайт или GIF- файл, используемый Google (наведите курсор на изображение Chrome в левом верхнем углу - для этого требуется использовать Chrome), но вместо этого используется анимированная маска. Я предполагаю, что они использовали этот подход, чтобы ограничить общий размер файла.
В последние годы мы приобрели большие возможности в области видео. Этот <video>элемент позволяет нам настраивать способ взаимодействия и использования видео, как никогда раньше. Теперь мы можем легко использовать полноэкранные фоновые видеоролики и выполнять такие действия, как покадровое прокручивание . Я также заметил, что FaceBook использует видео для некоторых простых анимаций, когда приветствует пользователей на своих специальных мероприятиях. Преимущество заключается в том, что он может быть сжат до довольно небольшого размера файла и может выполнять более широкий спектр анимаций (все, что может делать программное обеспечение для редактирования видео). Таким образом, если кто-то может сделать плохое видео, то довольно легко превратить его в фантастическое дополнение к веб-странице.
Очевидно, что видео не подходит для большинства анимаций в Интернете (например, переходы между кнопками и т. Д.), Поэтому не используйте их везде.
При этом, если вы хотите, чтобы анимация генерировалась динамически, когда вам нужно больше, чем просто базовое взаимодействие, когда вы хотите создавать трехмерные среды, и во многих других случаях GIF, спрайт или видео просто не будут порежь это. Как только это будет решено, есть несколько других вариантов, лучший из которых зависит от вашей анимации и потребностей.
У меня нет статистики, но большинство веб-анимаций, которые я видел, используют Canvas . Canvas прекрасно использовать благодаря своей производительности и гибкости при создании. Он использует только один элемент браузера (DOM) из-за того, что он просто рисует - как на реальном холсте - вещи друг на друге. Отслеживая, что нарисовано и где с помощью JavaScript, мы можем создавать довольно классные анимации и даже игры.
Однако основным недостатком использования Canvas является его относительная сложность масштабирования. Часто, в зависимости от анимации, конечно, сделать адаптивную анимацию Canvas сложнее, чем с использованием других средств. Еще одним недостатком является то, что большое количество контента на Canvas не очень оптимизировано для SEO, потому что элементы canvas нельзя сканировать (вы можете обойти это, добавив визуально скрытый HTML-контент, если это применимо). С другой стороны, такие вещи, как выделение текста для пользователей, затруднены в Canvas (особенно без использования библиотеки, такой как CreateJS).
Основное использование Canvas - это каракули Google , которые часто делают в Canvas. Когда у них есть игра или интерактивная анимация, они используют Canvas каждый раз, когда я смотрю. Если нет взаимодействия, они будут использовать GIF или спрайт.
Есть много замечательных библиотек, которые помогут легче работать с Canvas, хотя это определенно не требуется в зависимости от того, что нужно сделать. Среди созданных только для Canvas - CreateJS (который можно экспортировать из Animate CC), Pixi.js , PaperJS , KineticJS и FabricJS (расположенные в порядке моего впечатления о них). Плагин After Effects с именем Lottie (ранее BodyMovin) также может экспортировать в Canvas (или SVG [1] ) и имеет встроенный движок анимации.
Конечно, вы также можете легко соединить большие библиотеки анимации, такие как GSAP, с Canvas. Для чего-то более подробного, чем иллюстрация, которую вы связали, я бы порекомендовал использовать какой-то тип фреймворка, но для многих вещей он не нужен, просто полезен - особенно если вы уже знаете, как использовать один из них.
Еще один невероятно мощный способ легко и быстро адаптировать анимацию в Интернете - это использовать SVG ( Scalable Vector Graphics ). Они хорошо выполняют свое предназначение - быть масштабируемыми векторами . Многие находят, что использование SVG поначалу сбивает с толку, но у большинства вещей, таких как система координат SVG и преобразования, есть отличные статьи, объясняющие их.
Одна из замечательных особенностей SVG заключается в том, что он может быть анимирован с помощью JavaScript, чистого CSS (включая :hoverсостояния, transforms, transitions и animations) или SMIL-анимации («родной» способ анимировать вещи с помощью SVG - но IE этого не делает). не поддерживает это вообще, и это постепенно обесценивается ). Я рекомендую сначала использовать CSS, а затем JavaScript, когда это не (относительно) просто в CSS. Для преобразования SVG-элементов практически необходимо использовать такой инструмент, как плагин MorphSVG GSAP, если вы не согласны только с частичной поддержкой, в этом случае SMIL может быть приемлемым.
Поскольку элементы SVG могут иметь любую форму, их можно использовать для создания интересных эффектов . Сара Драснер сделала несколько полезных тестов производительности в отношении SVG-анимации, которые показывают, какие способы анимации SVG лучше всего подходят для производительности .
В зависимости от анимации (и необходимости поддержки браузера), такие библиотеки, как Snap.svg или GSAP, могут быть полезны, но часто CSS и, если необходимо, небольшой пользовательский JS - это все, что требуется. При этом плагин After Effects под названием Lottie (ранее BodyMovin) и расширение Flash под названием Flash 2 SVG могут быть действительно полезны для создания SVG-анимации.
Для получения более подробной информации взгляните на этот пост, посвященный анимации элементов SVG.
PS Лучше всего использовать SVG в <object>теге или встраивать непосредственно в <svg>элемент XML, если он интерактивный, и в качестве фонового изображения, если он не интерактивный, но есть и другие способы сделать это.
По моему опыту, CSS-анимации и переходы должны в первую очередь использоваться для элементов пользовательского интерфейса и других базовых переходов и анимаций. Даже тогда иногда целесообразно использовать библиотеку анимации JS, такую как GSAP или Velocity.js, для анимации / переходов пользовательского интерфейса. Это действительно зависит от типа поведения, которое вы хотите, и от того, удобно ли это делать в CSS.
Хотя мы можем создавать сумасшедшие вещи с помощью чистого CSS, в целом сложнее создавать сложные иллюстрации, подобные той, что вы предоставляете в качестве примера с использованием CSS, даже при дополнительной обработке изображений. Сложные CSS-анимации зачастую сложнее поддерживать, чем их JavaScript-аналоги. Другим недостатком является то, что CSS-анимации трудно изменить с помощью JavaScript, и они не слишком хорошо работают при смешивании с JavaScript.
При этом простые взаимодействия с использованием переходов и анимации обычно должны использовать CSS; Вы должны по умолчанию к нему. Чтобы начать изучать анимацию с помощью CSS, ознакомьтесь с моим введением в веб-анимацию .
Вы также можете найти полезные анимации и функции ослабления в библиотеках, таких как Animate.css, которые вы можете использовать и добавлять в свои собственные проекты. Вам почти никогда не понадобится вся библиотека, возьмите только те части, которые вам нужны.
JavaScript-анимации на основе DOM довольно просты. У них плохая репутация из-за ужасных библиотек анимации, таких как jQuery animate(), но они могут быть особенно эффективными, особенно при использовании API веб-анимации (обсуждается ниже) или специализированной библиотеки анимации, такой как GSAP , Velocity.js или mo.js ( GSAP даже имеет специальный плагин для замены jQuery .animate). Используя такую библиотеку, они часто могут превзойти другие типы анимации для более интенсивной анимации, такой как анимация целого ряда элементов.
Основная причина, по которой вам нужно использовать анимацию на основе DOM, заключается в том, что у вас много пользовательских анимаций или сложных временных шкал, включающих уже созданные элементы DOM. Часто бывает лучше попробовать использовать что-то вроде Canvas поверх DOM по причинам, уже указанным.
Такие библиотеки, как GSAP, позволяют нам делать сумасшедшие вещи, такие как замедление анимации при наведении , отслеживая матрицы анимации. Таким образом, анимация на основе DOM может быть более индивидуальной и интерактивной, чем любая другая форма анимации, если все сделано хорошо. Единственным недостатком является то, что иногда, в зависимости от того, как он построен и что нужно сделать, он не будет работать хорошо.
WebGL - это способ создания в первую очередь 3D работ. У него есть несколько потрясающих проектов, которые вы должны проверить. Это не должно использоваться на каждой веб-странице, очевидно, но важно упомянуть.
Он фактически анимирует элементы DOM для создания трехмерных (и 2D) сред, что потрясающе из-за потенциала, который у него есть. При использовании библиотеки WebGL прибегает к использованию Canvas, но по-прежнему не имеет большой поддержки на мобильных устройствах и может сильно снизить производительность. Как правило, довольно ясно, когда вам нужно использовать WebGL или нет.
Исходя из моего опыта, использование библиотеки WebGL практически необходимо. К счастью, есть несколько хороших. ThreeJS , безусловно, самый распространенный из всех, что я видел, а затем PixiJS . Фреймворк WebGL, такой как A-Frame, также может облегчить подбор и создание базовых вещей.
Веб - анимации API является попыткой стандартизировать как анимация внедрена и поддерживается во всех браузерах спаренных с улучшенной производительностью. Он предназначен для использования с элементами DOM, включая SVG. Это напоминает структуру CSS-анимации (в виде JS), но добавляет такие возможности, как временная шкала и повышенная производительность.
Он повышает производительность, добавляя анимацию в поток композитора (более подробную информацию можно найти в этом великолепном посте по теме). Для ознакомления с тем, как его использовать, ознакомьтесь с документами Mozilla или этим вступительным постом .
Вы можете спросить: « Это заменит библиотеки анимации JavaScript? » Ответ « Надеюсь, что некоторые ». Для всех штатных движков анимации браузера полезно улучшаться, и, как они это делают, некоторые менее мощные библиотеки анимации станут бесполезными. При этом более мощные библиотеки анимаций будут по-прежнему иметь дополнительные преимущества, такие как отмеченные GSAP . Нужна ли вам библиотека после того, как WAAPI получит широкую поддержку, зависит от ваших потребностей.
WAAPI в настоящее время не имеет хорошей поддержки, но сегодня может использоваться с полифилом в производстве. Похоже, что он будет продолжать улучшаться и получать больше поддержки.
Избегайте использования неэффективных свойств и не вызывайте перерисовки / перерисовки .
Избегайте анимации группы элементов на странице, поскольку они являются более интенсивными и могут также быть проблемой, чтобы изменить позже.
При использовании CSS transitionпо возможности используйте анимацию поверх (в пределах разумного). Они работают лучше и, как правило, с ними легче работать.
Интеллектуально используйте will-changeсвойство для больших элементов, которые вы собираетесь анимировать, чтобы браузер знал заранее. Для получения более подробной информации и предложений по этому вопросу, прочитайте что-то вроде этой статьи SitePoint на эту тему.
Избегайте setIntervalи выбирайте requestAnimationFrameтайминги в JavaScript (хорошие анимационные библиотеки, такие как GSAP, сделают это за вас, если вы используете их временные шкалы).
Когда вы можете, используйте API веб-анимации, потому что у него есть возможности для анимации с другими методами в JavaScript.
Вы никогда не должны запускать Flash в конечном продукте . Анимации JavaScript работают лучше, более динамичны, их легче редактировать, они не требуют загрузки, работают на большем количестве платформ (Flash не работает на большинстве планшетов / телефонов) и более отзывчивы, чем громоздкие старые Flash. Они также не очень доступны и не оптимизированы для SEO.
С учетом вышесказанного , Animate CC (ребрендинг Flash) - это полезный способ создания анимации, который можно экспортировать в Canvas с помощью Create.js .
Обычно есть несколько методов, которые вы можете использовать для создания анимации. Лучший из них зависит от того, что вы хотите, чтобы это делалось, и иногда нет лучшего способа. Часто я использую несколько в одном проекте. Важно критически мыслить , точно понимать, как должна работать анимация, и выбирать метод, основанный на этом. Это также помогает, если вы немного поработали над каждым.
[1] - Lottie также может экспортировать в нативный Android, iOS и React Native .
По своему опыту, когда я делал статические анимации (анимации, которые не предназначены для какого-либо взаимодействия с пользователем), я обнаружил, что лучше всего для меня было анимировать иллюстрации в After Effects и после этого экспортировать конечный результат в файл .GIF. Это делает анимацию абсолютно удобной для браузера и гарантирует одинаковую визуализацию на любом устройстве.
Однако, если вы ищете что-то, с чем пользователь мог бы взаимодействовать, я считаю, что Canvas - действительно правильный путь, и для этого, похоже, CreateJS подходит для работы с библиотекой EaseJS.
В любом случае, согласно вашему примеру, вы можете сделать это с помощью анимированного GIF-файла и получить точно такой же результат.
Если вы работаете с After Effects, вы можете использовать плагин Bodymovin . Это делает вашу работу для мобильного и веб-использования. У вас будет файл .json и lottie.js, который вы сможете использовать в своем HTML. Но сначала вам нужно отключить параметр « Разрешить сценариям записывать файлы» и получить доступ к сети в общих настройках. Когда вы это сделаете, зайдите в Window , Extensions и найдите Bodymovin . Выберите вашу композицию, установите местоположение для сохранения и нажмите кнопку рендеринга. Поместите ваши файлы .json и lottie.js в ваш HTML, и ваша работа завершена. Я думаю, что GIF не лучшее решение, потому что ему нужно больше времени для загрузки.
Вы можете скачать его здесь: http://aescripts.com/bodymovin Просто добавьте свою цену, или, если вы хотите получить бесплатно, вы можете просто положить $ 0,00 ...
Вот руководство по использованию Bodymovin и настройке анимации на веб-сайте с помощью Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Если вы знакомы с основами HTML и CSS, это должно быть легко для вас. Этот урок помог мне, я надеюсь, что это может помочь вам.