Android 动画之 Motion Editor / SVGA / Lottie

Android 动画 SVGA 、 Lottie 与 Motion Editor

目前在直播时，我们会看到很多非常 酷炫的动画，通常会使用 Lottie 或者 SVGA 格式输出。

Lottie 、 SVGA是对图片内容进行动画；

两种各有优劣，lottie包含图片会很大，但能够在mac上支持ae的图层颜色渐变（svga不支持）

(1) 相关的网站

• 用过的都说好，SVGA官网：https://svga.io/index.html

• 图片压缩网站：https://tinypng.com/

(2) 插件

• 插件下载地址：链接:https://pan.baidu.com/s/1fFDDABjR1Nrr6AZKK0a3Xw 密码:7frq

• 插件下载地址：https://svga.io/designer.html

(3)预览地址

• http://svga.io/svga-preview.html

(4)LottieFiles 丰富的动画（没有动画设计师的情况下使用）

• https://lottiefiles.com/

(5) AnimatedVectorDrawable （Android 自带的绘图工具）

• 自己设计 Path 路线
• 百度“矢量图绘制工具” 导出 SVG 图片在 导入 Android Studio

SVGA

集成

Android

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}


compile 'com.github.svga:SVGAPlayer-Android:2.0.0'

IOS

使用 CocoaPods 集成源码，将以下依赖：
pod 'SVGAPlayer'
添加至 Podfile 文件。
使用代码或 IB 添加 SVGAPlayer 至 View 中，具体方法参见：
https://github.com/svga/SVGAPlayer-iOS

问:

哪有那么简单，在制作过程中会有一大堆问题。比如合成多了 就会发生丢帧 重影，很多效果需要大量的PNG序列，然后要想一堆办法来减少PNG的大小。 还有些效果由于PNG过多 只能抽贞和缩小后再放大 挑剔的甲方又会找茬说清晰度和流畅度的问题 比如视频中的苹果 那么简单的一个弹出加星星点缀就用去了3M 有些客户需要制作15秒以及30秒动画效果 真的烦。 和他们解释又不听总是拿一些GIF图和视频参考来扯。他妈的30秒粒子效果能不超大小吗 SB客户。。。

答:

视频中的苹果动画用SVGA导出来只有几百K，但是效果跟AE中制作时没有什么区别。如果有一些动效加了很多效果可以先导出png序列，然后再把序列导入到AE，适当压缩抽帧后再导出SVGA，文件也会变得很小，但是展示效果却基本没有影响，你可以自己试试。当然，具体用哪种输出方案A:还得跟公司的开发对接、商量好。

Lottie

素材和资料网站

https://lottiefiles.com // LottieFiles 丰富的动画（没有动画设计师的情况下使用）

集成

implementation "com.airbnb.android:lottie:3.4.1"

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta6' //MotionLayout 会用到

简单使用

将准备好的素材（animation_lottie.json） 导入raw文件夹中，（公司设计师没有提供素材的话，去上面的网站找一个吧！） 

放入lottie_rawRes 属性中

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/imageLottie"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_marginBottom="185dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView4"
        app:lottie_rawRes="@raw/animation_lottie" />

在页面调用就可以了，就可开始播放了

imageLottie.setOnClickListener {
    imageLottie.playAnimation()
  
    //imageLottie.progress 控制进度
    //imageLottie.speed 控制速率
    
}

ps：下面会介绍一个，MotionLayout 与 lottie 的结合使用，使用手势控制 lottie

Android Motion Editor

是 Android Studio 4.0 出现的 可编辑的动画视图工具

可以对 MotionLayout 中的控件进行动画控制（很强大）

MotionLayout 是对图片（控件）整体进行动画；

效果可以参考大牛的 Demo ：https://github.com/longway777/MotionDemo

工具网站：

https://cubic-bezier.com // 在这个网站获取 需要的 差值参数

动画加减速的差值器

https://cubic-bezier.com // 在这个网站获取 需要的 差值参数

在 motionInterpolator 属性的中设置 cubic(0,1,1,0)

<Transition
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="@integer/duration3000"
    motion:motionInterpolator="cubic(0,1,1,0)"
    >

动态修改动画属性

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.layout_motion)
    val set = motionLayout.getConstraintSet(R.id.end)
    set.setRotation(R.id.text001,900f)
    motionLayout.updateState(R.id.end,set)
//  motionLayout.setConstraintSet(set)
    motionLayout.transitionToEnd() //动态触发过渡

}

图片之间的过度

介绍一个新控件 （constraintlayout:2.0.0 中新增的）

ImageFilterView （实现圆角矩形， 色温，饱和度 等等）

round 属性控制 圆角

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:id="@+id/image001"
    android:background="@color/colorAccent"
    app:srcCompat="@drawable/base1"
    app:altSrc="@drawable/base2"
    app:round="0.1dp"
    android:layout_width="100dp"
    android:layout_height="100dp"/>

MotionLayout 使用手势控制 Lottie 的简单示例

在布局文件中 : 加人 motionlayout_scene.xml

<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"
    app:layoutDescription="@xml/motionlayout_scene"
    tools:context=".BlankFragment">

motionlayout_scene.xml 文件

OnSwipe 手势控制

dragDirection 手势方向 - dragEnd 向右划

onTouchUp 手势抬起 - stop 抬起时动画也停止

<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>
   </KeyFrameSet>
    <OnSwipe 
        motion:dragDirection="dragEnd"
        motion:onTouchUp="stop" />
</Transition>

<ConstraintSet android:id="@+id/start">

</ConstraintSet>

<ConstraintSet android:id="@+id/end">
</ConstraintSet>
</MotionScene>

调用页面

motionLayout.setTransitionListener(object:MotionLayout.TransitionListener{
    override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {
    }
    override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int){
    }
    override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
        Log.d("onTransitionChange", "p1:$p1===p2:$p2===p3:$p3")
        //在这里监听 手势变化
        imageLottie.progress=p3
    }
    override fun onTransitionCompleted(p0: MotionLayout?, p1: Int){
        
    }
})

这样就可以在android 中通过手势的滑动 ，来控制 lottie 动画的进度了，也可以就此来发挥想象，去实现很多的用法，完成酷炫的动画需求啦~！！