[移动开发]Lottie 以及可动画矢量图

1. 使用系统自带矢量图动画

? 1.1 Android 系统自带矢量绘图动画 AnimatedVectorDrawable，官网Api地址

AnimatedVectorDrawablehttps://developer.android.google.cn/reference/android/graphics/drawable/AnimatedVectorDrawable

? 1.2 需要 .svg 格式文件，绘图软件绘制导出，或者下载.svg 文件

? 1.3 Android studio 导入 .svg 文件，得到矢量图文件，例如 ic_my_vector.xml

  <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="240"
    android:viewportHeight="240">
    <path
        android:fillColor="#00000000"
        android:pathData="M66.28,60.75L170.22,60.75A8.03,8.03 0,0 1,178.25 68.78L178.25,172.22A8.03,8.03 0,0 1,170.22 180.25L66.28,180.25A8.03,8.03 0,0 1,58.25 172.22L58.25,68.78A8.03,8.03 0,0 1,66.28 60.75z"
        android:strokeWidth="7"
        android:strokeColor="#ed1e79" />
    <path
        android:fillColor="#00ff00"
        android:pathData="M125.41,96l98.4,66.51 -90,52L125.41,96m-3.61,-10.1A3.84,3.84 0,0 0,118 90l9.21,130a3.85,3.85 0,0 0,5.75 3.05l98.76,-57a3.84,3.84 0,0 0,0.23 -6.5l-108,-73a3.78,3.78 0,0 0,-2.14 -0.66Z" />
    <path
        android:fillColor="#0000ff"
        android:pathData="M89,102a50,50 0,1 1,-50 50,50.06 50.06,0 0,1 50,-50m0,-7a57,57 0,1 0,57 57A57,57 0,0 0,89 95Z" />
</vector>

? 1.4 根据官方文档，创建动画文件 my_animated_vector.xml，供布局文件调用

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="240"
            android:viewportHeight="240">
            <path
                android:name="square"
                android:fillColor="#00000000"
                android:pathData="M66.28,60.75L170.22,60.75A8.03,8.03 0,0 1,178.25 68.78L178.25,172.22A8.03,8.03 0,0 1,170.22 180.25L66.28,180.25A8.03,8.03 0,0 1,58.25 172.22L58.25,68.78A8.03,8.03 0,0 1,66.28 60.75z"
                android:strokeWidth="7"
                android:strokeColor="#ed1e79" />
            <path
                android:name="triangle"
                android:strokeWidth="7"
                android:strokeColor="#00ff00"
                android:fillColor="#00000000"
                android:pathData="M125.41,96l98.4,66.51 -90,52L125.41,96m-3.61,-10.1A3.84,3.84 0,0 0,118 90l9.21,130a3.85,3.85 0,0 0,5.75 3.05l98.76,-57a3.84,3.84 0,0 0,0.23 -6.5l-108,-73a3.78,3.78 0,0 0,-2.14 -0.66Z" />
            <path
                android:name="circle"
                android:strokeWidth="7"
                android:strokeColor="#0000ff"
                android:fillColor="#00000000"
                android:pathData="M89,102a50,50 0,1 1,-50 50,50.06 50.06,0 0,1 50,-50m0,-7a57,57 0,1 0,57 57A57,57 0,0 0,89 95Z" />
        </vector>
    </aapt:attr>

    <target android:name="square">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="2000"
                android:propertyName="trimPathEnd"
                android:valueFrom="1"
                android:valueTo="0" />
        </aapt:attr>
    </target>
    <target android:name="triangle">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="2000"
                android:propertyName="trimPathEnd"
                android:valueFrom="1"
                android:valueTo="0" />
        </aapt:attr>
    </target>
    <target android:name="circle">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="2000"
                android:propertyName="trimPathEnd"
                android:valueFrom="1"
                android:valueTo="0" />
        </aapt:attr>
    </target>
</animated-vector>

2. Lottie 矢量动画

? 2.1 Lottie 官方地址

Lottie 官方网站https://airbnb.design/lottie/

? 2.2 引用 Lottie Android Github 库

Lottie Githubhttps://github.com/airbnb/lottie-android

? 2.3 矢量图下载官网地址

LottieFiles 网址https://lottiefiles.com/featured

? 2.4 例如，在 LottieFiles 网站，下载示例动图文件 animation_with_lottie.json 文件，放入 res 文件夹中的 raw 文件夹中

? 2.5 在项目 build.gradle 文件中引入库

dependencies {
    def lottieVersion = '5.2.0'
    implementation "com.airbnb.android:lottie:$lottieVersion"
}

? 2.6 在布局文件中使用

3. Main 主页使用系统自带矢量图动画和 Lottie 动画

? 3.1 布局文件 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/material_dynamic_neutral20"
    app:layoutDescription="@xml/activity_main_scene"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.877"
        app:srcCompat="@drawable/my_animated_vector" />

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/imageViewLottie"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.203"
        app:lottie_rawRes="@raw/animation_with_lottie"
        tools:srcCompat="@tools:sample/avatars" />
</androidx.constraintlayout.motion.widget.MotionLayout>

? 3.2 自动生成动画场景文件 activity_main_scene.xml

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <KeyFrameSet />
        <OnSwipe
            motion:dragDirection="dragEnd"
            motion:onTouchUp="stop" />
    </Transition>
    <ConstraintSet android:id="@+id/start" />
    <ConstraintSet android:id="@+id/end" />
</MotionScene>

? 3.3 MainActivity.kt 中调用

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        animatedVectorDrawable()
        lottieAnimated()
    }

    //系统自带方式动画
    private fun animatedVectorDrawable() {
        val imageView = findViewById<ImageView>(R.id.imageView)
        imageView.setOnClickListener {
            (imageView.drawable as AnimatedVectorDrawable).start()
        }
    }

    // Lottie 方式动画
    private fun lottieAnimated() {
        val imageViewLottie = findViewById<LottieAnimationView>(R.id.imageViewLottie)
        imageViewLottie.setOnClickListener {
            imageViewLottie.playAnimation()
        }
        val motionLayout = findViewById<MotionLayout>(R.id.motionLayout)
        motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
            override fun onTransitionStarted(
                motionLayout: MotionLayout?, startId: Int, endId: Int
            ) {
            }

            override fun onTransitionChange(
                motionLayout: MotionLayout?, startId: Int, endId: Int, progress: Float
            ) {
                imageViewLottie.progress = progress
                // Log.i("MyTag",progress.toString())
            }

            override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {}

            override fun onTransitionTrigger(
                motionLayout: MotionLayout?, triggerId: Int, positive: Boolean, progress: Float
            ) {
            }
        })
    }
} 

4. 效果图

?