Lottie动画 轻松使用

已于 2023-01-28 21:54:03 修改
阅读量1.1w 收藏 24
点赞数 4
分类专栏： Android开发框架 文章标签： Lottie Lottie动画 json动画
于 2021-05-12 11:10:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo_boke/article/details/116199285
版权

Android 敏捷开发助手

  1. Lottie动画 轻松使用
  2. PNG、JPG等普通图片高保真转SVG图
  3. Android 完美的蒙层方案
  4. Android MMKV框架引入使用
  5. 强大无匹的自定义下拉列表
  6. Google Protobuf 实践使用开发

Android Lottie动画

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

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

前言

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

  1. 补间动画
  2. 帧动画
  3. 属性动画
  4. 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/

优缺点

优点：

  1. 由于将动画变成了json字符串，相比几M体积的gif图，等质量下的压缩率达到80%及以上。

  2. 支持云端动画资源加载，上线新的动画效果不需要发版

  3. 支持实时渲染 After Effects 动画，让 app 加载动画像加载图片一样简单。

  4. 因为Lottie是利用json文件生成动画，从而避免了不同分辨率、不同设备尺寸上面动画效果存在差异的问题。

  5. 只需要进行一动画绘制，生成一次json文件，跨端使用（android、ios、web）
    Android: API16+
    IOS : IOS8+ /MacOS 10.10+
    WEB：调用Bodymovin提供的js库 — bodymovin.js

  6. 拿到动画.json文件后，研发可以灵活的自行修复动画的颜色、路径等数据，自行扩展

  7. 拥有完整丰富的API，除了常规的播放、控制进度、暂停控制，还可以缓存、添加额外的原生UI

  8. 在未开启硬件加速的情况下，帧率、内存，CPU都比属性动画差，开启硬件加速后，性能差不多。

缺点：

  1. Lottie尚不支持效果菜单中的表达式或任何效果。

  2. 使用alpha遮罩会影响性能。 如果你使用的是alpha遮罩或alpha倒置遮罩，遮罩的大小会对性能产生更大的影响。

  3. Lottie还不支持阴影，颜色叠加或笔触等图层效果。

  4. 导出比您想要支持的最宽屏幕更宽的动画，使开发者在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.LottieAnimationView
        android: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() {
        	@Override
       		public void onAnimationUpdate(ValueAnimator valueAnimator) {
            // 判断动画加载结束
           	 if (valueAnimator.getAnimatedFraction() == 1f) {
                if (dialog.isShowing() && getActivity() != null)
                    dialog.dismiss();
           		 
        	}
    	});
   
   		animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
     		 @Override
      		public void onAnimationUpdate(ValueAnimator animation) {
          		animationView.setProgress(animation.getAnimatedValue());
      		}
    	});
 		animator.start();

