欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android 动画之 Motion Editor / SVGA / Lottie

程序员文章站 2022-06-08 12:08:45
...

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 // 在这个网站获取 需要的 差值参数
Android 动画之 Motion Editor / SVGA / Lottie

动画加减速的差值器

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 动画的进度了,也可以就此来发挥想象,去实现很多的用法,完成酷炫的动画需求啦~!!