Lottie Animations : локальное подключение и воспроизведение по HOVER

Lottie — библиотека позволяющая воспроизводить анимацию сформированную в JSON файле.

Для детального ознакомления перейдите на официальный сайт Lottie.

Подключение анимации из сообщества или из персональной библиотеки Lottie — проблем не вызовет, но если вы задаётесь вопросом, как подключить Lottie локально, то тут не всё очевидно.

Как подключить

Для подключения на страницу нужно пройти через два шага:

1 — Подключить скрипт для воспроизведения
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.1/lottie.min.js"></script>
Вариант с локальным подключением скрипта
<script src="./js/lottie.min.js"></script>
2 — Подключить файл с заранее подготовленной анимацией

Для этого создайте блок куда будет вставлена ваша анимация — div, где в качестве ID укажите произвольное название (это нужно чтобы потом найти на странице этот блок). Также рекомендую сразу создать класс со стилем для этого блока, к примеру с названием containerAnimation.

<div id="animation-container" class="containerAnimation"></div>

Как использовать

Далее нужно написать несколько строк на Java Script.

<script>
var animationContainer = document.getElementById('animation-container');
var animation = bodymovin.loadAnimation({
    container: animationContainer,
    path: './anim_json/animation.json',
    renderer: 'svg',
    loop: false,
    autoplay: false
});
</script>

Расскажу детально, что происходит в этом коде.

Определяем переменную animationContainer к которой привязываем найденый элемент при помощи метода getElementById.

var animationContainer = document.getElementById('animation-container');

Далее определяем ещё одну переменную animation (для хранения опций воспроизведения) к которой привязываем функционал подключенной ранее библиотеки.

var animation = bodymovin.loadAnimation({...})

Теперь про опции:

  • container — опция для связи с контейнером (div), где будет анимация
  • path — путь к файлу с анимацией
  • renderer — формат для рендеринга анимации
  • loop — опция, где можно указать проигрывать по кругу (true) или проигрываеть один раз (false)
  • autoplay — автопроигрывание при запуске. true — да, false — нет

Как запустить по HOVER

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

Найти нужный объект

Определяем переменную animationContainer_hover и привязываем к ней наш элемент, за которым хотим следить.

var animationContainer_hover = document.getElementById('animation-container-hover');
Курсор над объектом — запускаем анимацию
animationContainer_hover.addEventListener('mouseenter', function() {
  animation.play();
});
Курсор не на объекте — останавливаем анимацию
animationContainer_hover.addEventListener('mouseleave', function() {
  animation.stop();
});
Блок полностью
<script>
var animationContainer_hover = document.getElementById('animation-container-hover');

animationContainer_hover.addEventListener('mouseenter', function() {
  animation.play();
});

animationContainer_hover.addEventListener('mouseleave', function() {
  animation.stop();
});
</script>

Демо-страница

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottie Animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.1/lottie.min.js"></script>
    <style>
        .containerAnimation {
            width: 178px;
            height: 178px;
        }

    </style>
</head>
<body>
    <div id="animation-container-hover">
        <div id="animation-container" class="containerAnimation"></div>
    </div>

    <script>
        var animationContainer = document.getElementById('animation-container');

        var animationContainer_hover = document.getElementById('animation-container-hover');
        
        var animation = bodymovin.loadAnimation({
            container: animationContainer,
            path: './anim_json/animation.json',
            renderer: 'svg',
            loop: false,
            autoplay: false
        });

        animationContainer_hover.addEventListener('mouseenter', function() {
            animation.play();
        });
        animationContainer_hover.addEventListener('mouseleave', function() {
            animation.stop();
        });
    </script>
</body>
</html>

Отличный рассказ от AirBnb

Время идёт и всё меняется, но люди как и прежде любят слушать интересные истории других людей.

Не так давно ребята из AirBnb выпустили ролик, который очень здорово демонстрирует продукт. История про людей и для людей!

Подготовка SVG изображений для разработки

SVG — векторный формат для описания изображений текстом

Создание

Ограничение рабочей области (Canvas)

Рабочая область основного контейнера не должна превышать 200 px

Преобразование форм и назначение цвета

Все линейные формы и текстовые слои следует преобразовывать в монолитные формы (<path>) используя Flatten selection.

Максимальная длина <path> не должна превышать 800 символов

Чтобы не терять цвета в проектах, следует использовать объединение векторных форм и назначать цвет на это обьединение. Это позволит менять форму без сброса цвета в проектах. В экспортированном SVG — объединение отображаться не будет.

Кнопка в Figma
Union с двумя формами внутри и две отдельных формы
Кнопка в Figma
Кнопка в Figma
Кнопка для монолитного преобразования в Figma

Экспорт

Масштаб и мета-информация

Важно следить за следующими моментами при экспортировании файлов нативными средствами или через плагины:

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

Наименование файлов

Все файлы называются с использованием букв латинского алфавита в нижнем регистре без использования специальных символов. Пробелы между словами заменяются на нижнее подчёркивание _ Связанные слова разделяются дефисом -

