Динамическая компьютерная графика в вебе принципы и технологии создания анимации на веб страницах
Обновлено: 05.07.2024
Хотите верьте, хотите нет, у вас не так много времени, чтобы убедить посетителей вашего сайта остаться рядом. Ваше окно на самом деле намного короче, чем вы предполагаете.
По сути, это займет всего 0.05 секунд после того, как ваша страница загружается для посетителей, чтобы сформировать свое мнение. Более конкретно, это переводит в миллисекунды 50. Удивительно короткий, правда?
Хорошо, некоторые из них уйдут. Но другие могут остаться.
И если у вас были какие-то надежды на их восстановление, вот жесткая правда. 88% из них вряд ли вернется на сайт после неудачного опыта.
Но подожди минутку. Чья работа заключается в том, чтобы удерживать веб-трафик, когда он попадает на сайт?
Хорошо, конечно, естественно обвинять контент-менеджера сайта. И вы можете быть правы. Но только частично.
Оказывается, все начинается с веб-дизайнера. На самом деле, исследование, которое тщательно изучило широкий спектр отзывов потребителей, установило, что 94% отрицательных были связаны с дизайном.
Для начала, избежать этого невозможно. Основная ответственность лежит на вас. В дополнение к реализации всех передовых методов проектирования, которые мы рассмотрели в наших предыдущих статьях, вы должны надеть PR-шапку и рассмотреть элементы, которые эффективно связаны с трафиком.
Я говорю о таких вещах, как веб-анимация.
И почему мы специально это предлагаем?
Ну, это то, что я собираюсь раскрыть в ближайшее время. Это руководство проведет вас через все критические аспекты веб-анимации. Но сначала давайте рассмотрим основы .
Основы веб-анимации
Представьте себе своего любимого мультипликационного персонажа, прогуливающегося по экрану. Или, возможно, логотип вашего телефона танцует по всему экрану при перезагрузке устройства. Что у них общего?
Ну, они оба являются основными примерами анимации.
Анимация в основном возникает, когда неподвижный элемент «оживает». Затем он начинает демонстрировать некоторую форму движения.
Мы точно не знаем, когда началась эта практика. Но у нас есть идея, что первый анимационный фильм в истории было сделано более века назад. С тех пор эта тенденция получила широкое развитие благодаря прогрессивным достижениям в области технологий.
Однако одно осталось неизменным - принципы анимации. На самом деле, Олли Джонстон и Фрэнк Томас из Disney позже написали о них в своей книге:Иллюзия жизни: анимация Диснея». Вот полный список:
- Обжалование
- Сплошной рисунок
- преувеличение
- тайминг
- Вторичное действие
- дуга
- Медленно и медленно
- Выполнять и перекрывать действия
- Прямолинейные действия и позы, чтобы позировать
- Инсценировка
- Ожидание
- Сквош и растянуть
Эти двенадцать по-прежнему обеспечивают основу для дизайна анимации сегодня, включая те, которые публикуются в Интернете в виде видео, WebGL, SVG, CSS и GIF.
Теперь веб-анимация может быть такой же простой, как выделение, которое появляется при наведении курсора на букву, на сложную многослойную серию полноэкранных видеороликов. Другими словами, вы можете использовать тонкий подход или выбрать изо всех сил доминирующие анимации, которые требуют внимания. Все зависит от ситуации.
И напрашивается вопрос: когда вы вообще должны использовать анимацию?
Когда вы должны использовать веб-анимацию?
Конечно, они милые. И они, безусловно, будут интересными дополнениями к макету вашего сайта.
Но вы знаете, что? Их последующие уровни эффективности - это совсем другое. Таким образом, само собой разумеется, что анимация не подходит для всех проектов сайта. И самое главное, было бы плохой идеей принять их случайно.
Просто так получилось, что 46% онлайн-потребителей оцените достоверность сайта на основе его общей визуальной привлекательности и эстетики. Вы просто не можете позволить себе включать это в плохо спроектированную структуру анимации. В то же время было бы прискорбно упускать упущенные возможности золотого преобразования, не используя анимацию.
Итак, когда вы должны использовать их?
Ну, вот в чем дело. Веб-анимация в основном идеальна, когда вам нужно повысить удобство использования, возможно, привлекая внимание или помогая пользователям в процессе навигации.
Как правило, требуется 2.6 секунд чтобы посетитель мог заглянуть в раздел сайта, что в первую очередь влияет на его первое впечатление. Умело используя анимацию, вы можете ускорить процесс, сразу же обратив внимание на наиболее важные области сайта.
Наконец, вы можете использовать веб-анимацию исключительно в эстетических целях. Гладкая и бесшовная декоративная анимация может значительно улучшить общую визуальную привлекательность, а затем установить эмоциональную связь между пользователями и интерфейсом. И так вы постепенно повышаете уровень вовлеченности пользователей.
Инструменты веб-анимации
Готовы начать создавать веб-анимацию? Отлично! Но с чего начать?
Ну, а как насчет поиска надежного инструмента для преобразования ваших идей в реальные анимации? К счастью, в Интернете есть широкий выбор опций, которые хорошо оптимизированы для разных пользователей и различных типов анимации. То, что вы выберете для своих проектов, зависит от ваших навыков, основных задач, бюджета и типа сайта, над которым вы работаете.
Тем не менее, вот несколько ярких примеров, каждый со своим уникальным сценарием использования:
- js
- 3D Линии Анимации с Three.js
- js
- Flubber
- Цветовая анимация
- jqClouds
- Scrollissimo
- Cel-анимация
- js
- js
- Анимация CSS3
- Transform-когда
- js
- Rellax
- К
- js
- ScrollTrigger
- Scrollanim
- js
- js
- js
- js
- Foxholder
- Animatelo
- CSS
- Animista
- js
- СААТ
- AnimateMate
- js
- Stylie
- GFX
- js
- js
- js
- jQuery DrawSVG
- ПВРД
- поколотить
- MixItUp
- CSS
- CSS
- js
- Ceaser
- CSSynth
- Шафран
- CSShake
- CSS
- js
- Rocket
- транзит
- CSS
- js
- Popmotion
- GSAP от GreenSock
- js
- js
- CSS Animate
- Это вторник
- изворотливый
- js
- js
- js
- js
- js
- Подождите! оживлять
- Пользовательский интерфейс движения
- js
- Lazy Line Painter
- js
- js
- js
- AnijS
- js
- Волшебная анимация
- CSS
Разработка веб-анимации
эффекты при наведении курсора
Анимированные анимации, несомненно, являются одними из самых простых в Интернете. Они оживают и выделяют выбранные элементы, когда указатель мыши перемещается над ними. Сама анимация может происходить в различных формах, таких как изменение размера или изменение цвета.
Хитрость заключается в том, чтобы принимать эффекты экономно. В противном случае вы рискуете выделить слишком много элементов, что может впоследствии запутать пользователей.
Также желательно поддерживать некоторую форму в соответствии с методологией по всему сайту. Например, если кнопки домашней страницы становятся зелеными и красными, используйте ту же платформу для дополнительных подсветок на других веб-страницах.
Фоновые анимации
Встраивание фоновой анимации - это эффективная стратегия, позволяющая добавить волнение и жизненную силу на вашу веб-страницу, не мешая при этом основным акцентам. Вы можете использовать что угодно, от видео до тонких изображений, которые последовательно сдвигаются.
Лучший подход здесь состоит в том, чтобы держать вещи структурированными и простыми. Если вы решите интегрировать видео, сократите его соответствующим образом и поддерживайте цикл, соответствующий вашему сайту. Затем убедитесь, что движения достаточно тонкие, чтобы привлечь внимание, не перегружая пользователей.
GIF-стиль анимации
GIF стоит рассмотреть, если вам особенно интересна анимация, которую исключительно легко настроить. Типичным может быть что-то вроде сдвига текста или улыбающегося клоуна, встроенного в ваш макет контента.
Все, что вам нужно сделать, это придумать надежную идею, получить соответствующее видео или изображение, а затем преобразовать его в идеальный GIF-файл с помощью подходящего программного обеспечения для редактирования. Загрузка результирующего создания в формате GIF создает анимацию, похожую на видео, которая загружается так же быстро, как маленькое изображение.
Переходные анимации
Переходные анимации используются для придания энергии, когда пользователи переходят из одного раздела сайта в другой. Они похожи на анимацию слайд-шоу, которая появляется при переходе от одного слайда к другому.
Для идеального результата убедитесь, что анимации плавные и согласованные по всему сайту. Они также должны быть достаточно короткими, чтобы не задерживать реальный процесс перехода.
Загрузка анимаций
Факт- 47% онлайн-потребителей ожидайте, что ваши веб-страницы загрузятся как минимум за 2 секунд. Если вам этого не удастся, каждая дополнительная секунда переводит на 7% меньше конверсий.
Идя мимо текущее среднее время загрузки в секундах 22Совершенно очевидно, что оправдать второе ожидание 2 довольно сложно. Но вы можете спасти значительную часть трафика, занимая их анимацией, так как другие элементы сайта продолжают загружаться.
Сосредоточьтесь на создании простых, которые достаточно легки, чтобы загрузить почти сразу, трафик будет перенаправлен на ваш сайт. Они должны быть предназначены для систематического ознакомления посетителей с брендом и общей темой сайта.
Анимации, запускаемые при прокрутке
Исследования отслеживания глаз показали, что пользователи сайта тратят около 57% их времени выше сгиба, Но, оказывается, что многие из них готовы прокрутить вниз - при условии, что вы предоставите подходящую структуру и механизм дизайна.
И именно здесь появляются анимации, запускаемые при прокрутке. Они начинают действовать, как только пользователи начинают прокручивать, создавая иллюзию гладкой, бесконечной страницы. Это продуманный способ устранения переходов, которые в противном случае препятствовали бы прокрутке.
Навигация и анимация меню
Будем честны. Опции меню занимают значительно больше места на экране, особенно на целостных динамических сайтах с несколькими уровнями выбора. К счастью, вы можете использовать анимацию, чтобы скрыть параметры, а затем открывать их только тогда, когда пользователь нажимает или наводит курсор на соответствующие кнопки.
Этот тип анимации также упрощает и упрощает процесс навигации, сжимая всю структуру в визуально связанные пункты меню. Каркас должен быть спроектирован с сегментами подменю, которые систематически всплывают, когда пользователь нажимает или указывает на наложенные пункты меню.
Галерея и слайд-шоу
Возможно, неудивительно, что средняя продолжительность внимания людей составляет 8 секунд - по крайней мере, согласно недавнему исследованию, проведенному Microsoft. Даже золотая рыбка способна оставаться внимательной дольше, чем обычно.diviдвойной. Таким образом, вы можете поспорить, что большинство посетителей вашего сайта не будут достаточно настойчивыми, чтобы просматривать все элементы вашей галереи.
Но угадайте что? Вы можете хитро использовать анимацию галереи и слайд-шоу, чтобы автоматически демонстрировать многочисленные изображения, не заставляя пользователей перемещаться по ним.
Здесь главное время показа изображения. Короткие дисплеи с быстрыми переходами могут показаться срочными, а длинные дисплеи с медленными переходами - скучными и вялыми. Имея это в виду, спроектируйте общий макет так, чтобы каждое изображение отображалось в течение примерно от 5 до 8 секунд, прежде чем быстро перейти к следующему.
Заключение
В общем, вы должны анализировать анимации, основываясь на том, насколько они впоследствии улучшают пользовательский опыт. Хороший должен либо вызвать эмоциональную связь от пользователей, либо облегчить процесс навигации. С другой стороны, идеальный должен быть в состоянии комфортно достичь обоих одновременно.
Чтобы достичь этого, потратьте время на критическую оценку всех соответствующих параметров при разработке и внедрении анимации на свой сайт. И помните - держите это простым, легким и хорошо выровненным к Вашему бренду.
изображение заголовка любезно предоставлено Элфри Дэвилла | vaneltia
В век бурного развития коммуникационных технологий разработка Web -сайтов выходит за рамки профессиональной деятельности. Создание двух или трех Web -страниц под силу рядовому пользователю. Включение в школьный курс информатики раздела «Сайтостроение», позволяет учащимся создавать статические страницы, записывая в блокноте HTML -код. Но для пользователей Интернета уже давно стало привычными появляющиеся почти на каждой Web -страничке «живые» мультипликационные картинки. Именно такими, анимированными, в большинстве случаев являются рекламные баннеры. Это и понятно: анимация привлекает гораздо сильнее, чем статические картинки, и кроме того, на небольшой площади можно поместить значительно больше информации за счет чередующихся кадров. Из существующих в настоящее время технологий создания анимации для WWW (анимационный GIF , Flash , Java и JavaScript ) самым простым в создании остается анимированный GIF , который может показать любой современный браузер. Формат GIF позволяет размещать в одном файле несколько кадров или фреймов с изображениями для их последовательного вывода на экран. Для каждого кадра может быть задана длительность показа на экране, а для каждой анимации может быть задано количество повторений. Анимированные GIF -файлы могут быть легко подготовлены в программе Adobe ImageReady .
Создание анимации в данной программе базируется на использовании слоев. Каждый элемент анимации помещается на отдельный слой. Это позволяет изменять положение и вид элемента в серии кадров, используя команды и параметры палитры Layers (Слои) . Для создания кадров анимации из оригинального многослойного изображения совместно с палитрой Layers (Слои) используется палитра Animation (Анимация) . С её помощью можно назначить каждому кадру время задержки, создавать новые кадры, автоматически генерировать промежуточные состояния на основании начального и конечного изображений, определить количество повторений анимации и др.
Одним из примером анимированного GIF -изображения может служить бегущая строка, для создания которой а палитре Animation (Анимация) создаются два кадра: первый (начальное положение строки) и последний (конечное положение строки). Затем определяются количество промежуточных кадров и время их задержки для регулирования скорости движения изображения по экрану.
В последнее время весьма актуальной задачей, стоящей перед Web -дизайнерами, становиться разработка интерактивной графики. Одной из разновидностей такой графики – это изображение, разделенное на части ( slice ). Каждый фрагмент – это прямоугольный участок, который становится ячейкой таблицы в HTML -файле. К каждому фрагменту можно применить эффект Rollover (Наведение). При просмотре в браузере, в зависимости от действия мыши, состояние этого фрагмента будет меняться. Каждому фрагменту можно присвоить ссылку на другую Web -страницу, т.е. создается навигационная панель.
Для создания такой панели в программе Adobe ImageReady необходимо разрезать изображение с пунктами меню на кусочки с помощью инструмента Slice Tool (Инструмент «Фрагмент») , а затем «научить» их реагировать на различные события, связанные с действиями мыши – нажатиями, щелчками и т.д. с помощью специальной палитры Web Content (Содержимое Web ). Эффект Rollover (Наведение) создается из отдельных кадров-состояний ( Over , Down , Selected , Up и т.д.), для каждого из которых определяется то или иное событие (например, смена фона). При просмотре в браузере эти кадры изображения будут изменяться в зависимости от действия мыши, а при записи на диск создается файл с расширение html , в котором записывается автоматически созданная на языке JavaScript программа, изменяющая состояние изображения пункта меню при различных действиях мыши.
Именно эта возможность программы Adobe ImageReady избавляет от необходимости изучения языка JavaScript , что наиболее актуально при изучении информатики на базовом уровне.
Использование графических элементов, в том числе интерактивных, придает сайту оригинальный и неповторимый стиль, что повышает мотивацию учащихся при изучении данного раздела курса информатики.
Л.Г. Молчанова, А.А. Рачинский. Графические элементы Web -сайтов. Учебное пособие. П:УГИ, 2010, 52с.
И.В. Панфилов. Самоучитель создания Web -сайтов. – М:ТРИУМФ, 2008, 464с.
Б. Крымов. Самоучитель Adobe Photoshop CS 3. – М:ТРИУМФ, 2007, 320с.
Д. Лещев. Создание интерактивного Web -сайта: учебный курс. – СПб.:Питер, 2003, 540с.
Примечание переводчика: Представленный ниже материал содержит значительное количество технических терминов, при переводе которых могут возникнуть неточности. Если вы заметили опечатку, ошибку или неточность перевода — напишите нам, и мы оперативно всё исправим.
Кроме того, в продолжение темы сегодняшней публикации на одну неделю будет открыт продвинутый курс академии по CSS-анимациям , который обычно доступен по подписке. Его описание размещено в конце топика.
Фронтенд-дизайнеры и разработчики используют CSS для создания стилей, позиционирования элементов — в общем, для того, чтобы сайты выглядели красиво. Часто CSS применяют и для добавления движений на веб-страницы, хотя дело обычно не идёт дальше плавных переходов или анимации.
На самом деле анимация может быть мощным инструментом, который позволяет посетителям сайта и клиентам легче взаимодействовать с интерфейсом продукта и быстрее добиваться своих целей. Этого можно достичь, если следовать в своей работе некоторым основополагающим принципам.
Компания Disney занимается анимацией уже много лет и выработала такие рекомендации — ещё в 1981 была опубликована книга «Иллюзия жизни: Анимация Disney» (« The Illusion of Life: Disney Animation »), в которой перечислялись 12 принципов анимации (про них писали на Хабре). Они описывают то, как использовать анимацию для создания у зрителей, смотрящих на экран, ощущения реального мира.
В сегодняшней статьей мы рассмотрим каждый из двенадцати этих принципов и обсудим их возможное применение при создании веб-страниц. Все исходники CSS и HTML можно скачать на Codepen .
Сплющивание и растяжение
В мире существует понятие «массы тела» — и когда объект движется, его масса остаётся неизменной. Когда мяч ударится о землю, он станет немного шире и сплющится, потому что во время физического контакта масса объекта перераспределяется.
Этот эффект наиболее полезен при создании физических объектов (например, люди, часы или подпрыгивающие мячи).
Несмотря на это, технику «сплющивания и расширения» можно использовать для создания ощущения наличия у элемента на странице физической массы. Даже небольшие изменения могут создать тонкий, но привлекающий взгляд эффект.
Ожидание
Движения не происходят внезапно. В обычной жизни любому действию предшествует некая подготовка, будь то замедляющийся перед падением со ступенек мяч или человек, сгибающий колени перед прыжком.
Этот эффект можно использовать для того, чтобы сделать движения объектов на веб-странице более реалистичными. Само ожидание может быть реализовано, к примеру, в качестве лёгкого покачивания, которое позволяет пользователям понять, что происходит и помогает им легче следить за перемещениями объекта по экрану.
Фокусировка
Этот эффект заключается в определении объекта в качестве фокуса сцены, в то время как остальные объекты освобождают место для главного действия. Для создания такого эффекта нужный объект соответствующим образом выдвигают на передний план или маскируют сопутствующие элементы, чтобы сфокусировать взгляд пользователя на том, что он должен увидеть.
В терминах веба это означает использование полупрозрачного затемнения для определённого контента. Наложение более тёмного слоя на существующую страницу и последующее размещение контента на переднем плане фокусирует на нём всё внимание пользователей.
Другой подход заключается в использовании движений. Когда на странице одновременно движутся несколько объектов, довольно трудно понять, на какой из них действительно стоит смотреть. Если в такой ситуации остановить все объекты, кроме одного «нужного», то все внимание автоматически будет приковано к нему.
Движение можно использовать и по-другому. Например, если пользователь работает с каким-нибудь документом, то небольшое подрагивание и мигание кнопки «Сохранить» может побудить человека нажать на неё. Когда на экране нет никакой активности, даже небольшое движение очень выделяется.
Движения «полный вперёд» и «пошаговое изменение»
Прямое движение характеризуется полной отрисовкой всех кадров анимации. В свою очередь, пошаговое изменение характеризуется созданием последовательности ключевых кадров, интервалы между которыми заполняются позднее, обычно с помощью вспомогательных средств.
Второй подход используется в большинстве веб-анимации: переходы между главными кадрами реализуются браузером, который интерполирует разницу между каждым из них и дорисовывает столько промежуточных кадров, сколько потребуется для того, чтобы сделать итоговую анимацию плавной.
Исключением является функция «Steps». При её использовании браузер «шагает» по заданному числу дискретных кадров. Таким способом можно создать последовательность изображений, а затем проиграть их в браузере по одному с помощью стиля «Straight Ahead Action».
Следование и захлёстывание
Не всегда действия происходят одновременно. Когда движущийся автомобиль резко тормозит, то с дымом покрышек «клюёт носом», а водитель внутри продолжает двигаться, пока не произойдёт окончательная остановка.
Этот эффект достигается с помощью движений следования и захлёстывания — они нужны, чтобы просигнализировать о том, что объект остановился. К примеру, элемент, помещенный в список может немного проехать нужное положение, а затем вернуться на правильную позицию.
Эффект захлёстывания создаётся с помощью придания объектам различного темпа движения. Этот подход используется при переходах в iOS — некоторые кнопки и элементы двигаются с разной скоростью, в результате перемещения становятся более реалистичными, чем они были бы в случае движения с одинаковой скоростью. Комбинирование движений даёт пользователю время на то, чтобы осознать происходящие изменения.
В вебе это обычно достигается комбинированием плавных переходов или CSS-анимацией с разной скоростью проигрывания.
Плавное ускорение и замедление
Объекты редко переходят мгновенно от состояния покоя сразу к максимальной скорости. Обычно на то, чтобы разогнаться им требуется какое-то время — так же, как и для того, чтобы остановиться. Без постепенного ускорения и замедления движения выглядят неестественно.
В терминологии CSS ускорение и замедление известно как easing или «функция плавности», которая описывает изменение скорости анимации.
Используя функции плавности можно создавать ускоряющиеся и замедляющиеся анимации и даже более сложные эффекты (с помощью функции cubic-bezier ).
Замедление и ускорение делает объекты более реалистичными, но есть и ещё один момент: в жизни они редко двигаются по прямой, как правило движение идёт по изогнутой дуге.
Добиться такого движения по дуге с помощью CSS можно парой разных способов. Один заключается в совмещении нескольких анимаций. К примеру, анимация подпрыгивающего мяча может быть сделана с помощью движений объекта вверх и вниз, и второе движение совмещено с передвижением ещё и вправо. Таким образом получится, что мячик скачет по экрану.
Второй способ — поворот элемента. С помощью изменения центра вращения и выноса его за пределы изначального объекта также можно сформировать дугу.
Второстепенное действие
Основное действие, происходящее на экране, можно подчеркнуть «второстепенной» анимацией. Это может быть движение рук человека при ходьбе или подрагивание его головы при каждом шаге. Или поднимающаяся с земли пыль при каждом ударе мяча.
В случае веб-сайтов вторичные элементы могут «разъезжаться», чтобы выделить то, на что пользователю действительно нужно обратить внимание (пример использования — перетягивание элемента для вставки в середину списка).
Время выполнения
С помощью манипуляции с длительностью анимации можно сделать так, чтобы крупные объекты казались тяжёлыми, а небольшие — лёгкими.
В вебе добиться этого можно простым изменением значений animation-duration и transition-duration .
С помощью изменения длительности анимации можно выделить её среди контента веб-страницы или во время взаимодействия с пользователем.
Преувеличение
Этот приём часто используется для привлечения внимания к определённым действиям и придании им большей драматичности в мультфильмах. Волк, который пытается кого-то укусить открывает рот гораздо шире, чем обычно — так гораздо страшнее и внушительнее.
На веб-странице объекты можно увеличивать и уменьшать, чтобы выделить их и привлечь внимание пользователя. Например, при заполнении формы активное поле имеет смысл сделать больше, а неактивные в данный момент, наоборот, уменьшить.
Объём
При работе с объёмными объектами необходимо учитывать правила перспективы — люди живут в трёхмерном мире, поэтому если что-то выглядит не так, как они ожидают, это кажется неправильным.
В современных браузерах есть хорошая поддержка трёхмерных трансформаций. Это значит, что разработчик может создать анимацию, которая будет поворачивать объекты и перемещать их по экрану, а уже сам браузер создаст плавные переходы между состояниями.
Привлекательность
В мире искусства внимание к деталям может создавать особую атмосферу — возникающую, например, при взгляде на картину. Точно также и в мире веба качественные и хорошо подобранные анимации позволяют сайту выглядеть более привлекательно и авторитетно. Больших успехов в подобной работе добилась, к примеру, команда сервиса Stripe .
Заключение
Использование принципов, описанных выше позволит веб-разработчикам создавать более качественные и приятно выглядящие анимации. Если анимация учитывает физический вес объекта, выделяет изменения, в ней используются вторичные движения, а ее время исполнения скрупулёзно рассчитано — то это значительно улучшит общее впечатление пользователей от страницы.
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Ограничение ответственности
Информация на сайте предоставляется «как есть», без всяких гарантий, включая гарантию применимости в определенных целях, коммерческой пригодности и т.п. В текстах могут быть технические неточности и ошибки. Автор не может гарантировать полноты, достоверности и актуальности всей информации, не несет ответственности за последствия использования сайта третьими лицами.
Автор не делает никаких заявлений, не дает никаких гарантий и оценок относительно того, что результаты, размещенные на сайте и описанные в заявлениях относительно будущих результатов, будут достигнуты.
Автор не несет ответственности за убытки, возникшие у пользователей или третьих лиц в результате использования ими сайта, включая упущенную выгоду.
Автор не несет ответственности за убытки, возникшие в результате действий пользователей, явно не соответствующих обычным правилам работы с информацией в сети Интернет.
Пользуясь сайтом, вы принимаете и соглашаетесь со всеми нашими правилами, включая «Ограничение ответственности».
Рекомендую
Время, где сейчас
До восхода не будить и при пожаре выносить в первую очередь, а после заката звонить только в экстренных случаях:
Рубрики
Отче наш
Отче наш, Иже еси́ на небесе́х! Да святи́тся имя Твое́, да прии́дет Ца́рствие Твое, да будет воля Твоя, я́ко на небеси́ и на земли́.
Хлеб наш насу́щный даждь нам днесь; и оста́ви нам до́лги наша, я́коже и мы оставля́ем должнико́м нашим; и не введи́ нас во искушение, но изба́ви нас от лука́ваго
Анимации в вебе — это сложно. Ограничения старых браузеров накладываются на слабые пользовательские устройства, плохой интернет и вспышки на солнце. При разработке нужно учитывать миллиард нюансов, для того чтобы всё заработало именно на устройстве пользователя.
Показать анимацию на экране пользователя можно несколькими методами.
Видео. Много весит и в нём сложно настроить бесшовное воспроизведение. Видео подходит для коротких анимаций, которые не перегружают сайт.
Недостатки этих методов ограничивают. Приходится выбирать: делать примитивную анимацию или добавить сложную и забыть о комфорте пользователей. Нас не устраивает ни один из этих вариантов.
Чтобы воплощать на сайтах все наши задумки, требовался новый инструмент, который снимет ограничения. О нём мы расскажем подробнее.
В одном из проектов мы использовали библиотеку Lottie от Airbnb. С ней можно переносить анимации на страницы браузера прямо из After Effects. Библиотека оказалась очень полезной, потому что мы как раз создавали сайт с многослойной анимацией для RBK.money.
С Lottie мы смогли добавлять на сайты сложные анимации и не думать о их размерах.
На главную страницу сайта RBK.money мы добавили зацикленный ролик длиной 15 секунд, который весит всего 65 КБ в сжатом состоянии. У нас получились плавные анимации, которые быстро загружаются и воспроизводятся без стыковок.
Преимущества Lottie — меньший вес и адаптивность. Библиотека работает с векторной отрисовкой. Это означает, что не придётся готовить отдельные изображения для экранов с разным разрешением.
В Lottie можно управлять анимацией — настроить воспроизведение при нажатии на триггер или интерактивную анимацию, которая следует за движением курсора.
Аниматор работает с привычными инструментами и экспортирует результат с помощью плагина в формат json. Разработчику остается только подключить этот json к сайту и настроить его воспроизведение.
Библиотека рендерит анимацию либо в svg, либо в canvas. У формата svg можно настраивать прозрачность, но он сильно загружает процессор из-за постоянной прорисовки html-контента страницы. Поэтому, когда мы добавили многослойные анимации на сайт RBK.money, кулеры наших компьютеров перешли в режим турбины. Пришлось переделать всё в canvas. В нём не настраивается прозрачность, зато нагрузка на процессор ниже.
Иногда Lottie преподносит неприятные сюрпризы. Особенно после обновлений, которые иногда нарушают работу готовых анимаций. Создатели Lottie быстро приходят на помощь и решают проблему вместе с пользователями.
Из-за разных языков программирования некоторые инструменты After Effects не работают с Lottie. Поэтому при создании анимаций на сайте RBK.money мы отказались от «паппетов» — инструментов для плавного движения анимации. Пришлось всё делать вручную и это заняло довольно много времени.
Мы сделали необычный и запоминающийся сайт с плавными анимациями. Анимации, сделанные в Lottie, не увеличили время загрузки страниц.
Читайте также: