Как выбрать подходящую схему внешнего динамического эффекта?

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

Во-первых, разум

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

2. Классификация

использование анимации

  1. Демонстрационная анимация, похожая на GIF или видео
  2. Интерактивная анимация: по инициативе пользователя

техника рисования

  1. Canvas
  2. div
  3. SVG

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

тип анимации

  1. Твин анимация
  2. Кадровая анимация последовательности
  3. Скелетная анимация
  4. SVG-анимация
  5. 3D анимация

измерение

  1. 2D
  2. 3D

3. Различия в технике рисования

Независимо от того, какой метод используется для создания анимации, есть только три формы, которые в конечном итоге отображаются на странице интерфейса: холст, div и SVG.

Сравнение функций

  • canvas
    • Высокая эффективность, хорошая производительность, высокая управляемость, может обрабатывать только растровые изображения, постоянное использование памяти
    • Зависит от разрешения
    • Обработчики событий не поддерживаются
    • Слабые возможности рендеринга текста
    • Возможность сохранения полученного изображения в формате .png или .jpg
    • Лучше всего подходит для игр с интенсивным использованием графики, где многие объекты часто перерисовываются.
  • SVG
    • Обработка векторной графики без искажений
    • Независимая от разрешения
    • Обработчик событий поддержки
    • Лучше всего подходит для приложений с большими областями рендеринга (например, Google Maps).
    • Высокая сложность замедляет рендеринг (любое приложение, чрезмерно использующее DOM, не работает быстро)
    • Не подходит для игровых приложений
  • div
    • Включая анимацию DOM, управляемую CSS, анимацию DOM, управляемую JS.
    • Больше подходит для простых анимаций с меньшим количеством чисел и меньшей сложностью.

разница в производительности

  • В общем: JS+Canvas > CSS + DOM > JS + DOM

Пример кода (интуитивный эффект)

  • Сравнение холста и svg:
    • Как правило, по мере увеличения размера экрана холст начинает ухудшаться, поскольку необходимо отрисовывать больше пикселей.
    • По мере увеличения количества объектов на экране SVG начнет ухудшаться, поскольку мы постоянно добавляем эти объекты в DOM.
    • Эти измерения не обязательно точны и обязательно будут различаться в зависимости от реализации и платформы, использования графики с полным аппаратным ускорением и скорости движка JavaScript.

В-четвертых, метод реализации анимации

Во front-end motion development первое, что нужно определить, это назначение анимации -> подтвердить тип анимации -> подтвердить технологию рисования -> подтвердить реализацию анимации.

Хотя существует всего три носителя (техники рисования) для окончательного представления анимации, способов достижения анимации много.Обсудите реализацию анимации с точки зрения типа анимации.:

  • Tween. Анимация Tween, включающая некоторые функции плавности (такие как:Часто используемые функции плавности)
    1. Реализация CSS (переход, анимация и т.д.)
    2. JS-реализация
  • Кадровая анимация последовательности
    1. Реализация CSS (анимация)
    2. Реализация JS+DOM
    3. Реализация JS+canvas
  • Скелетная анимация
    1. Как правило, такие инструменты, как Spine и DragonBones, используются для экспорта соответствующих изображений ресурсов и ресурсов конфигурации анимации JSON перед использованием.
  • SVG-анимация
    1. Определение графиков с использованием формата XML
    2. Вы можете использовать AI и другие инструменты редактирования SVG для создания изображений SVG, а затем взаимодействовать с существующими библиотеками, такими как anime.js, для создания анимации.
  • 3D анимация
    1. Управление DOM реализовано с помощью CSS 3D. (perspectiveсвойства и др.)
    2. WebGL для построения сцен (Three.js и т. д.)
    3. После того, как анимация 3D-модели создана с помощью Blender или Maya, ее можно экспортировать для использования.

Стратегии реализации, соответствующие перечисленным выше типам анимации, с точки зрения разработки могут быть следующими:

  1. реализовать это самостоятельно
  2. Выберите существующее колесо:
    • Библиотека анимации
    • игровой движок, движок рендеринга

реализовать это самостоятельно

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

Библиотека анимации

Здесь мы максимально собрали библиотеку онлайн-анимации и кратко представили ее информацию, а для космических задач начнем отдельную статью:Вероятно, самая полная коллекция интерфейсных библиотек динамических эффектов.

Игровой движок/движок рендеринга

Анимация разделена по размерам, а 3D-анимация обычно реализуется с использованием механизма рендеринга, такого как Three.js, или игрового движка. 2D-анимация также использует движок в некоторых сценах.

  • Общие игровые движки
    1. Cocos
    2. Egret
    3. LayaAir
    4. Phaser
  • Общие механизмы рендеринга
    1. Pixi.js(движок рендеринга 2D-анимации)
    2. Three.js(движок 3D-рендеринга)
    3. Babylon.js(движок 3D-рендеринга)

Какие игровые фреймворки есть сейчас можно посмотреть здесь:Игра / рендеринг кадра навигация

5. Основные решения для анимации

  • Твин анимация

    • Это относительно просто, обычно реализуется самостоятельно.
    • Tween.js(предоставляет некоторые общие функции смягчения)
    • Animate.css(Кроссбраузерная базовая библиотека анимации, решение для многих базовых анимаций.)

  • Кадровая анимация последовательности

    • Реализуйте сами (CSS, JS+canvs, JS+DOM)
    • SVGA
    • Lottie(После того, как AE делает анимацию, она экспортируется и используется через Bodymovin)
    • apng с библиотекой управления (например:apng-js)

  • Скелетная анимация

  • SVG-анимация

  • 3D анимация

    • Если вы выполняете манипуляции с DOM, вы можете использовать CSS 3D, чтобы реализовать это самостоятельно.
    • Three.js

  • Часто используемая библиотека анимации (применимая и мощная)

  • Распространенные движки рендеринга:

6. Основная схема анимации продукта

  • Netease Дада СтудияH5: Анимация кадра последовательности -> реализация каванов
  • Различные классы «одно зеркало до конца» H5: анимация кадра последовательности -> реализация холста

Справочная документация

  1. W3school--HTML 5 Canvas vs. SVG
  2. Исследование и сравнение фронтенд-анимационных технологий
  3. Эксперт по внешнему интерфейсу Alibaba Джин Бао (Чжу Сюнь) - Progressive Animation Solutions
  4. Параметры производительности Canvas и svg
Категории