4. 设置动画文件夹代理

    // 设置动画文件夹代理类
    lottieAnimationView.setImageAssetDelegate(new ImageAssetDelegate() {
        @Override
        public 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源码。

相关链接：

  1. Lottie动画 轻松使用
  2. PNG、JPG等普通图片高保真转SVG图
  3. Android 完美的蒙层方案
  4. Android MMKV框架引入使用
  5. 强大无匹的自定义下拉列表
  6. Google Protobuf 实践使用开发

扩展链接：

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

扩展训练：

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

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

luo_boke
关注
  • 4
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android最火的框架系列（十二）Lottie
zhaojun的博客
04-16 7135
这篇博客总结一下lottie的使用。lottie多火这个我不多说了，这篇文章除了介绍最基本的加载动画功能外，还对lottie的常用API、性能、以及一些拓展的高级用法和源码做了分析和总结。希望看到这篇博客的朋友，不仅仅是来学看如何使用lottie，而是能更深入的了解一些lottie的高级用法，同时对性能有所了解。更重要的是，能对lottie的原理和源码有进一步的深入了解，进而探索lottie的一些高级用法。最后，本文会总结lottie的一些坑，也希望大家在使用的过程中可以注意一下。
Lottie动画资源json文件
04-02
https://blog.csdn.net/yiranhaiziqi/article/details/88965548，此博客所需动画资源
2024年Android 中的 Lottie 动画入门_android lottie动画，2024年最新阿里面试官态度
2301_77595001的博客
05-13 785
找到一套好的视频资料，紧跟大牛梳理好的知识框架进行学习。多练。（视频优势是互动感强，容易集中注意力）你不需要是天才，也不需要具备强悍的天赋，只要做到这两点，短期内成功的概率是非常高的。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。以上就是总结的关于在面试的一些总结，希望对大家能有些帮助，除了这些面试中需要注意的问题，当然最重要的就是刷题了，这里放上我之前整理的一份超全的面试专题PDF还有。
Lottie动画的优劣及原理
qq_40796375的博客
02-26 1万+
前言 Lottie是目前应用十分广泛的动画框架。在周会汇报的时候，老板问能不能对Lottie进行优化，于是就有了下文对Lottie原理的研究。毕竟要进行优化，首先要深入了解原理嘛。 Lottie实现 Lottie通过读取json文件信息实现动画效果。 json信息包括json整体结构、图片资源、图层信息等，这些属性阐述了动画该做什么、该怎么做。 json文件解析： Lottie动画总体实现原理 Lottie 先将动画 JSON 文件转换为 LottieComposition 数据对象。 继承 Im
Lottie动画系列：LottieAnimationView简单使用
知道这个有什么用？
06-02 8860
上效果图： 隐藏标题栏 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> ··· </style> 导入依赖 implementation 'com.airbnb.android:lottie:3.1.0' 新建assets目录，复制json文件。 示例中是横屏，所以宽度比高度高。布局文件核心代码和完整代码： app:lottie_auto
Lottie—简介
热门推荐
半宛清愁的博客
09-11 1万+
Lottie是什么？ Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。 Lottie项目地址：https://github.com/airbnb/lottie-android 官方效果图： ...
【Android -- 动画】Lottie 动画的基本使用
Kevin Learn Android
12-06 5626
Lottie 是 Airbnb 开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。
Lottie动画库的使用1
08-08
Lottie动画库是一个强大的跨平台工具，它允许开发者在Android、iOS以及React Native应用程序中轻松地实现复杂的动画效果。这个库的核心功能是能够解析Adobe After Effects (AE)软件中创建的动画，并将其实时渲染出来...
skia lottie动画调测
最新发布
05-17
2. **性能优化**：通过Skia对Lottie动画进行渲染时，考虑内存占用和CPU使用率，优化动画的性能。 3. **跨平台兼容性**：Lottie库设计为跨平台，但需要确保在不同的操作系统和设备上都能正常工作。 4. **动画调试**...
Lottie动画demo
12-21
在Android开发中，Lottie动画相比传统的图片序列或者帧动画有诸多优势。首先，它极大地节省了应用的存储空间，因为所有的动画数据都被编码在单个JSON文件中。其次，Lottie动画运行时的性能优秀，因为它利用硬件加速...
android-Lottie动画文件
01-30
标题中的"android-Lottie动画文件"指的就是使用Lottie库在Android平台上播放的动画资源。这些资源通常以JSON格式存在，就像压缩包中的`android_wave.json`和`h_a.json`文件。JSON文件包含了After Effects中的图层、...
如何在vue里添加好看的lottie动画
10-18
在Vue.js应用中添加美观的Lottie动画是一个增强用户体验的好方法。Lottie是一个强大的库，它能够将Adobe After Effects创建的动画导出为JSON文件，然后在Web上轻松播放。以下是一个详细的步骤指南，帮助你在Vue项目...
Android 中的 Lottie 动画入门
夏夏的博客
07-19 3487
如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。.........
『Android基础控件』Lottie实现复杂动画效果
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
08-22 2728
好久没有更新Android系列的文章了，其实是好久没学了。从今天起重操旧业，好好把这个系列学下去。之前在做课设的时候一直有一个执念就是怎么做动画，但是苦于懒惰和时间有限，急急忙忙做了个半成品就交差了，根本顾不上去研究怎么做动画，今天它就来了。‎Lottie是一个适用于Android和iOS的移动库，它解析使用‎‎导出为json的‎‎动画，并在移动设备上以本机方式渲染它们！‎将设计好的动画导出成 JSON 格式，就可以直接运用在iOS、Android、Web和之上，无需其他额外操作。
Android 动画 Lottie 如何使用
Makenna's World
12-13 1934
Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。1.劣势（1）性能不够好—某些动画特效，内存和性能不够好；相对于属性动画，在展示大动画时，帧率较低2.优势(1)开发效率高—代码实现简单，更换动画方便，易于调试和维护。(2)数据源多样性—可从assets,sdcard,网络加载动画资源，能做到不发版本，动态更新。
Android Lottie动画使用，【一步教学，一步到位】
m0_61369523的博客
03-18 1656
一共十个专题，包括了Android进阶所有学习资料，Android进阶视频，Flutter，java基础，kotlin，NDK模块，计算机网络，数据结构与算法，微信小程序，面试题解析，framework源码！第二种方法，网络上AE生成的动画文件。这里，笔者分享一份从架构哲学的层面来剖析的视频及资料分享给大家梳理了多年的架构经验，筹备近6个月最新录制的，相信这份视频能给你带来不一样的启发、收获。LottieComposition封装整个动画的信息，包括动画大小，动画时长，帧率，用到的图片，字体，图层等等。
LottieAnimationView 缓存机制和优化
weixin_42448721的博客
12-21 1079
Lottie内存优化主要分为对LottieAnimationView 内存开关的设置和 LottieCompositionCache 操作两种方式。
Android平台实现lottie动画
牛永志的专栏
10-08 1313
Android 集成 Lottie动画
Lottie系列一：介绍与使用
许进进的博客
07-18 2428
Lottie 是一个针对 Android、 iOS、 Web 和 Windows 的库，它可以解析 Adobe After effect 动画，并用 Bodymovin 导出为 json，然后在移动和网络上呈现它们！
android 使用lottie动画
09-20
要在Android中使用Lottie动画，首先需要在应用级别的build.gradle文件中添加Lottie动画的依赖项。可以使用以下代码将依赖项添加到build.gradle文件中： ``` implementation 'com.airbnb.android:lottie:3.4.0' ``` 添加依赖项后，就可以在Android应用程序中使用Lottie动画了。以下是一个简单的示例代码，演示如何在Android布局文件中使用Lottie动画： ``` <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="your_animation.json" app:lottie_autoPlay="true" app:lottie_loop="true" /> ``` 在上述代码中，您需要将`your_animation.json`替换为您实际的Lottie动画文件名。您还可以根据需要调整其他属性，例如自动播放和循环播放。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值