Android 敏捷开发助手

Lottie动画轻松使用
PNG、JPG等普通图片高保真转SVG图
Android 完美的蒙层方案
Android MMKV框架引入使用
强大无匹的自定义下拉列表

Android Lottie动画

前言
优缺点
配置使用
方法使用
Lottie 动画原理
总结

博客创建时间：2021.04.24
博客更新时间：2022.10.03

以Android studio build=7.0.0，SDKVersion 31来分析讲解。如图文和网上其他资料不一致，可能是别的资料版本较低而已。

前言

Android开发中，常规的动画特效有：

补间动画
帧动画
属性动画
SVG动画

UI常常会用到一些动画特效，比如心形跳动、返回效果等，此时常规手段往往力不从心，使用Lottie就能助力你飞起来。

Lottie是一个为Android和iOS设备提供的一个开源框架，它能够解析通过Adobe After Effects 软件做出来的动画，动画文件通过Bodymovin导出json文件，然后由Lottie中的LottieAnimationView解析json渲染动画。 （如上图）

Lottie支持多平台，使用同一个JSON动画文件，可在不同平台实现相同的效果。Android 通过Airbnb的开源项目lottie-android实现，最低支持 API 16。

Lottie Github地址：https://github.com/airbnb/lottie-android
Lottie材料网站：https://lottiefiles.com/

优缺点

优点：

由于将动画变成了json字符串，相比几M体积的gif图，等质量下的压缩率达到80%及以上。
支持云端动画资源加载，上线新的动画效果不需要发版
支持实时渲染 After Effects 动画，让 app 加载动画像加载图片一样简单。
因为Lottie是利用json文件生成动画，从而避免了不同分辨率、不同设备尺寸上面动画效果存在差异的问题。
只需要进行一动画绘制，生成一次json文件，跨端使用（android、ios、web）
Android: API16+
IOS : IOS8+ /MacOS 10.10+
WEB：调用Bodymovin提供的js库 — bodymovin.js
拿到动画.json文件后，研发可以灵活的自行修复动画的颜色、路径等数据，自行扩展
拥有完整丰富的API，除了常规的播放、控制进度、暂停控制，还可以缓存、添加额外的原生UI
在未开启硬件加速的情况下，帧率、内存，CPU都比属性动画差，开启硬件加速后，性能差不多。

缺点：

Lottie尚不支持效果菜单中的表达式或任何效果。
使用alpha遮罩会影响性能。如果你使用的是alpha遮罩或alpha倒置遮罩，遮罩的大小会对性能产生更大的影响。
Lottie还不支持阴影，颜色叠加或笔触等图层效果。
导出比您想要支持的最宽屏幕更宽的动画，使开发者在Android上使用centerCrop类型或在iOS上使用aspectFill内容模式。

配置使用

依赖配置如下

    implementation 'com.airbnb.android:lottie:2.7.0'implementation 'com.airbnb.android:lottie:$lottieVersion'

    @SuppressLint("ResourceType")private void initView() {LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.lottieAnimationView);// 设定 asssets文件目录// lottieAnimationView.setImageAssetsFolder("images");// 在assets目录下的动画json文件名。
//        animationView.setAnimation("face.json");animationView.setImageResource(R.raw.face);
//        animationView.setAnimationFromUrl("https://lottiefiles.com/60170-search");// 开启硬件加速lottieAnimationView.useHardwareAcceleration(true);//设置动画循环播放animationView.loop(true);//assets目录下的子目录，存放动画所需的图片
//        animationView.setImageAssetsFolder("images/");animationView.playAnimation();//播放动画}

部分参数可以直接在xml 控件中使用

    <!-- xml配置使用  --><com.airbnb.lottie.LottieAnimationViewandroid:id="@+id/lottieAnimationView"android:layout_width="wrap_content"android:layout_height="wrap_content"app:lottie_fileName="hello-world.json"app:lottie_loop="true"app:lottie_rawRes="@raw/heart"app:lottie_imageAssetsFolder="images"app:lottie_autoPlay="true"/>

