开始
Gradle是唯一支持Lottie构建的方式,因此尝试添加如下依赖在project的build.gradle文件中:
dependencies {
...
implementation "com.airbnb.android:lottie:$lottieVersion"
...
}
Lottie最新版本请自行查阅.
Lottie不一样的使用请自行查阅.
示例程序
你可以从Play Store下载示例程序来进行build,示例程序包括一些内置动画,但也允许您从内部存储或从URL加载动画。
核心类
- LottieAnimationView继承ImageView,这个类是使用Lottie动画最简单和默认的方式.
- LottieDrawable:拥有和LottieAnimationView大部分一样的API,你可以在任何所需的View上使用它.
Loading an Animation
Lottie支持API 16及其以上版本
Lottie animations能够加载动画从:
- A json animation in
src/main/res/raw
. - A json file in
src/main/assets
. - A zip file in
src/main/assets
. See images docs for more info. - A url to a json or zip file.
- A json string. The source can be from anything including your own network stack.
- An InputStream to either a json file or a zip file.
From XML
最简单的使用方式是LottieAnimationView:
建议使用lottie_rawRes,因为您可以通过R使用对动画的静态引用,而不是仅使用字符串名称。
From res/raw (lottie_rawRes) or assets/ (lottie_fileName)
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_rawRes="@raw/hello_world"
// or
app:lottie_fileName="hello_world.json"
// Loop indefinitely
app:lottie_loop="true"
// Start playing as soon as the animation is loaded
app:lottie_autoPlay="true" />
你也可以调用Lottie的 LottieAnimationView的API直接使用动画,更多API可以直接查看相关类.
缓存动画
所有Lottie动画默认使用LRU cache缓存模式,默认的缓存的key为加载动画时根据res/raw/ 或者 assets/创建,其他的API要求设置cache key,如果您并行激发同一动画的多个动画请求(例如RecyclerView中的条目),则后续请求将加入现有任务,因此它只会被解析一次(Lottie> = 2.6.0).
Animation Listeners
你可以控制动画的执行或者是添加监听器.
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
// Do something.
}
...
animationView.setProgress(0.5f);
...
在更新监听器回调中:animation.getAnimatedValue()无论当前设置的最小/最大帧[0,1]如何,都将返回动画的进度。
animation.getAnimatedFraction():将返回动画的进度,同时考虑设置的最小/最大帧[minFrame,maxFrame]。
Custom animators
尽管playAnimation()足以满足绝大多数用例的需要,但您可以在自己的动画更新回调中调用setProgress(...),这可以将动画与手势,下载进度或滚动位置联系起来。
// Custom animation speed or duration.
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
animator.addUpdateListener(animation -> {
animationView.setProgress(animation.getAnimatedValue());
});
animator.start();
Looping
Lottie支持镜像ValueAnimator的高级循环功能.因此,您可以像在ValueAnimator上一样调用setRepeatMode(...)或setRepeatCount(...)您还可以使用lottie_loop =“true”从xml启用循环.
Animation Size (px vs dp)
Lottie将After Effects中的所有px值转换为设备上的dps,以便在设备上以相同的大小呈现所有内容.这意味着它不是在After Effects中制作1920x1080的动画,而是在After Effects中更像411x731px,它大致对应于当今大多数手机的dp屏幕尺寸。
但是,如果您的动画不是完美尺寸,则有两种选择:
ImageView ScaleType
LottieAnimationView就像是一个包装的ImageView,它支持centerCrop和centerInside,因此你可以使用它在任何地方就好像使用imageView一样.
Scaling Up/Down
LottieAnimationView和LottieDrawable均有setScale(float)这个方法,它可以让你手动的去放缩你的动画,这很少有用,但在某些情况下有用。
如果你的动画执行速度较慢,请务必检查文档
但是,请尝试使用scaleType缩放动画。 这将减少Lottie每帧渲染的数量。 如果你有大的遮罩或面具,这将特别有用。
Play Animation Segments
通常播放和循环单个部分的动画是非常简单的,例如,动画的前半部分可能处于“开启”状态,下半部分处于“关闭”状态。
LottieAnimationView 和 LottieDrawable有如下方法:
setMinFrame(...)
setMaxFrame(...)
setMinProgress(...)
setMaxProgress(...)
setMinAndMaxFrame(...)
setMinAndMaxProgress(...)
Hardware Acceleration
Merge Paths
仅在Android 4.4及更高版本上支持路径合并,使用它们还有一些性能开销,因为Path.Op可能很慢,为了防止工程师在启用路径合并的新设备上进行测试,同时向旧手机上的用户发送破坏的体验,默认情况下会禁用它们,如果您的minSdk> = 19,则可以使用enableMergePathsForKitKatAndAbove()启用.
Basic WorkFlow
Static Asset Workflow
在你的布局中引入png或者vector drawables (xml) in res/drawable:
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawble/your_drawable" />
Lottie workflow
在你的布局中引入Lottie json in res/raw:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:lottie_rawRes="@raw/your_animation"
app:lottie_loop="true"
app:lottie_autoPlay="true" />
LottieAnimationView继承自ImageView,因此你可以很方便的使用LottieAnimationView替代ImageView,尽管你在使用drawables.
Updating Properties Dynamically
Lottie 2.5.0+以后,你可以在运行中动态更新属性,这可以用作各种目的,例如:
- 主题 (白天和夜晚或者其他主题)
- 事件响应(成功或者失败)
- 以动画的单个部分响应一个事件
- 响应视图大小或在设计时未知的其他值
Understanding After Effects
要了解如何在Lottie中更改动画属性,首先应该了解动画属性如何存储在Lottie中。 动画属性存储在模拟After Effects信息层次结构的数据树中。 在After Effects中,合成是一组图层,每个图层都有自己的时间轴。 图层对象具有字符串名称,其内容可以是图像,形状图层,填充,笔划或任何可绘制的内容。 After Effects中的每个对象都有一个名称。 Lottie可以使用KeyPath通过名称找到这些对象和属性。
用法
运行中更新属性,你需要做三件事:
- KeyPath
- LottieProperty
- LottieValueCallback
KeyPath
KeyPath用于定位将要更新的特定内容或一组内容,KeyPath由与原始动画中After Effects内容的层次结构相对应的字符串列表指定。
KeyPaths可以包含内容或通配符的特定名称:
'*'
通配符匹配键路径中任何单个内容名称
'**'
匹配零个或多个层次
Image
Lottie可以使用矢量图形,尽管Lottie支持图像渲染,但是有个缺点:
- 支持动画的文件比它们的等效矢量动画大一个数量级
- 它们在缩放时会出现不好的支持
- 它们增加了动画的复杂性,因为您拥有json文件和支撑的图像文件,而不是一个文件
Lottie文件中图像的常见原因是bodymovin将After Effects中的Illustrator图层导出为图像,如果您认为可能出现这种情况,请按照此处的说明操作。
设置你的image的方式有三种:
src/assets
如果必须使用image,可以将其放在src/assets之下,不要更改其在json文件中的资源id对应的name,或者可以对应改之。之后通过在LottieAnimationView上调用setImageAssetsFolder或使用资产内部的相对文件夹调用LottieDrawable,将Lottie指向存储图像的assets文件夹,如果您直接使用LottieDrawable,完成动画后,您应该调用recycleBitmaps。
zip file
可以将json和img一起创建一个zip文件,Lottie可以解压缩并阅读内容.
Providing your own images
有时,没有与设备捆绑在一起的image,可以从网络加载动画以节省apk中的空间。要处理这种情况,可以在LottieAnimationView或LottieDrawable上设置ImageAssetDelegate,每次Lottie尝试渲染图像时都会调用delgate,它将传递图像名称并要求您返回位图,如果你还没有(例如,如果它还在下载),那么只返回null,Lottie将继续询问每一帧,直到你返回一个非null值。