Поиск по этому блогу

среда, 3 июля 2019 г.

Affter Effect анимация с помощью Lottie

Недавно пришлось столкнуться с такой штукой как работа с анимацией которая была экспортирована из Affter Effect. Она была красивая, все переливалось, но реализовать такое стандартными методами было просто нереально, но потом мне расказали про Lottie которая была создана AirBnb для своих нужд, но в дальнейшем выпущена в публичный доступ для всех желающих. Эта библиотека позволяет проигрывать анимации экспортированные как json файлы из Affter Effect буквально в пару строчек кода.

image

Это очень крутая штука и очень мощная, анимаций уже готовых в свободном доступе просто куча. Найти их можно на сайте lottiefiles.com. Для примера я взял один пример и решил его запустить в этом приложении. Анимация добавляется в проект в папку assets, и прописывается в дальнейшем в вашем layout файле, а в коде можно запускать уже настройки, такие на пример как проигрывание анимации сразу при старте приложения, или цикличное проигрывание без остановки, или на пример запуск по кнопке. Для примера мы сделаем элементарное приложение в котором будем по клику на вью запускать анимацию. Для начала нам нужно создать пустой проект, в котором добавим библиотеку Lottie.

app/build.gradle
    implementation 'com.airbnb.android:lottie:3.0.7'

Она нам нужна собсвенно для запуска анимации на нашем экране. Так же нам понадобится сама анимация, вы можете ее скачать или с самого сайта lottiefiles.com или же из моего Github проекта. Далее нам нужно положить ее в папку app/src/main/assets/ и прописать пару строк в main.xml файле.

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent" android:gravity="center">

    <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animationView"
            android:layout_width="200dp"
            android:layout_height="200dp"
            app:lottie_fileName="clapclap.json"/>

</LinearLayout>
Тут мы прописали LottieAnimationView и указали файл который мы будем проигрывать. Это можно сделать так же из кода, все настройки которые можно установить из xml так же доступны и из кода, по этому каждому как удобно будет.

MainActivity.kt
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        animationView.setOnClickListener {
            animationView.playAnimation()
        }
    }
}
В onCreate мы задали onClickListener вьюхе и проигрываем по клику на нее анимацию, собственно что еще нужно. Так же можно установить листенер на проигрывание анимации что бы знать когда она начала играть и когда закончилась, установить бесконечное проигрывание анимации, отменить проигрыш и собственно все. А что еще надо для счастья?

Исходники:
GitHub

Комментариев нет:

Отправить комментарий