lottie_fileName ：在app/src/main/assets目录下的动画,以json文件名。
lottie_rawRes：存放在app/src/main/res/raw 目录下的json动画
app:lottie_rawRes，app:lottie_fileName这两个属性基本相似。
lottie_loop：动画是否循环播放，默认不循环播放。
lottie_autoPlay：动画是否自动播放，默认不自动播放。
lottie_imageAssetsFolder：动画所依赖的图片目录，在app/src/main/assets/目录下的子目录，该子目录存放所有图片。
lottie_colorFilter ：设置动画的着色颜色
lottie_repeatCount ：重复次数，当你设置-1的时候就代表相应的循环了！
lottie_scale ：设置动画的比例
lottie_repeatMode：设置动画的重复模式RESTART：重复、REVERSE：反向

方法使用

1. 资源加载
动画文件加载有三种方式
1.加载main/assets目录下的动画

     // 1.代码调用animationView.setImageAssetsFolder("test.json");// 或者 xml调用app:lottie_fileName="test.json"

2.加载res/raw目录下的动画

   app:lottie_rawRes="@raw/face"

3.加载Url
注意url指向的内容需要时json格式的数据
java animationView.setAnimationFromUrl("https://lottiefiles.com/60170-search");

2. 基本操作

 // 动画是否正在运行animationView.isAnimating()// progress范围0~1f，设置动画进度animationView.setProgress(0.5f);//播放动画animationView.playAnimation();//取消动画animationView.cancelAnimation();// 暂停动画lottieAnimationView.pauseAnimation();//重启动画animationView.resumeAnimation();//设置X轴方向上的缩放比例，0f为不可见，1f原始大小 Ps.原setScale方法在2.0.0版本后已弃用animationView.setScaleX(0.5f);//设置Y轴方向上的缩放比例animationView.setScaleY(0.5f);setMinFrame(...)setMaxFrame(...)setMinProgress(...)setMaxProgress(...)setMinAndMaxFrame(...)setMinAndMaxProgress(...)animationView.setProgress(0.5f);//手动设置动画进度// Custom animation speed or duration.ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)//自定义一个属性动画.setDuration(500);

3. 动作监听

        // json文件加载完成监听animationView.addLottieOnCompositionLoadedListener {  }//监听动画播放进度 [0,1] lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {// 判断动画加载结束if (valueAnimator.getAnimatedFraction() == 1f) {if (dialog.isShowing() && getActivity() != null)dialog.dismiss();}});animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {animationView.setProgress(animation.getAnimatedValue());}});animator.start();

4. 设置动画文件夹代理

    // 设置动画文件夹代理类lottieAnimationView.setImageAssetDelegate(new ImageAssetDelegate() {@Overridepublic Bitmap fetchBitmap(LottieImageAsset asset) {BitmapFactory.Options opts = new BitmapFactory.Options();opts.inScaled = true;opts.inDensity = UtilPhoneParam.densityDpi;Bitmap bitmap = null;try {bitmap = BitmapFactory.decodeFile(absolutePath + File.separator + asset.getFileName(), opts);}catch (Exception e){e.printStackTrace();}return bitmap;}});

5. 加载SDCard字体


lottieAnimationView.setFontAssetDelegate(new FontAssetDelegate(){public Typeface fetchFont(String fontFamily) {Typeface customFont = Typeface.createFromFile(FONT_PATH + fontFamily);return customFont;}
});

6. 缓存设置

/*
* Lottie内部有两个缓存map（强引用缓存，弱引用缓存），在动画文件加载完成后会根据设置的缓存策略缓存动画，方便下次使用。
*/
lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong);    //强缓存lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak);      //弱缓存LottieAnimationView.CacheStrategy.None);      //默认lottieAnimationView.setProgress(progress);        //设置当前进度
lottieAnimationView.buildDrawingCache();          //强制缓存绘制数据
Bitmap image = lottieAnimationView.getDrawingCache(); //获取当前绘制数据

在列表中使用动画，推荐使用缓存，避免内存抖动。

7. 显示效果定义