Примеры правильных наименований:

cat.svg
my-dog.svg
cat_and_dog.svg
big-dog_and_small-cat.svg

Пример правильно подготовленного SVG файла:

<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.17157 2 4.5 2.67157 4.5 3.5C4.5 4.32843 5.17157 5 6 5C6.82843 5 7.5 4.32843 7.5 3.5C7.5 2.67157 6.82843 2 6 2ZM3.5 3.5C3.5 2.11929 4.61929 1 6 1C7.38071 1 8.5 2.11929 8.5 3.5C8.5 4.88071 7.38071 6 6 6C4.61929 6 3.5 4.88071 3.5 3.5ZM3.04148 10H8.95852C8.72048 8.58114 7.4865 7.5 6 7.5C4.5135 7.5 3.27952 8.58114 3.04148 10ZM2 10.5C2 8.29086 3.79086 6.5 6 6.5C8.20914 6.5 10 8.29086 10 10.5C10 10.7761 9.77614 11 9.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z" fill="#07081B"/> </svg>

Важно

Запрещено использование фильтров (<filter>), символов (<symbol>), групп (<g>) и CSS стилей (<style>), масок (<mask>), а также внедрение растровых изображений (<image>).

Сильно детализированные векторные изображения — урон производительности.

Экспортированные файлы всегда следует проверять перед передачей в разработку или выгрузкой в репозиторий для избежания ошибок.

Дополнительно к ознакомлению

Long Vector Path

Vector Image Generation

Figma: как перенести проект в аккаунт организации

Figma предоставляет доступ к трём тарифным планам: Starter (бесплатный), Professional и Organization.

Кто-то пробует в Starter и позже обновляет до Professional, а кто-то сразу начинает с Organization. В любом случае достаточно частая ситуация, когда требуется из Starter или Professional перенести проект в Organization.

Сразу возникает вопрос «Как переместить проект в Organization?».

Figma не предоставляет пользователям такую возможность, но может помочь перенести проект (именно проект, а не команду).

Для того чтобы перенести проект вам потребуется:
  1. войдите в Figma
  2. выделите проект и нажмите правой кнопкой мыши, а затем нажмите на пункт Share в открывшимся меню
  3. скопируйте ссылку нажав на кнопку Copy link
  4. откройте блокнот и вставьте в него ссылку (чтобы не потерялась)
  5. нажмите на пространство команды уже в списке аккаунта Organization, затем скопируйте ссылку из строки браузера и также добавьте в блокнот
  6. напишите письмо (через форму на сайте) в поддержку Figma с просьбой помочь перенести проект, приложив ссылки на проект и команду в которую переносим. Не забудьте поставить в копию почту на которую оформлен аккаунт Organization
  7. зайдите в почту аккаунта Organization и напишите, что подтверждаете перенос

Через какое-то время прийдет письмо с ответом из поддержки с уточнением или положительным ответом.

Еще один важный момент: у команды в которой находиться проект для переноса, должна быть выставлена опция Can edit, иначе перенос невозможен.

Если вы всё правильно сделали, то перенос осуществят в течении суток.

Framer — Введение в продукт и рабочая среда

Этим видео я открываю курс по созданию прототипов с помощью Framer.

Вы научитесь создавать, как простые так и высокодетализированные прототипы, узнаете как работать с реальными данными, компонентами, кодом и презентацией

Создание 3D людей в реальном времени

MetaHuman Creator — это облачное приложение, предназначенное для цифрового создания человека в режиме реального времени.

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

Вы можете выбрать из примерно 30 причесок, которые используют волосы на основе прядей Unreal Engine, или карты для причесок для платформ нижнего уровня.

Существует также набор примеров одежды на выбор, а также 18 различных типов тела. Когда вы будете довольны моделью, вы можете загрузить ресурс через Quixel Bridge, полностью готовый к анимации и захвату движения в Unreal Engine. Вы также получите исходные данные в виде файла Maya, включая сетки, скелет, лицевой установки, элементы управления анимации и материалы.


Попытки создания высокодетализированных моделей были и ранее, правда не редактируемых: пример 2017 года, а вот пример из 2018.

Саймон Синек — Как выдающиеся лидеры вдохновляют действовать, 2009

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

Саймон Синек рассказывает на примере модели «Зачем, Как? Что?».

3D карты от Mapbox для своих проектов

Давно слежу за Mapbox и мне нравиться, что они делают и куда идут.

Недавно компания представила продвинутый функционал для использования в своих проектах 3D-ландшафтов. Стоит отметить, что это вторая версия данного функционала — WEB-SDK GL JS v2.

Теперь можно делать крутые пролёты над вулканами, делать инфографику с кусками реальных ландшафтов, выводить данные по городам на континентах и многое другое.

Помимо этого можно управлять временем суток.

Ребята из Mapbox провели огромную работу по оптимизации потребления ресурсов и добились отличных результатов.

Подробнее можно почитать тут.