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 动画的进度了,也可以就此来发挥想象,去实现很多的用法,完成酷炫的动画需求啦~!!
上一篇: 如何做一个“有态度”的自媒体?
下一篇: 做运营的终极之路:搞不定老板只有走人