Поскольку я уделяю больше внимания тенденциям дизайна в веб-сфере, я давно слышал о проекте Lottie, но у меня никогда не было времени или возможности попробовать его. Недавно у меня наконец-то появилась возможность попробовать это и поделиться им здесь.
1. Знакомство с Лотти
Lottie — это библиотека анимации с открытым исходным кодом Airbnb, которая поддерживает такие платформы, как Web, Android, iOS и ReactNative, и может комбинировать AE и Bodymovin для быстрой реализации кроссплатформенной анимации.
На самом деле для обычных анимаций и простых анимаций достаточно использовать нативный код.сложная анимацияВместо этого давайте взглянем на несколько примеров анимации, реализованных Lottie:
2. Рисование анимации
Сначала покажите готовый эффект, эта анимация рисуется всего 5 минут!
Сначала откройте AE и создайте новую композицию со следующими параметрами:
Затем введите AE, вы увидите этот интерфейс по умолчанию:
Роль каждой области:
- Проекты: управление текущим проектом и предварительный просмотр некоторых параметров проекта.
- Ресурсы: все внешние ресурсы, такие как изображения, импортированные в AE, управляются здесь унифицированным образом.
- Слои: добавьте/отредактируйте ключевые кадры и свойства для каждого слоя здесь
- Временная шкала: здесь вы можете редактировать ключевые кадры и кривые анимации.
- Предварительный просмотр: анимация и редактирование окна предварительного просмотра/редактирования в реальном времени.
- Инструменты: набор различных инструментов, таких как текстовые инструменты, графические инструменты и т. д.
- Атрибуты: здесь отредактируйте атрибуты элемента.
Сначала выберите нашу только что созданную композицию, нажмите кнопку «Прямоугольник со скругленными углами» на панели инструментов и, удерживая клавишу Shift, нарисуйте прямоугольник в области предварительного просмотра.
Теперь нам нужно добавить к нему ключевые кадры, чтобы заставить его двигаться. Ключевой кадр в AE ничем не отличается от атрибута ключевого кадра в CSS, нам нужно только добавить атрибуты ключа к некоторым узлам во время его движения, этот элемент будет выполнять плавную трансформацию атрибутов ключа между двумя соседними ключевыми кадрами.
Прежде чем мы начнем, давайте проанализируем эффект анимации, который можно разделить на три части:
- Анимация смещения: возвратно-поступательное движение в направлении оси Y
- Анимация формы: назад и вперед между прямоугольником и кругом
- Цветовая анимация: резкие изменения синего и пурпурного цветов.
Хорошо, давайте сначала завершим анимацию смещения:
Сначала выберите наш слой, щелкните треугольник в левой части слоя, разверните параметры преобразования, выберите атрибут положения и переместите временную шкалу на 0:
Это самый важный шаг,Добавить ключевые кадры:
Сначала щелкните маленький значок часов слева от свойства положения в области слоев, чтобы начать запись ключевых кадров, как показано на рисунке:
Хорошо, теперь мы добавили все ключевые кадры смещения, снова нажмите пробел для предварительного просмотра, как показано на рисунке:
Щелкните правый верхний угол панели слоев, чтобы отобразить панель кривых, как показано на рисунке:
Удерживая ctrl, щелкните, чтобы выбрать путь нашей анимации, нажмите кнопку Convert to Bezier в правом нижнем углу.
Первая кривая, которую мы отредактировали, выглядит так:
Давайте перейдем к следующему шагу, добавив ключевые кадры для преобразования формы.
Сначала щелкните треугольник в левой части слоя, разверните параметры преобразования, а затем разверните: «Содержимое», «Прямоугольник», «Прямоугольник». Переместите ось времени на 0, установите свойство округлости на 0, щелкните маленький значок часов слева от округлости и начните запись ключевого кадра этого свойства.
Теперь последний шаг, преобразование цвета. Свойства цвета изменяются в содержимом, прямоугольнике и заливке панели слоев, а остальное такое же, как указано выше, за исключением того, что снова добавляется несколько ключевых кадров. Я полагаю, что вы, умные люди, уже изучили это, поэтому я не буду вдаваться в подробности здесь.
Окончательная кривая выглядит так:
3. Отрисовка анимации
Теперь, когда отрисовка анимации завершена, мы можем экспортировать нашу анимацию. Сначала нужно установить Бодимовин в АЕ, см.GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
После установки выберите плагин:
После экспорта файла создайте новый проект, переместите data.json в каталог проекта и установите необходимые зависимости.
Здесь мы используем Lottie React Binding, запускаемnpm install -S react react-dom react-lottie babel-core babel-plugin-transform-class-properties parcel-bundler.
Новый index.html:
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
Новый index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Lottie from 'react-lottie';
import * as animationData from './data.json'
class App extends React.Component {
state = {
isStopped: false,
isPaused: false
};
defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
renderer: 'canvas'
};
play = () => this.setState({isStopped: false, isPaused: false});
stop = () => this.setState({isStopped: true});
pause = () => this.setState({isPaused: !this.state.isPaused});
render() {
const buttonStyle = {
display: 'block',
margin: '10px auto'
};
return <div>
<Lottie
options={this.defaultOptions}
width={600}
isStopped={this.state.isStopped}
isPaused={this.state.isPaused}
/>
<button style={buttonStyle} onClick={this.stop}>停止</button>
<button style={buttonStyle} onClick={this.play}>播放</button>
<button style={buttonStyle} onClick={this.pause}>暂停</button>
</div>
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
затем бегиparcel ./index.html, Открой браузер, ты увидишь нашу анимацию, не правда ли, это очень круто~
В дополнение к возможности воспроизведения и паузы Lottie также предоставляет нам более совершенные методы управления анимацией и перехватчики событий.Заинтересованные партнеры могут обратиться к:GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
Весь исходный код и файлы проекта AE для этого руководства находятся на моем GitHub:Ху Цинъян (Hu Qingyang) · GitHubДобро пожаловать, чтобы обратить внимание, общаться, стрелять кирпичами,заниматься базой