Lottie-Front-end реализует динамические эффекты AE

Время чтения 10~15мин

Предыстория проекта

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

Последовательность кадров:

Эффект анимации:

Последовательность кадров:

кадр анимацииНедостатки и ограниченияОчевидно, что файл изображения составного спрайта имеет большой размер и может искажаться при разных разрешениях экрана. После исследований выяснилось, что Lottie — это простое, эффективное и высокопроизводительное решение для анимации.

Lottieэто библиотека, доступная для Android, iOS, Интернета и Windows черезBodymovinРазобратьAEАнимируйте и экспортируйте анимации, которые могут отображать анимацию на мобильных устройствах и в Интернете.JSON-файл. Другими словами, дизайнер использует AE для создания эффекта анимации, а затем использует Bodymovin для экспорта соответствующего файла json во внешний интерфейс, а внешний интерфейс может использовать библиотеку Lottie для достижения эффекта анимации.

Установка и использование плагина Bodymovin

близко АЭ
Загрузите и установите установщик ZXP.

AE scripts.com/learn/Чжан Сяопин-и…
Загрузите последнюю версию плагина bodymovin
GitHub.com/air не NB/Lott…
Перетащите загруженный файл bodymovin.zxp в установщик ZXP.
Откройте AE, в менюНастройки -> ОбщиеЗарегистрируйтесь: ballot_box_with_check: Разрешить скриптам записывать файлы и получать доступ к сети (иначе произойдет сбой при выводе файлов JSON)
Чтобы сделать анимацию в AE, откройте окно меню -> Развернуть -> Bodymovin, отметьте анимацию для вывода и задайте каталог выходного файла, нажмите кнопку рендеринга
Откройте выходной каталог, и вы увидите сгенерированный файл JSON. Если внешнее изображение импортировано в анимацию, изображение, указанное в JSON, будет сохранено в изображениях.

Внешний интерфейс с использованием лотереи

статический URL-адрес
CDN-acceleration.com/libraries/com…

NPM

npm install lottie-web

вызов loadAnimation

lottie.loadAnimation({
    container: element,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'data.json' 
});

vue-lottie

Вы также можете использовать lottie в vue

import lottie from '../lib/lottie';
import * as favAnmData from '../../raw/fav.json';

export default {
    props: {
        options: {
            type: Object,
            required: true
        },
        height: Number,
        width: Number,
    },

    data () {
        return {
            style: {
                width: this.width ? `${this.width}px` : '100%',
                height: this.height ? `${this.height}px` : '100%',
                overflow: 'hidden',
                margin: '0 auto'
            }
        }
    },

    mounted () {
        this.anim = lottie.loadAnimation({
                container: this.$refs.lavContainer,
                renderer: 'svg',
                loop: this.options.loop !== false,
                autoplay: this.options.autoplay !== false,
                animationData: favAnmData,
                assetsPath: this.options.assetsPath,
                rendererSettings: this.options.rendererSettings
            }
        );
        this.$emit('animCreated', this.anim)
    }
}

Параметр loadAnimation

container

HTML-элемент, используемый для рендеринга анимации. Убедитесь, что этот элемент уже существует при вызове loadAnimation.

renderer

Рендерер, необязательные значения: 'svg' (по умолчанию)/'canvas'/'html'. svg поддерживает большинство функций, но html имеет лучшую производительность и поддерживает 3D-слои.Список функций, поддерживаемых каждым значением параметра, находится здесь.

loop

Значение по умолчанию верно. Passable определенное количество раз для цикла

autoplay

Автовоспроизведение

path

Путь к JSON-файлу

animationData

Данные JSON, взаимоисключающие с путем

name

После передачи этого параметра на экземпляр анимации можно ссылаться позже через lottie.

rendererSettings

определенные настройки, которые могут быть переданы экземпляру рендерера,специально для просмотра

Анимационный монитор Лотти

Lottie предоставляет события для прослушивания выполнения анимации:

complete
loopComplete
enterFrame
segmentStart
config_ready (начальная настройка завершена)
data_ready (все данные анимации загружены)
DOMLoaded (элемент добавлен в узел DOM)
destroy

Вы можете использовать addEventListener для прослушивания событий

// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);

// 当前循环播放完成触发 
anm.addEventListener('loopComplete', anmComplete);
    
