Большинство из нас работали / сталкивались с Fabric.js при работе над проектом, который включает возиться с холстом. Это может быть перетаскивание простых фигур или определение на них анимации.
Давайте начнем с предмета из ткани. Вот как выглядит простой предмет из ткани.
Вышеупомянутый объект представляет собой тип прямоугольника ткани с различными свойствами, которые определяют способ визуализации объекта на холсте.
В строке 17 мы определяем анимацию с некоторыми значениями для этого прямоугольного объекта. Вот, как это выглядит после анимации.
Давайте посмотрим, как anime.js создает анимацию для различных объектов, в частности для функции временной шкалы. Потому что с помощью шкалы времени мы можем управлять анимацией более комфортно, как видео.
В приведенном выше фрагменте мы начинаем с определения типа анимации, здесь мы также определяем продолжительность всей анимации.
Здесь мы работаем с анимацией на временной шкале.
- После создания анимации мы можем добавлять к ним объекты или детей.
- Переменная
tl- это объект временной шкалы с набором различных свойств, таких как пауза, воспроизведение, перезапуск, текущее время и т. Д. С помощью этих свойств пользователь может управлять воспроизведением анимации.
В приведенном выше фрагменте кода показана простая анимация перевода, в которой объекты перемещаются слева направо.
Более детальную анимацию можно определить с помощью ключевых кадров, которые доступны в библиотеке anime.js.
Ключевые кадры - это массив объектов, которые определяют, как объект должен вести себя в данный момент времени.
- Каждый объект в ключевом кадре может иметь разные свойства, касающиеся положения, непрозрачности, масштаба, а также задержки анимации объекта.
Пример ключевого кадра будет выглядеть примерно так.
Теперь у нас есть базовое представление об анимации с использованием fabric.js и anime.js. В то время как anime.js больше подходит для видео, таких как анимация, fabric.js предназначен для работы с холстом и получения контроля над поведением объектов.
Теперь вопрос в том, как мы можем объединить их вместе, чтобы создать анимацию, используя временную шкалу из anime.js?
Нам нужна временная шкала, чтобы поддерживать все основные элементы управления, похожие на видео.
Это может быть достигнуто путем определения пользовательских свойств для объектов ткани. Например:
- Из первого фрагмента кода вы можете добавить свои собственные свойства к объекту rect с помощью
rect.setOptions({name:value}). - Мы можем использовать эти свойства для определения ключевых кадров на самом объекте ткани.
- У нас может быть что-то вроде свойства
_anim, которое содержит все ключевые кадры, составляющие анимацию этого объекта. Пример объекта с ключевыми кадрами анимации будет выглядеть так
Не только изображения / формы, вы даже можете добавлять видео как объекты ткани, это возможно с помощью fabric.util.createClass. Вы можете узнать больше об этом в документации по тканям.
Мы можем создать visualJson, используя такие разные объекты. VisualJson выглядит так
Мы можем использовать этот JSON для рендеринга объектов на холсте и воспроизведения анимации. Итак, вопрос в том, как мы анимируем свойства свойства _anim.
Мы можем начать с создания объекта временной шкалы, а затем для воспроизведения анимации нам нужны ключевые кадры, чтобы мы могли перебирать массив объектов и добавлять ключевые кадры к объекту временной шкалы. Простая реализация будет выглядеть так:
В приведенном выше фрагменте кода первая часть создает объект временной шкалы, а затем мы добавляем ключевые кадры объекта к объекту временной шкалы.
Каждый раз, когда объект обновляется, холст необходимо повторно отображать, чтобы учесть эти изменения. Благодаря этому мы можем воспроизводить visualJson как анимацию на холсте. Часть, связанная с загрузкой visualJson на холст, довольно проста и может быть достигнута с помощью loadFromJSON метода экземпляров холста ткани.
Обновление анимации:
До сих пор мы рассмотрели, как воспроизвести visualJson (массив объектов ткани) в качестве анимации.
Но что, если мы хотим обновить / создать анимацию или удалить существующие анимации / объекты? Как мы учитываем эти изменения?
Давайте попробуем спросить, что происходит с visualJson, когда мы выполняем любую из этих операций, не думая об объекте временной шкалы.
- Когда мы вносим изменения в сам объект ткани, объект временной шкалы не знает об этих изменениях, поскольку он уже был инициализирован.
- Чтобы любые изменения объекта анимации правильно отображались на холсте, необходимо повторно инициализировать объект временной шкалы. Это означает создание другого объекта шкалы времени с новыми объектами ткани и их
_animсвойствами. - Это может быть довольно педантичным, если с ним не справиться должным образом. Необходимо тщательно продумать дизайн, чтобы убедиться, что любые изменения, касающиеся объектов ткани, фиксируются.
Сочетание с видео:
В последней части этой статьи давайте посмотрим, как мы можем добавлять видео как объекты ткани и управлять ими вместе с другими анимациями.
Что касается видео, то нам нужно воспроизводить видео в зависимости от их задержки и продолжительности, т. е. на основе свойства currenTime объекта временной шкалы мы должны решить, какое видео воспроизводить и отображать на холсте. Вкл. пауза / воспроизведение / перезапуск временной шкалы, мы также должны синхронизировать это с видео.
Я надеюсь, что это поможет вам получить базовое представление о совместной работе fabric.js и anime.js, и это должно стать хорошей отправной точкой для принятия дизайнерских решений для сложных функций.
Я работал над довольно обширным проектом, который включает в себя работу с различными видами анимации с использованием Fabric.js, anime.js, React with Typescript. Итак, если у вас есть какие-либо вопросы / запросы, не стесняйтесь обращаться ко мне в моем Twitter. Я оставляю свой Twitter-дескриптор ниже.
Больше контента на plainenglish.io