// 任何符合颜色过滤界面的类
final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.LIGHTEN);// 在整个视图中添加一个颜色过滤器
animationView.addColorFilter(colorFilter);//在特定的图层中添加一个颜色滤镜
animationView.addColorFilterToLayer("hello_layer", colorFilter);// 添加一个彩色过滤器特效“hello_layer”上的内容
animationView.addColorFilterToContent("hello_layer", "hello", colorFilter);// 清除所有的颜色滤镜
// 颜色过滤器只适用于图层，如图像层和实体层，以及包含填充、描边或组内容的内容。
animationView.clearColorFilters();

Lottie 动画原理

LottieDrawable会分出很多图层，然后用图层管理者 CompositionLayers去分别进行绘制。

绘制的时候根据时间，计算每个时间点的关键帧。这个时候用到了我们在属性动画所学过的 KeyFrame 关键帧处理类。

Android端的实现是基于Drawable，IOS端是基于Layer，最终都是对canvas的操作。原理实质是使用各平台的核心 Animation 的API进行动画的绘制和渲染。

总结

Lottie动画对于UI要求较高的项目是个非常必要的选择，使用普通动画无法实现的效果，使用Lottie能轻松达到。
自己写的案例demo，供大家一看Lottie源码。

相关链接：

Lottie动画轻松使用
PNG、JPG等普通图片高保真转SVG图
Android 完美的蒙层方案
Android MMKV框架引入使用
强大无匹的自定义下拉列表

扩展链接：

Android CameraX 使用入门
Android 今日头条屏幕适配详细使用攻略
Android 史上最新最全的ADB及命令百科，没有之一

扩展训练：

lottie的基本使用
LottieAnimationView控件进行何样的自定义设定

博客书写不易，您的点赞收藏是我前进的动力，千万别忘记点赞、收藏 ^ _ ^ !

Lottie动画轻松使用相关推荐

【Android -- 动画】Lottie 动画的基本使用
一.简介 Lottie 是 Airbnb 开源的一个面向 iOS.Android.React Native 的动画库,能分析 Adobe After Effects 导出的动画,并且能让原生 App ...
在vue项目中使用Lottie动画(随看随用)
前言: Lottie是一个IOS,Android和React Native库,可以实时渲染动画,动画被转化成JSON文件,节省了很多资源,允许应用程序像使用静态图像一样轻松使用动画.网上也有丰富的动画 ...
程序员也想改 Lottie 动画？是的！
一.前言 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,用过都说好.完全解耦开发人员和设计师,让设计师设计的动画,在程序中无缝还原,真是一旦拿 ...
android jason动画,Android 动画之Lottie动画使用
Android 动画之Lottie动画使用一:简介 Lottie是Airbnb开源的一套跨平台的完整解决方案,设计师只需要使用After Effects(简称AE)设计动画之后,使用Lottic提供 ...
flutter 动画json_Flutter 50: 图解动画小插曲之 Lottie 动画
和尚在一年前整理过一点 Lottie 在 Android 中的应用,现在 Flutter 也有相关的插件帮助我们快速简单的应用场景复杂的 Lottie 动画: 和尚在官网查询之后发现官网推荐了两个开源 ...
lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量
lottie 动画 A quick getting started guide 快速入门指南 I recently took on a project where the team wanted to ...
在VUE中使用Lottie动画
Lottie简介官方介绍:Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations ...
Lottie 动画导出为 GIF/MP4 以及与 QML 集成演示
获取 Lottie 动画文件 lottiefiles 是一个很好的网站, 从上面可以下载到别人分享的 lottie 动画文件. 我们可以下载到多种格式, 下面分别讲解每个格式的下载和适用情景. 下载 ...
记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去 ...
前端实现lottie动画
前端实现lottie动画 ul通过AE生成的json文件 ,前端通过lottie实现动画简单快捷 <div class="box"></div> 引入 &l ...

Lottie动画轻松使用

Android Lottie动画

前言

优缺点

配置使用

方法使用

Lottie 动画原理

总结

Lottie动画轻松使用相关推荐

最新文章

热门文章

Lottie动画 轻松使用

Android Lottie动画

前言

优缺点

配置使用

方法使用

Lottie 动画原理

总结

Lottie动画 轻松使用相关推荐

最新文章

热门文章

Lottie动画轻松使用

Lottie动画轻松使用相关推荐