直播画图设计方案[直播画面设计]

　　每日推荐

　　最近后台有留言希望有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

　　1

　　概述

　　Lottie 的优点：

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

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

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

更多优点等你发现

使用场景

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

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

更多应用场景等你探索

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

　　流程如下：

　　1

　　使用详解

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

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

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

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

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

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

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

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

　　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 的绘制方法：

　　getBitmap() 方法会调用到一开始设置的代理类 ImageAssetDelegate ，从 SD 卡加载图片。

　　代码中调用了 canvas 的save、restore方法来进行图层的叠加绘制，从 lottieDrawable 的draw方法传递下来的matrix用到了concat方法上，对 bitmap 进行了等比缩放。

　　整个流程跑下来，Lottie 库的动画渲染机制已经基本了解，背景图没有全屏展示的原因如下：

　　背景图的长宽比是 16 : 9，手机屏幕的长宽比也是 16 : 9，但是因为底部的虚拟按键占了一部分的高度，屏幕可用空间的长宽比大约为 3 : 2，所以导致背景图不能铺满屏幕

　　3

　　全屏适配

　　动画不能全屏有两种情况，一种是手机长宽比和画布的长宽比是相同的，但是状态栏、导航栏占了屏幕一部分空间导致不能全屏，使用方案一可以解决问题。还有一种情况是手机屏幕长宽比和画布的长宽比就是不一样，毕竟 Android 机型这么多，有几台奇葩手机很正常，那么使用方案二可以实现全屏。

　　方案一

　　在执行动画的界面隐藏虚拟按键，或者将虚拟按键设置为透明浮在布局上面，这样屏幕的长宽比和画布的长宽比一样就没有问题。目前市面上的手机基本上都是 720P、1080P、2K 等分辨率，这些分辨率都是 16 : 9 的尺寸。

　　状态栏和虚拟按键透明悬浮在布局上面，设置样式：

　　隐藏虚拟按键通过代码设置：

　　使用代码隐藏虚拟按键需要注意一点：界面的切换会导致 setSystemUiVisibility() 的设置被清空，最好是在 onResume() 或者 onWindowFocusChanged() 方法中进行设置。

　　方案二

　　如果要适配其他长宽比的屏幕，咋办呢？两行代码解决问题，只不过图片有一部分会被裁剪。设置控件的宽高为match_parent，设置android:scaleType为centerCrop

　　总结

　　Lottie 发布才几个月，很多功能还不够完善，缓存机制也比较弱，像这种从 SD 卡动态加载的方式，需要自己去实现缓存逻辑。但是这点小瑕疵掩盖不了牛逼的事实，就目前这个需求来说，已经大大的降低了开发成本。只不过设计师们需要好好练练 AE 了，动画炫不炫就看设计师给不给力啦????

　　本文是作者的处女作，如果对大家有帮助，希望大家多多支持，给予作者更多的创作动力，提供更好的作品给大家。

　　ZZS

　　无论你是有 Java 基础希望学 Android 开发的程序员，还是想进一步提升能力的 Android 开发者，都可以在这个Udacity & Google 官方参与制作的课程项目中找到适合自己的成长路径！

　　＊独家硅谷技术课程

　　＊行业领导者设计的实战项目

　　＊一对一学习辅导

　　＊名企颁发学习认证

　　＊毕业直达滴滴面试

　　如果你有想学习的文章直接留言，我会整理征稿。如果你有好的文章想和大家分享欢迎投稿，直接向我投递文章链接即可。