Фронтенд исследование анимации

внешний интерфейс WebGL

анимационные исследования

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

Демонстрационная анимация:

Интерактивная анимация (на экране виден небольшой жест):

1. Показать анимацию VS интерактивная анимация

Существует много способов реализовать анимацию отображения в реальных сценариях использования, например, с помощьюgif图,canvas,css3Анимация и т.д., но конечный результат вывода не интерактивен, то есть от начального состояния анимации до конечного состояния за один проход пользователь может воспринимать этот процесс, но не может участвовать. Для интерактивных анимаций мы можем запускать соответствующие операции в определенный момент времени воспроизведения анимации, а затем позволять пользователям участвовать в ней.Наиболее распространенным примером является дождь в красных конвертах или анимация нашего футбольного чемпионата мира, которая может не только улучшить Пользовательский опыт также может увеличить разнообразие наших продуктов. Однако проблема, с которой часто сталкивается интерактивная анимация, заключается в том, что реализовать интерактивную анимацию с помощью собственного кода очень сложно. В то же время производительность и совместимость — это вопросы, которые необходимо серьезно учитывать. Лучшим решением является поиск связанных фреймворков.

2. Технология, используемая в анимации

  • CSS3 Animation
  • canvas
  • SVG
  • WebGL
  • Используйте анимацию на основе JavaScript

С развитием CSS3 использование CSS3transformи анимированные@keyframesМожно сделать много крутых анимаций, но сценарии применения анимаций CSS3 — это только анимации отображения.Пока анимация запускается, мы не можем контролировать состояние анимации, а для сложных анимаций CSS3 очень бессилен. Для анимаций, управляемых JavaScript, эти недостатки могут быть в определенной степени компенсированы, например:anime.jsПовысилсяtimelineКонцепция через цепочку выполнения каждой части анимации, чтобы завершить более сложную анимацию, в то же время функции обратного вызова, предоставляемые на каждом этапе выполнения анимации, также могут позволить нам контролировать состояние выполнения анимации. более удобно, предоставляя возможность для взаимодействия. дляcanvas,существуетcanvasГрафика, нарисованная наDOM 事件,ТолькоcanvasСам тег поддерживает прослушивание событий DOM. Поэтому необходимоcanvas 容器Событие обрабатывается для реализации мониторинга и обработки соответствующего события.WebGLвозможноcanvasпредоставить оборудованиеGPUУскоряет рендеринг, используя системный графический процессор для более плавного отображения анимации на мобильных устройствах.

3. Совместимость родственных технологий

  • дляCSS3的animation, совместимость следующая:
  • canvasСовместимость следующая:
  • WebGLСовместимость следующая:

Можно видеть, что анимация CSS3 и поддержка холста относительно хороши, только WebGL вообще не поддерживается в браузере Android 4.4, позже мы упомянем библиотеку PixiJs, которая может быть отображена с помощью WebGL или изящно понижена с помощью рендеринга холста.

4. Несколько существующих схем

1. AE + bodymovin + Lottie

Применимая сцена: в основном анимация дисплея

Введение: черезAE 上的 Bodymovin 插件Экспортируйте анимацию, сделанную в AE, в файл json, черезLottieправильноJSONразбор и, наконец,SVG/canvas/htmlспособ рендеринга анимации.

Официальная документация:airbnb.io/lottie/репозиторий кода:код спрей.IO/коллекция/…

преимущество:

  • Кросс-платформенный, один раз нарисуйте, один раз конвертируйте, работайте везде
  • Файл меньше, экспортируйте AEJSON, наконец черезlottieвизуализировать какcanvas/svg/html格式
  • Некоторыми свойствами анимации можно управлять через API, например, скоростью анимации; добавьте функции обратного вызова для каждого состояния анимации.
  • анимация вAfter EffectsСоздано, используйтеBodymovinЭкспорт и рендеринг без дополнительной инженерной работы.
  • Повысьте производительность интерфейсных инженеров и улучшите свободу дизайнеров для создания динамических эффектов.

недостаток:

  • BodymovinПлагин нуждается в доработке, и все еще есть некоторые эффекты AE, которые не могут быть успешно экспортированы.
  • Поддержка взаимодействия не очень хорошая, больше используется для отображения анимации
  • LottieправильноjsonПоддержка файлов нуждается в улучшении, и некоторые из них могут быть успешно экспортированы вjsonЭффект файла плохо отображается на мобильном
  • Многие эффекты AE не поддерживаютсяПросмотр поддерживаемых функций: Поддерживаемые функции

