Как сделать lottie анимацию
Как сделать lottie анимацию
Всегда приятно, когда в приложении присутствуют анимации, однако, создаются они непросто. Процесс преобразования анимации, созданной дизайнером, в платформозависимый код является утомительным и вместе с тем сопряженным с вероятностью возникновения ошибок. Lottie является мобильной библиотекой анимаций, созданной Airbnb для iOS и Android, которая разбирает анимации Adobe After Effects (экспортируются как JSON) и обрабатывает их при помощи нативных анимационных API-интерфейсов. С Lottie начинающий дизайнер может создавать и запускать красивые анимации без необходимости в инженере, который бы кропотливо воссоздавал их вручную. Поскольку библиотека опирается на формат JSON, анимации получаются очень маленькими, но зато они могут быть очень комплексными. Анимации можно воспроизводить. Кроме того, позволяется изменять их размер, зацикливать, замедлять и даже очищать в интерактивном режиме.
Так как интегрировать вычурные анимации, а также обновлять и поддерживать их стало теперь предельно просто, я решил использовать Lottie для создания анимаций в каждом из моих приложений. У Lottie имеется ряд функций, встроенных в API, с тем чтобы сделать эту библиотеку более универсальной и эффективной. Она поддерживает загрузку файлов JSON через интернет, обладает дополнительным механизмом кэширования, и, помимо этого, позволяет управлять анимациями с помощью жестов. Из этой статьи Вы узнаете, как при помощи анимационного фреймворка Lottie создавать красивые анимации для приложений iOS, Android и даже Xamarin.Forms!
Добавление красивых анимаций с помощью Lottie
Прежде чем браться за код, нам следует сперва создать анимацию. Функции Lottie используют формат JSON, экспортируемый из Adobe After Effects, и преобразует его в нативную анимацию. Сперва создайте анимацию в Adobe After Effects. Затем используйте плагин bodymovin для After Effects, с тем чтобы экспортировать анимацию в формате JSON. Это послужит в качестве резервного хранилища для анимаций, которые будут загружены Lottie из кода.
Теперь пришло время добавить анимацию в мобильные приложения. Lottie для Xamarin распространяется через NuGet. Чтобы использовать Lottie в приложениях просто добавьте соответствующую версию пакета Lottie — iOS, Android или Xamarin.Forms — в проект.
Android
Lottie поддерживает Jellybean (API 16) и выше. Проще всего использовать ее с LottieAnimationView:
Практика использования библиотеки lottie в мобильном приложении банка
В свое время Product Owner попросил подумать нас о создании эффективного процесса по внедрению анимации в наше приложение на android/ios. В то время мы делали задачу по предзаполнению заявки личными данными на кредитный продукт, и на ответ от сервера требовалось некоторое время, во время которого мы хотели показывать красивую анимацию загрузки.
Задача была понятна: дизайнер хотел нарисовать красиво, отдать исходники сразу на обе
платформы без допиливаний с его стороны, и чтобы это все не лагало на старых устройствах (да, мы ещё поддерживаем android 4.1).
Какие у меня были варианты для внедрения анимации:
После некоторых проведенных тестов с различными девайсами мы решили, что библиотеку надо внедрять, тем более, что ее возможности впечатляли. Особенно обрадовался дизайнер, теперь он мог делать практически любую анимацию в Adobe After Effects, и экспортировать в json файл несколькими кликами. Обрадовались и мы, но обо всем по порядку.
Lottie была придумана и реализована компанией Airbnb в ответ на растущий запрос в кроссплатформенной анимации, поэтому она одинаково (ну почти) работает на всех платформах. Сами разработчики утверждают, что их цель — реализовать максимальное количество функций After Effects, и в этом они преуспели. Сейчас внедрить Lottie анимацию так же просто, как и вставить картинку в ImageView.
Загрузка ресурсов
Поддерживается загрузка ресурсов из:
Кэширование анимации
Классно то, что все анимации, загруженные через res/raw или assets, сохраняются LRU кэшем, что позволяет не тратить попусту пользовательское время повторно на загрузку и парсинг анимации, так как в случае сложной анимации может потребоваться какое-то время. Что ещё круче, если вам нужно предварительно загрузить анимацию, а потом в следующем фрагменте отобразить анимацию мгновенно, вы можете воспользоваться кодом
Анимация закэшируется по ключу rawFile, и там, где вам нужно её будет реально использовать, она запустится почти мгновенно.
Управление прогрессом
Lottie позволяет устанавливать текущее состояние анимации через setProgress(. ). Это может пригодиться, если вы хотите анимировать состояние загрузки файла, позиции скролла, различных жестах и т.д. Я видел различные реализации на BottomSheets, PullToRefresh, CollapsingToolbarLayout.
Вот как можно использовать прогресс с AppBarLayout:
Зацикливание
Lottie поддерживает циклическое воспроизведение setRepeatMode() или setRepeatCount() не только целой анимации, но и любого фрагмента в пределах (0.0. 1.0). Это реализуется свойствами setMinFrame, setMaxFrame, setMinAndMaxFrame. Мы использовали это, чтобы не реализовывать 3 анимации для разных состояний загрузки файла: idle, progress, complete. Вот небольшой кусочек кода, который это решает:
Картинки
Одним из главных достоинств Lottie для нас стало то, что библиотека поддерживает вставку картинок прямо в анимацию. Причем, вы можете вставить как статичную картинку, так и динамическую, скачанную из интернета. Сейчас объясню как это работает.
В случае со статической картинкой все просто: дизайнер выгружает вам архив, где содержится json плюс сама картинка.
Вот этот img_0.png, это и есть картинка, которую вы должны положить в src/assets, и которая будет внутри анимации.
При динамической загрузке используется метод setImageAssetDelegate, в который вы должны передать bitmap. Мы предварительно загружаем картинку Glide-ом, поэтому на этапе открытия фрагмента с анимацией и картинкой все достается из кэша, поэтому всё довольно быстро. Вот код:
Производительность
Конечно, лучше не использовать много анимации на экранах, где пользователь проводит много времени, так как она требовательна к процессору. По нашим тестам, загрузка процессора на некоторых анимациях доходит до 20%. Поэтому идеальный кейс такой анимации — это интерактивные элементы, которые срабатывают один раз.
Если анимация на некоторых устройствах подтормаживает, иногда помогает
Однако разработчики рекомендуют использовать этот метод с осторожностью, так как разные телефоны по разному используют аппаратное ускорение, поэтому вместо ускорения вы можете получить обратный эффект.
Заключение
В целом, использование библиотеки Lottie существенно упрощает внедрение анимации в приложение.
Основные плюсы lottie, которые мы выделили:
Путешествие в мир анимации с Lottie-React-Native
Вы создаете умопомрачительную анимацию с помощью After Effects и намереваетесь явить ее миру. Один из способов воплотить задуманное — использовать ее в качестве экрана-заставки или компонента загрузчика в приложении. Но на вашем пути возникает небольшая проблема: Adobe не разрешает это сделать.
И тут на помощь приходит библиотека lottie-react-native, позволяющая отрисовывать анимации в приложении React Native. А самое главное преимущество состоит в том, что для начала работы достаточно лишь минимального объема кода.
На основе материала статьи вы научитесь интегрировать библиотеку lottie-react-native в свой проект. Наша конечная цель выглядит так:
С задачами определились — за дело!
Начальные этапы
Инициализация проекта
В текущем проекте используется Expo. Инициализируем приложение React Native, выполняя в терминале следующую команду:
Установка зависимостей
Этот этап подготовки пройден, и теперь нам нужны файлы активов.
Файлы активов
Вы можете воспользоваться собственной анимацией, экспортировав ее с помощью плагина Bodymovin. Но в данном руководстве мы поработаем с директорией Lottie Files. Она содержит множество бесплатной анимации, которую можно импортировать в проект. Нам интересны две из них: Lava Preloader и Switch Toggle.
Для получения этих активов скачиваем необходимые файлы в формате JSON:
Lottie: основы
В этом разделе вы узнаете об основных принципах этой технологии.
Простые анимации
Теперь осталось только отобразить этот компонент на экране. Для этого в App.js пишем код:
Объект статичен, поскольку его воспроизведение еще не задано. Приведем его в движение посредством свойства autoPlay :
Вот так все просто!
Анимации загрузчика
В этом разделе воспользуемся Coffee API для отображения данных на экране. В процессе их загрузки React Native займется отрисовкой анимации.
Создаем файл LoadingAnimation.js и для начала пишем в нем следующий код:
Далее добавляем к этому же файлу следующий код:
Отлично! Код работает. Далее научимся управлять другими свойствами анимации.
Управление скоростью
Скорость анимации увеличивается втрое.
Уменьшим скорость, установив отрицательное значение:
Обработка завершения анимации
Взаимодействие с анимацией
В этом разделе вы узнаете об императивном API Lottie, обеспечивающим более детальное управление активом.
Воспроизведение и пауза
Проинструктируем Lottie запускать анимацию при нажатии пальцем на графические объекты и приостанавливать ее при его поднятии.
Разберем данный код.
Переключатели
В этом разделе применим анимацию переключателя для перехода между состояниями “on” и “off”.
Наша задача — переключаться между этими кадрами в зависимости от состояния.
Выполнив эту часть задания, добавляем следующий код:
Весь код можно найти на GitHub.
Заключение
Если вы ищите простую в использовании библиотеку анимации, то Lottie отлично подойдет для вашего приложения. И конечно, вы оцените тот факт, что вам не нужно перестраивать анимации посредством кода, вследствие чего можно сосредоточиться на более важных частях проекта.
Blog /
Working With Lottie
How to add a Lottie animation in a web page
So you have a webpage or web app that you’d like to spruce up by taking advantage of the super small file size and resolution independent rendering enabled by the Lottie animation format. You may have got an animator to create a bespoke animation for you and exported it out from After Effects using the free LottieFiles for After Effects extension. Or you may have browsed through the 1000s of free Creative Commons licensed animations on the LottieFiles website and decided to use one of them. You may even have taken one of those animations and customised the animation to suit your needs and website using the free LottieFiles Editor.
You’ve got the Lottie or dotLottie format file. Let’s get started on adding it to your webpage. You can use this approach on any webpage, blog or platform that lets you edit HTML.
It’s a three step process.
1. Add the script tag to the LottieFiles web player component
LottieFiles maintains the web component that enables using our custom web component to easily add a Lottie player anywhere on your webpage. To add the web component, you need to grab the script URL to the player and add it to the section of your page HTML (or anywhere on the page).
2. Get the URL of the animation
There are a couple of ways to get the URL of the animation.
If you have made or downloaded a Lottie animation and would like to host it on your own website, upload the Lottie (dotLottie or JSON) file to your website using the media/file manager that you use and get its URL.
If you are using a community made animation on LottieFiles, we provide you a public link to the Lottie file that you can use.
Here’s where you can find the link for public Lottie animations.
3. Add the element pointing to the URL of the animation.
Once you have the URL, copy and paste the below code into your webpage or web app’s HTML where you would like it to appear. Replace the bit with the URL to your Lottie file. Make sure the Lottie URL appears inside double quotes as seen in the code below.
That’s it! Save and preview your page to see the animation.
Configuring the Player
The web component provides a bunch of options to refine and control how you would like the animation to appear on your page. You can use these options in addition to using the usual HTML styling options to control the appearance of the player.
The can be customized using the following attributes:
Background: Set the background color of the animation stage. Set it as transparent to let the player show through whatever is on the background of your page. This is a great default setting. You can set the background attribute to a valid HTML color attribute like “white” or a hexademical color value like “#FFFFFF” to set the background color.
A Lottie animation with it’s background color changed
Speed: Set the playback speed. 1 is the default speed as intended by the animator. You can have values smaller than 1 to slow it down. For example, a speed value of 0.5 will slow down the animation by half. Values greater than 1 can be used to speed up playback. For example, a value of 2 will play the animation at twice the speed. You can also use fractional values like 0.75 or 1.5 to tune the speed to your liking.
Loop: Adding this attribute makes the animation play forever by looping. Without this attribute, the animation will play once and stop.
Controls: Adding this attribute makes the player show start, stop, pause and a seeker bar. Use of this attribute depends on your intended use for the animation. If you are using the animation as a design element, you would probably want to skip this attribute to not show the controls.
Autoplay: Adding this attribute makes the animation start playing automatically as soon as it is loaded. If you do not specify this attribute, you will have to use Javascript to instruct the player to start playing when you would like it to play.
This is what the Lottie Web-Player looks like.
Customizing the appearance of the player
You can customize the look of the player to match your website’s style and design using CSS. In addition to the normal CSS techniques you already use, the player makes it easier by exposing CSS variables to customize specific aspects of the player.
The player exposes the following CSS variables, you can override them by placing the styles anywhere on your page:
—lottie-player-toolbar-height
This sets the toolbar height. The default value is 35px.
—lottie-player-toolbar-background-color
This sets the toolbar background color. The default value is transparent.
—lottie-player-toolbar-icon-color
This sets the toolbar icon color. The default value is #999.
—lottie-player-toolbar-icon-hover-color
This sets the toolbar icon hover color. The default value is #222.
—lottie-player-toolbar-icon-active-color
This sets the toolbar icon active color. The default value is #555.
—lottie-player-seeker-track-color
This sets the seeker track color. The default value is #CCC.
—lottie-player-seeker-thumb-color
This sets the seeker thumb color. The default value is rgba(0, 107, 120, 0.8).
For example, to change the seeker track and thumb color to orange colors:
See, the colors have been changed!
For more advanced features and documentation, checkout the Lottie Web-Player GitHub page.
Adding Interactivity to your animations
Other cool things you can do is add interactivity to your animations. Some interactivity possibilities that you can achieve with your Lottie animations are available for you here.
Time saver tip!
You can use our Lottie Web Player page to quickly generate the code for the player and customise it’s appearance.
Enter the URL to your Lottie file and play around with the options until it is looking exactly like how you would like it to appear. Then generate the code and copy the code into your website’s HTML!
Try it out for yourself and play around with our Lottie Web-Player.
Русские Блоги
Программист тоже хочет поменять анимацию Lottie? Да, это так!
Введение
Всем привет, это Chengxiang Ink Shadow!
Раньше я писал две статьи об основах Лотти. Если вы еще не знаете, вы можете сначала их прочитать.
Lottie очень проста в использовании, но с точки зрения обратной связи все еще есть некоторые проблемы. Как нам найти файл JSON с анимацией Lottie, подходящий для нашего стиля приложения, без сотрудничества с дизайнером?
Я тоже это представил раньше, есть одинLottieFiles На сайте представлено множество загруженных дизайнерами анимаций Lottie, а также эффекты предварительного просмотра.Когда мы их видим, мы можем загружать их и использовать, что очень удобно.
Хотя этот веб-сайт особенно удобен, иногда найденные анимации не соответствуют стилю нашего приложения или нашим субъективным потребностям.
Например, в этой анимации, если мы хотим сделать анимацию подарочной коробки на Рождество, мы считаем эту анимацию очень подходящей, но мы хотим изменить желтые ленты и звезды в анимации на красные. Как сделать? Можете ли вы положиться только на дизайнерскую даму?
Два, отредактируйте анимацию Лотти
2.1 Lottie-editor
Сначала я подумал, что цвета, используемые в анимации, должны быть записаны в JSON анимации Lottie, но когда вы на самом деле читаете файл JSON, вы не можете найти ничего вроде ARGB или других значений цвета, поэтому нет метода цель изменения анимации путем непосредственного изменения файла JSON.
Но это не важно, у нас есть инструменты, чтобы это изменить.
Сегодня я всем порекомендую редактор анимации Lottie:Lottie-editor。
Его исходный код открыт на Github, если вам интересно, вы можете посмотреть исходный код.
Проще говоря, Lottie-editor дает нам возможность редактировать готовые файлы Lottie JSON. Его можно редактировать для разных цветов в анимации, и он очень прост в использовании.
Перетащите файл JSON в редактор Lottie, каждый цветовой блок слева соответствует области цвета в текущей анимации, и мы можем изменить цвет. С первого взгляда вы получаете то, что видите. Наконец, мы можем загрузить нашу измененную анимацию в формате JSON и использовать ее напрямую.
2.2 Редактировать в LottieFiles
Сайт LottieFiles, учитывая вопрос быстрого редактирования, уже поддерживает Lottie-editor для редактирования анимации.
Нам просто нужно нажать на «в правом верхнем углу интерфейса предварительного просмотра анимации».Customize with Bodymovin Editor«, вы можете редактировать анимацию напрямую.
В-третьих, измените анимацию AEP
Обратите внимание, что анимация Lottie, поддерживающая загрузку файла AEP, имеет собственный уникальный логотип.
После получения исходного файла AE вы можете настроить его в соответствии с вашими потребностями. Если дизайнер не знаком с AE-анимацией, вы также можете позволить ей изучить процесс анимации других людей таким же образом.
Хорошо, если ты можешь редактировать анимацию Лотти самостоятельно, давай отредактируем ее сами. Если это не сработает, обними бедро мисс Сестры. 😁
Реагируйте на рост на фоне публичного аккаунта сегоднявзросление«, Я получу составленные мной учебные материалы, и я также могу ответить»Добавить группу』, Учись и развивайся вместе.