// 播放一帧动画的时候触发 
anm.addEventListener('enterFrame', enterFrame);

Контролируйте скорость воспроизведения и прогресс анимации

Anm.pause и anm.play можно использовать для приостановки и воспроизведения анимации, а вызов anm.stop остановит анимацию и вернет к первому кадру анимации.

Используйте anm.setSpeed(скорость) для настройки скорости анимации, в то время как anm.goToAndStop(value, isFrame) и anm.goToAndPlay могут управлять воспроизведением определенного количества кадров или в сочетании с anm.totalFrames для управления процентом выполнения, например as anm.totalFrames - 1 Перейти к последнему кадру.

anm.goToAndStop(anm.totalFrames - 1, 1);

Преимущество этого заключается в том, что связанные файлы JSON можно объединять, а переключением состояний анимации можно управлять с помощью anm.goToAndPlay. В следующем примере файл JSON содержит данные двух состояний анимации:

Ресурсы изображений

Ресурсы в файле JSON устанавливают ссылку на изображение:

Если вы хотите единообразно изменить путь к статическому ресурсу или установить для него абсолютный путь, вы можете передать параметр assetsPath при вызове loadAnimation:

lottie.loadAnimation({
    container: element,
    renderer: 'svg',
    path: 'data.json',
    assetsPath: 'URL’  // 静态资源绝对路径
});

Список поддерживаемых функций

Даже если файл JSON успешно выводится с помощью bodymovin (об ошибках не сообщается), будут ситуации, когда эффект движения будет не таким, как ожидалось.Например, это карта изображения, построенная в AE:

Но эффект рендеринга на странице такой:

Это связано с использованием неподдерживаемой функции Merge Paths.

Поэтому для дизайнеров создание анимации Lottie отличается от обычной анимации AE.ДокументацияЗаписывается список функций AE, поддерживаемых и выводимых Bodymovin.Перед созданием анимации вам необходимо связаться с дизайнером и подтвердить доступные функции AE в соответствии с платформой загрузки анимации.

Попробуйте проследить процесс проектирования в официальной документацииРуководство и совет:

Анимации упрощены. При создании анимации всегда делайте файл JSON как можно более кратким, например, максимально связывайте отношения родитель-потомок, дублирование одних и тех же ключевых кадров на аналогичных слоях добавит дополнительный код и старайтесь не использовать анимацию ключевых кадров пути, которая занимает самый просторный. Такие методы, как автоматическая визуализация трассировки, флаттер и т. д., могут сделать файлы JSON очень большими и требовательными к производительности.
Создайте слои формы. Преобразуйте ресурсы, такие как AI, EPS, SVG и PDF, в слои формы, иначе их нельзя будет нормально использовать в Lottie.После преобразования удалите ресурсы, чтобы предотвратить их экспорт в файлы JSON.
Установите размер. Размер композиции в AE можно установить любой, но необходимо следить за тем, чтобы при экспорте размер композиции и размер ресурса совпадали.
Экспрессии и спецэффекты не используются. В настоящее время Lottie не поддерживает его.
Обратите внимание на размер маски. Если вы используете альфа-маску, размер маски может иметь большое влияние на производительность. Старайтесь, чтобы размер маски был как можно меньше.
Отладка анимации. Если выходная анимация нарушена, отладьте, какие слои пошли не так, каждый раз экспортируя определенные слои. Затем отправьте задачу с файлом слоя, прикрепленным на github, и выберите способ восстановления слоя другими способами.
Режимы наложения и маски яркости не используются.
Стили слоя не добавляются.
Полноэкранная анимация. Установите размер экспорта больше, чем самый широкий экран, который вы хотите поддерживать.
Установить пустой объект. Если вы используете пустой объект, обязательно установите флажок «Видимый» и установите непрозрачность на 0%, иначе он не будет экспортирован в файл JSON.

Эффект предварительного просмотра

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

Способ 1: выходной HTML-файл предварительного просмотра

Установите файл для рендеринга перед рендерингом

Отметьте ☑️Демонстрационный вариант

Файл demo.html, который можно предварительно просмотреть, можно найти в каталоге выходных файлов.

Способ 2: Платформа обмена LottieFiles

Отправьте сгенерированный файл JSON на платформу LottieFiles, вы можете воспроизвести и приостановить эффект анимации сгенерированного файла, вы можете установить цвет слоя и скорость анимации или загрузить клиент предварительного просмотра лотереи для предварительного просмотра на iOS или Android.

