底部悬浮代码(app悬浮窗代码)

　　每日推荐

　　最近后台有留言希望有ndk相关知识的文章，如果有需要，可以关注以下几篇文章：

　　Android NDK之旅（一），不使用ndk-build命令来创建jni

　　https://blog.csdn.net/qq_35071078/article/details/70338637

　　Android NDK之旅（二），使用ndk-build构建Jni

　　https://blog.csdn.net/qq_35071078/article/details/70502481

　　Android NDK之旅（三），使用cmake来构建Jni

　　https://blog.csdn.net/qq_35071078/article/details/70544766

　　本文作者

　　本文由 liujun（大脑好饿）投稿。

　　liujun的博客地址：

　　https://www.liujun.info/

　　本文主要讲解 Lottie 库动态加载 SD 卡上带图片资源的动画，并对各种机型做全屏适配。

　　https://github.com/airbnb/lottie-android

　　概述

　　Lottie 的优点：

跨平台，支持 Android、iOS、React Native 平台

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

资源动态下载，减小 APP 体积，上线新的动画效果不需要发版

更多优点等你发现

使用场景

做直播软件肯定少不了各种礼物的动画效果，当上线新的礼物时，不仅 Android、ios 客户端需要实现新的动画效果，还很难兼容老版本。

平常过节日的时候，很多 APP 都会做各种活动，修改启动页的图片，更改应用内的按钮图标，如果涉及到动画，那么肯定需要提前一两个版本将节日的动画实现代码预制到应用内

更多应用场景等你探索

　　现在有了 Lottie，可以让设计师使用 After Effects 进行动画设计，通过 Bodymovin 插件导出 json 文件，将动画资源打包上传到服务器后，客户端通过动态下载资源文件来执行动画。这样上线新的礼物，只需要将资源文件上传，客户端不需要发版完全可以执行新礼物的动画效果。

　　流程如下：

　　使用详解

　　本文就以直播间播放动画为例子来讲解具体的实现方案，先看下动画效果：

　　直播软件的大礼物一般都是飞机、跑车、航母、花瓣雨等，这些物品不是简单的线条、色块所能绘制，所以使用图片文件来实现动画效果。

　　导出的动画资源包括一个 json 文件和一组图片文件：

　　将这些文件打成压缩包上传到后台，客户端下载压缩包进行解压，使用 Lottie 加载本地资源执行动画：

　　关键的代码就是设置图片资源代理，去 SD 卡解析图片文件，那么怎么知道该解析哪一张图片呢？咱们来看看 json 文件里面的内容：

　　assets 字段是图片资源的数组，具体的解析的源码如下：

　　直接根据 ImageAssetDelegate 代理类的 fetchBitmap(LottieImageAsset asset) 方法中的 LottieImageAsset 参数获取当前需要解析的图片文件名，去 images 文件夹下面解析对应的文件就OK啦。

　　这几行代码就实现了从SD卡动态加载动画，那么这样就算完工了吗？看看上面的动画是不是感觉有什么地方不对劲？好吧，作为一个 Android 软件工程师，一定要记住2个字适配适配适配

　　源码解析

　　动画是全屏的效果，小幽灵也是从屏幕外飞进来的没有问题，为什么背景图离屏幕两边有空隙呢？

　　再来看看这个动图，为什么隐藏虚拟按键就全屏了呢？

　　再来看看 json 文件里面的内容：

　　背景图的宽高和画布的宽高是一样的，那么为什么有虚拟按键的时候背景图就不全屏呢？

　　原因其实很简单，来看一下 Lottie 是怎么解析 json 数据：

　　解析出了动画的宽高、帧率等信息，这里将解析出来的宽高乘上了屏幕的像素密度，然后设置渲染区域的边界，为了便于理解，本文将其称为画布。我这台手机是 1080P 的分辨率，density = 3，scaledWidth = 2250，scaledHeight = 4002，现在缩放后的画布宽高比手机屏幕大了太多，如果动画在这种尺寸下进行渲染肯定不行。

　　所以 LottieAnimationView 加载 Composition 时判断了画布的宽高如果大于手机屏幕的宽高就进行等比例缩小：

　　计算出宽和高的缩放比后，为了让画布小于屏幕，所以取较小的一个比例，调用 setScale 方法将缩放比设置到 lottieDrawable 上：

　　lottieDrawable 的 setScale 方法保存了缩放比，并且更新了绘制的矩形范围：

　　这里可以看到矩形的范围是根据画布的宽高进行了等比例的缩放

　　现在画布被缩放了，然而背景图呢？来看一下 lottieDrawable 的绘制代码：

　　lottieDrawable 在绘制的时候对 matrix 设置了缩放比，然后调用了 compositionLayer 去进行具体的绘制。这个 compositionLayer 就是所有图层的一个组合，它有一个List<BaseLayer> layers属性，这个属性就是 json 文件里面的layers节点解析出来的图层列表，每个图层中间还包含一些属性动画。

　　compositionLayer.draw(canvas, matrix, alpha)方法中主要调用了 drawLayer 抽象方法由图层的具体实现类执行绘制：

　　可以看到 CompositionLayer 类的 drawLayer 方法遍历 layers 集合进行循环绘制，这里是使用图片文件做的动画，对应的 Layer 实现类为 ImageLayer。看下 ImageLayer 的绘制方法：

底部悬浮代码(app悬浮窗代码),底部悬浮代码(app悬浮窗代码),底部悬浮代码,信息,文章,APP,第1张