为什么引用compile com.airbnb.android:lottie:1.0.1✀会报错

2025-03-11 08:51:58
推荐回答(1个)
回答1:

1. 使用 Gif,这种方式当然可行,但是使用 Gif 占用空间较大,而且需要为各种屏幕尺寸、分辨率做适配,因为 Android 没有提供原生 Gif 的 api 支持,所以这种方案还会遇到兼容性问题;

2.使用帧动画,这种方式还不如使用 Gif,一般来说使用帧动画占用空间比 Gif 还要大的多,而且一样要做多屏幕分辨率的适配,不过不会遇到兼容性问题;

3.使用视频,这种方式当然可以,但是一般来说宣传片才用的上视频,一般的动画远不需要用视频才能实现的,未免有些大材小用了,而且占用空间依然很大

就没有更好的实现方式了么?
当然有,Android 5.x 之后提供了对 SVG 的支持,通过 VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画,兼容性是一个问题,不过整个实现流程非常麻烦,每次全新实现一个动画都得重头来过,最最关键的是,如果一个公司下的 App,iOS 也要实现一套一样的动画,资源的占用就显得过大了。
而 Airbnb 开源的这个项目完美的解决以上难题,我们来看下整个流程是什么样的。
一般设计师会用 Adobe 旗下的 After Effects (简称 AE)来做个动画出来,设计师用 AE 做个动画比工程师用代码去实现一个动画要快的多的多,调整起来也很方便,之后 AE 上有一款插件叫做 Bodymovin,这个插件也比较屌,可以直接根据 AE 上的动画文件导出 json 文件,这个 json 文件描述了该动画的一些关键点的坐标以及运动轨迹,之后我们在项目中引用 Lottie 开源库
build.gradle file:
dependencies {
compile 'com.airbnb.android:lottie:1.0.1'
}123123

lottie 支持 Jellybean (API 16) 及以上。
在布局文件中:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="Alarm.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />123456123456

或者你可以在代码里动态的加载
animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("Alarm.json.json");
animationView.loop(true);123123

ps:我们的 xxx.json 文件只需要放在 app/src/main/assets 目录下就 ok 了
这个方法将加载文件并在后台解析动画,解析完成即开始异步渲染。
如果你想复用动画比如列表的每个item中或者从网络请求一个JSONObject:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
...
LottieComposition composition = LottieComposition.fromJson(getResources(), jsonObject, (composition) -> {
animationView.setComposition(composition);
animationView.playAnimation();
});123456123456

然后你就可以控制动画并添加listener了:
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
// Do something.
}
...
animationView.setProgress(0.5f);
...
// Custom animation speed or duration.
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
.setDuration(500);
animator.addUpdateListener(animation -> {
animationView.setProgress(animation.getAnimatedValue());
});
animator.start();
...
animationView.cancelAnimation();12345678910111213141516171819201234567891011121314151617181920

在底层LottieAnimationView使用LottieDrawable来渲染动画,如果你需要,你可以直接使用drawable:
LottieDrawable drawable = new LottieDrawable();
LottieComposition.fromAssetFileName(getContext(), "Alarm.json", (composition) -> {
drawable.setComposition(composition);
});12341234

有了这个库,我们可以充分发挥我们的想象力,很简单方便的就实现了一套很酷炫的动画,最重要的是,这个库是跨平台的,支持 Android、iOS 以及 ReactNative,共用一套 json 动画描述文件。