Платформа LottieFiles также предоставляет множество онлайн-анимационных эффектов Lottie, которые можно использовать напрямую, загрузив файлы JSON.

интерактивный взлом

Недостатком Lottie является отсутствие соответствующего API для управления слоем анимации.Если вы хотите выполнить более детальную обработку анимации, вы можете работать только с узлами напрямую. Например, после воспроизведения анимации левого изображения и входа в состояние удивления, если вы хотите реализовать простой эффект управления слоем анимации правого изображения движением мыши:

Откройте панель отладки, и вы увидите, что lottie-web управляет анимацией с помощью свойства преобразования тега:

Когда элемент добавлен в узел DOM, найдите тег, которым вы хотите управлять, извлеките матричное значение его свойства преобразования и используйтеrematrixЗначение аналитической матрицы.

onIntroDone() {
    const Gs = this.refs.svg.querySelectorAll('svg > g > g > g');
    Gs.forEach((node, i) => {
        // 过滤需要修改的节点
        ...

        // 获取transform属性值
        const styleArr = node.getAttribute('transform').split(',');
        styleArr[0] = styleArr[0].replace('matrix(', '');
        styleArr[5] = styleArr[5].replace(')', '');
        const style = `matrix(${styleArr[0]}, ${styleArr[1]}, ${styleArr[2]}, ${styleArr[3]}, ${styleArr[4]},                     ${styleArr[5]})`;

        // 使用Rematrix解析
        const transform = Rematrix.parse(style);
        this.matrices.push({
            node,
            transform,
            prevTransform: transform
      });
    }
}

Следите за движением мыши и задайте новое значение свойства преобразования.

onMouseMove = (e) => {
    this.mouseCoords.x = e.clientX || e.pageX;
    this.mouseCoords.y = e.clientY || e.pageY;
      
    let x =  this.mouseCoords.x - (this.props.browser.width / 2);
    let y =  this.mouseCoords.y - (this.props.browser.height / 2);

    const diffX = (this.mouseCoords.prevX - x);
    const diffY = (this.mouseCoords.prevY - y);

    this.mouseCoords.prevX = x;
    this.mouseCoords.prevY = y;

    this.matrices.forEach((matrix, i) => {
        let translate = Rematrix.translate(diffX, diffY);
        const product = [matrix.prevTransform, translate].reduce(Rematrix.multiply);
        const css = `matrix(${product[0]}, ${product[1]}, ${product[4]}, ${product[5]}, ${product[12]}, ${product[13]})`;

        matrix.prevTransform = product;
        matrix.node.setAttribute('transform', css);
     })
  }

дальнейшая оптимизация

Посмотрите, как назвать слой **#id в AEформате, соответствующий идентификатор слоя сгенерированного SVG будет установлен наid**, названный **.classформат, соответствующий класс слоя будет установлен наclass**

Его действительно можно попробовать, как показано на рисунке ниже, поэтому этот метод может быстро найти слой анимации, с которым нужно работать, и еще больше упростить код:

резюме

Недостатком Lottie является то, что если не обращать внимания на спецификации в процессе производства AE-анимации, это приведет к большим файлам данных, потреблению памяти и проблемам с производительностью; официальные документы Lottie-web недостаточно детализированы, т.к. например, параметр assetsPath обнаруживается при просмотре исходного кода; открытый API недостаточно совершенен для очень гибкого управления слоями анимации.

Преимущества также очевидны: Lottie может помочь повысить эффективность разработки, упростить код, легко отлаживать и поддерживать, файлы ресурсов имеют небольшой размер, а выходные анимационные эффекты отличаются точностью, кросс-платформенность — распространены Android, iOS, Web и Windows.

В целом, ссылки Lottie могут заменить традиционные GIF и покадровые анимации, а предоставляемые свойства и методы можно гибко использовать для управления воспроизведением анимации, но следует уделить внимание стандартизации процесса проектирования и разработки для более эффективного завершения производства анимации. отладка.

Обратите внимание на общедоступный номер:【Сообщество IVWEB】, и продвигайте еженедельные журналы о бутиках технологий каждую неделю.

Сборник статей еженедельника:weekly
Командные проекты с открытым исходным кодом:Feflow