2. Anime.js

Применимые сценарии: сильное отображение + слабая интерактивная анимация

Введение: Anime.js — это легкая библиотека анимации на основе js, основными функциями которой являются: - Поддержка ключевых кадров, подключение нескольких анимаций - Поддержка Timeline, которая дает возможность реализовать более сложную анимацию - Поддержка управления воспроизведением состояния анимации, воспроизведения, паузы, перезапуска, поиска анимации или временной шкалы. - Поддержка обратного вызова состояния анимации, предоставление функции обратного вызова при запуске, выполнении и завершении анимации. - Поддержка SVG-анимации - Можно настроить кривую Безье - Любое свойство DOM, содержащее числовое значение, может быть анимировано.

Гитхаб:GitHub.com/Amazing позволяет вам…репозиторий кода:код спрей.IO/коллекция/…Демонстрация документации:animecharacter.com/document АТИ…

Функции:

  • В некоторой степени,anime.jsтакжеCSS3动画库, что относится ко всемCSS属性, и понял@keyframesУдобнее реализовать покадровую анимацию, заменив сложный метод определения CSS3.使用对象数组的形式定义每一帧 Тыкни меня: экземпляр ключевых кадров

    anime({
    targets: 'div',
    translateX: [
        { value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧
        { value: 0, duration: 1000, delay: 500, elasticity: 0 }    //第二帧
    ]
})  //这个例子实现了目标元素在两帧中实现水平位移

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

    var myTimeline = anime.timeline();
//通过.add()方法添加动画
myTimeline
.add({
    targets: '.square',
    translateX: 250
})
.add({
    targets: '.circle',
    translateX: 250
})
.add({
    targets: '.triangle',
    translateX: 250
});

  • Управление воспроизведением анимации, общие из них: пауза, повтор, продолжение, отслеживание состояния анимации, автоматическое воспроизведение, время цикла, эффект дрожания.Тыкни меня: экземпляр элементов управления воспроизведением

  • Функции обратного вызова предоставляются для анимаций, которые выполняются в начале, во время или по завершении анимации или временной шкалы.Тыкни меня: экземпляр обратного вызова

    var myAnimation = anime({
    targets: '#begin .el',
    translateX: 250,
    delay: 1000,

    begin: function(anim) {   //        callback
        console.log(anim.began); //     true after 1000ms
    }
});

  • служба поддержкиpromise, после окончания анимации вызовитеanime.finisheд вернетpromise对象.Тыкни меня: Обещай экземпляр

  • служба поддержкиsvgпуть рисования, в настоящее время не поддерживаетсяcanvas绘制 Ткните меня: пример SVG

  • дляinputТаким образом, метки элементов с числовыми значениями также могут быть переданы черезanime实例оживлятьТкните меня: экземпляр DOM ATTRIBUTES 

    anime({
    targets: input,
    value: 1000, // Animate the input value to 1000
    round: 1 // Remove decimals by rounding the value
});

преимущество:

  • Очевидно,anime.jsне только понялCSS3动画Глубокая инкапсуляция, более того, заключается в реализации анимации состояния операции через js-драйвер,timelineРеализовано управление несколькими анимациями ветвей, что дает возможность реализовывать более сложные анимации.
  • пройти черезanime.jsкоторый предоставилplayback controlsа такжеcallback, а дляpromiseПоддержка , позволяет нам иметь место для простого взаимодействия с анимацией.
  • Хотя не поддерживаетсяcanvas, но поддерживаетsvg绘制路径, я мало что знаю о svg, и я сделаю дополнение после того, как я подробно изучу позже.
  • Совместимость с браузером лучше,Android 4Все вышеперечисленное поддерживается

Недостатки и недостатки:

  • anime.jsГрамотно делать анимацию отображения.В интерактивной анимации вам все равно нужно наблюдать за сценой.Это больше подходит для небольших интерактивных анимаций, подобных сильному взаимодействию при игре в футбол путем прикосновения к экрану.anime.jsЭто не очень выгодно.

3. PixiJs

Применимая сцена: интерактивная анимация, анимационные игры

Введение: PixiJS — это механизм 2D-рендеринга, и Pixi в основном отвечает за рендеринг изображений. Богатая интерактивная графика, анимация и игры могут быть созданы без необходимости углубляться в WebGL API или решать проблемы совместимости браузеров и устройств. Между тем, PixiJS имеет полную поддержку WebGL с плавным переходом на холст HTML5, если это необходимо. PixiJs использует WebGL для рендеринга по умолчанию. Вы также можете указать холст для рендеринга. WebGL не поддерживается в мобильных браузерах Android 4.4, но его можно изящно уменьшить с помощью холста.

Github: GitHub.com/Professor Pi Department/Pixi…Официальная документация:Профессор кафедры кожи.download/release/doc…Официальный сайт:www.pixijs.com/Примеры:Профессор Пи Департамент.IO/examples/#/…

Особенности (из официальной документации):

  • служба поддержкиWebGL渲染
  • служба поддержкиcanvas 渲染(Официально PixiJS теперь самый быстрый в рендеринге холста)
  • очень прост в использованииAPI
  • Богатые интерактивные события, такие как события полной мыши и мобильного касания.
  • Pixiиспользовать иCanvas DrawingПочти идентичный API, но другойCanvasAPI для рисования, графика, нарисованная с помощью Pixi, выполняется черезWebGLсуществуетGPUвизуализировать на
  • Есть также ряд функций, которые необходимо понять после изучения PixiJs.

Преимущество:

  • Самое большое преимущество - пройтиWebGLвызывать GPU для рендеринга анимации, что значительно повышает производительность
  • Не требует глубоких знанийWebGL APIили浏览器兼容性(по следующей причине)
  • служба поддержкиcanvasРезервный вариант, не поддерживаемый текущим устройствомWebGLчас,PixiJsБудет использованоcanvas渲染анимация
  • полныйDOCS, более активное сообщество, способствующее углубленному обучению. Однако я считаю, что стоимость обучения PixiJ относительно высока.

недостаток:

  • Во-первых, это проблема совместимости, WebGL находится в разработке.Android 4.4Он не поддерживается и может быть понижен только с помощью холста.
  • Pixi в основном отвечает за отрисовку экрана, и многие другие разработчики функций должны писать или использовать его с другими библиотеками, но, согласно текущей точке зрения, это соответствует нашим потребностям.

представление:

  • Для мобильной версииAndroid4.4Вышеупомянутые мобильные телефоны, в дополнение к недостатку производительности, вызванному уровнем кода, вызывают рендеринг GPU через WebGL, и производительность по-прежнему гарантируется. Однако для Android 4.4 можно использовать только отрисовку холста, а производительность по-прежнему зависит от сложности анимации и оптимизации кода.

V. Резюме

Для различных нужд анимации я собрал три библиотеки анимации в разных сценариях. Для анимации отображения мы можем использовать первую схему, пусть студенты-дизайнеры предоставят анимацию, мы используем экспортированную анимациюJSON, возвращает анимацию кsvg/canvas/html. Если сцена интерактивная или вам нужно сделать небольшую игру, вы можете использовать третье решениеPixiJs,пройти черезWebGLДля рендеринга использовать аппаратные ресурсы, значительно повысить производительность, в плане совместимости, для тех, кто не поддерживаетWebGLбраузер, вы можете использоватьcanvas渲染Приходить平稳回退. Последний сценарий — слабое взаимодействие и сильное отображение.В этом сценарии пользователь часто нажимает, чтобы приостановить выполнение соответствующей операции, и продолжает воспроизводить анимацию после завершения операции.交互方面比较偏弱, в этом сценарии можно использовать вторую схемуAnime.js, Anime.js не только поддерживает все свойства css, но также контролирует различные состояния выполнения анимации с помощью временной шкалы, обратного вызова и элементов управления воспроизведением. И совместимость отвечает нашим потребностям с точки зрения производительности, если она не вызывает слишком много页面回流, используйте преобразование, чтобы больше работать с составным слоем, и производительность по-прежнему в порядке (чтобы попробовать больше, производительность по-прежнему хороша из нескольких примеров, которые я видел). Наконец, проанализировав с точки зрения спроса, сделайте простой небольшой рейтинг по стоимости обучения:PixiJs > Anime.js > lottie

6. Справочник по анализу производительности анимации

7. Справочные ссылки

Категории