У меня есть пара иллюстраций, сделанных в Illustrator, и я планирую анимировать их для веб-сайта, над которым я работаю, я слышал о наборе инструментов Create.js со вспышкой, но это лучший способ или есть другой " лучший способ сделать это?
Вот пример анимации, к которой я стремлюсь: 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 сложнее, чем с помощью других средств. Другим недостатком является то, что наличие большого количества контента на холсте не очень оптимизировано для SEO, потому что элементы холста не доступны для сканирования (вы можете обойти это, поместив некоторый визуально скрытый 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 практически необходимо использовать такой инструмент, как подключаемый модуль GSAP MorphSVG, если вы не согласны только с частичной поддержкой, и в этом случае 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 , для анимации/переходов пользовательского интерфейса. Это действительно зависит от типа поведения, которое вы хотите, и от того, удобно ли это делать в CSS.
В то время как мы можем создавать сумасшедшие вещи с помощью чистого CSS, как правило, сложнее создавать сложные иллюстрации, подобные той, которую вы приводите в качестве примера, с помощью CSS, даже при дополнительных манипуляциях с изображениями. Сложные анимации CSS часто сложнее поддерживать, чем их аналоги JavaScript. Другим недостатком является то, что анимацию CSS сложно изменить с помощью JavaScript , и она не слишком хорошо работает при смешивании с JavaScript.
При этом простые взаимодействия с использованием переходов и анимации обычно должны использовать CSS; вы должны использовать его по умолчанию. Чтобы начать изучать анимацию с помощью CSS, ознакомьтесь с моим введением в веб-анимацию .
Вы также можете найти полезные анимации и функции плавности в таких библиотеках, как Animate.css , которые вы можете использовать и добавлять в свои собственные проекты. Вам почти никогда не понадобится вся библиотека, берите только нужные части.
Анимации JavaScript на основе DOM довольно просты. У них плохая репутация из-за ужасных анимационных библиотек, таких как jQuery animate(), но они могут быть особенно высокопроизводительными, особенно при использовании API веб-анимации (обсуждается ниже) или специализированных анимационных библиотек, таких как GSAP , Anime или tween.js . Используя такую библиотеку, они часто могут превзойти другие типы анимации для более интенсивной анимации, такой как анимация большого количества элементов.
Основная причина, по которой вам нужно использовать анимацию на основе DOM, заключается в том, что у вас много пользовательской анимации или сложных временных шкал, включающих уже созданные элементы DOM. Часто лучше попытаться использовать что-то вроде Canvas поверх DOM по уже указанным причинам.
Такие библиотеки, как GSAP, позволяют нам делать сумасшедшие вещи, например замедлять анимацию при наведении , отслеживая матрицы анимации. Таким образом, анимация на основе DOM может быть более индивидуальной и интерактивной, чем любая другая форма анимации, если все сделано правильно. Единственным недостатком является то, что иногда, в зависимости от того, как он построен и что ему нужно делать, он не будет работать хорошо.
WebGL — это способ создания преимущественно 3D-работ. У него есть несколько замечательных проектов , которые вы должны проверить. Очевидно, что его нельзя использовать на каждой веб-странице, но это важно упомянуть.
По моему опыту, использование библиотеки WebGL практически необходимо. Благо есть хорошие. ThreeJS , безусловно, самый распространенный из тех, что я видел, за ним следует PixiJS . Для анимации изображений и видео обычного веб-сайта Curtains.js — отличный вариант. Фреймворк WebGL, такой как A-Frame , также может довольно легко подобрать и создать базовые вещи.
Подробнее о добавлении эффектов WebGL на «обычные» веб-страницы я писал на CSS-Tricks .
API веб-анимации — это попытка стандартизировать реализацию и поддержку анимации в разных браузерах в сочетании с повышением производительности. Он предназначен для использования с элементами DOM, включая SVG. Он похож на то, как структурирована анимация CSS (в форме, похожей на JS), но добавляет такие возможности, как временная шкала и улучшенная производительность.
Он повышает производительность, помещая анимацию в поток компоновщика (для получения более подробной информации ознакомьтесь с этим замечательным постом на эту тему). Для ознакомления с тем, как его использовать, ознакомьтесь с документацией Mozilla или этой вводной статьей .
Вы можете спросить: « Заменит ли это библиотеки анимации JavaScript? » Ответ: « Надеюсь, некоторые ». Улучшение собственных браузерных анимационных движков выгодно для всех, и, как только они это сделают, некоторые менее мощные библиотеки анимации станут бесполезными. При этом более мощные библиотеки анимаций по-прежнему будут иметь дополнительные преимущества, подобные отмеченным GSAP . Нужна ли вам библиотека после того, как WAAPI будет широко поддерживаться, по-прежнему определяется вашими потребностями.
WAAPI имеет довольно хорошую поддержку и имеет полифилл , если вам нужна поддержка IE.
Избегайте использования неэффективных свойств или вызывающих перекомпоновку/перерисовку .
Старайтесь не анимировать множество элементов на странице, так как они более интенсивны, а позже их будет сложно изменить.
При использовании CSS transitionпо возможности используйте анимацию поверх анимации (в разумных пределах). Они работают лучше и, как правило, с ними легче работать.
Разумно используйте это will-changeсвойство для больших элементов, которые вы собираетесь анимировать, чтобы браузер знал об этом заранее. Для получения более подробной информации и предложений по этому поводу прочитайте что-то вроде этой статьи SitePoint по этому вопросу.
Избегайте setIntervalи выбирайте requestAnimationFrameтайминги в JavaScript (хорошие библиотеки анимации, такие как GSAP, сделают это за вас, если вы используете их таймлайны).
Когда есть возможность, используйте API веб-анимации, потому что у него есть возможности для анимации с помощью других методов в JavaScript, которых нет.
Существуют различные способы анимации при прокрутке. Для обзора смотрите мой пост на CSS-Tricks .
Вы никогда не должны запускать Flash в конечном продукте . Флэш официально мертв. Не используйте его. Единственный случай, когда вы можете подумать об этом, — это если вы выполняете установку и имеете специализированное оборудование и программное обеспечение, которое, как вы знаете, работает с Flash.
При этом Animate CC (ребрендинг Flash) — это полезный способ создания анимации, который можно экспортировать в Canvas с помощью Create.js .
Обычно существует несколько методов, которые можно использовать для создания анимации. Лучший из них зависит от того, что вы хотите сделать, и иногда нет лучшего метода. Часто я ловлю себя на том, что использую несколько в одном проекте. Важно критически мыслить , точно понимать, как должна вести себя анимация, и на основе этого выбирать метод. Также помогает, если вы немного поработали в каждом из них.
По моему опыту, при создании статических анимаций (анимаций, не предназначенных для какого-либо взаимодействия с пользователем) я обнаружил, что лучше всего для меня работает анимация иллюстраций в 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, вам должно быть легко. Этот учебник помог мне, я надеюсь, что это может помочь вам.
ноктюрн2