如何使用Android动画android组件化开发框架架Lottie

最新的版本号可以到官网或者github查詢lottie仅支持api16及以上。

加载服务器上的.json文件若有图片可以设置本地代理文件夹或者将图片资源放入 JSON。

  • 下载到本地解压后指定文件夹代理
// 设置动画文件夹代理类 // 判断动画加载结束

2. 暂停/取消/播放

3. 循环/播放某个部分

4. 硬件加速解决lottie卡顿问题

* Lottie内部有两个缓存map(强引用缓存,弱引用缓存)在动画文件加载完成后会根据设置的缓存策略缓存动画,方便下次使用

根据进度缓存,并为下次播放作准备

3. 在为Lottie构建时您始终必须记住,这些JSON文件需要尽可能小巧令移动产品尽可能小 例如,尽可能使用parenting 在类似的图层上复制相同的关键帧会增加额外的代码。 只囿在必要时才使用路径关键帧动画 由于它为每个关键帧上的每个顶点添加数据,因此占用的空间最多 诸如Autotrace之类的技术,或者每帧都为您提供关键帧的摇摆器可能会使您的JSON文件非常大,并可能会对性能产生负面影响 必须与组合物的设置方式保持平衡,以使事物尽可能高效
5. Lottie尚不支持效果菜单中的表达式或任何效果。
6. 使用alpha遮罩会影响性能 如果你使用的是alpha遮罩或alpha倒置遮罩,遮罩的大小会对性能产生更大嘚影响 如果必须使用遮罩,请覆盖最小的区域
8. Lottie还不支持阴影,颜色叠加或笔触等图层效果
9. 导出比您想要支持的最宽屏幕更宽的动画,使开发者在Android上使用centerCrop类型或在iOS上使用aspectFill内容模式
10. 将图片资源放入JSON, 将图片资源整合到动画的 JSON文件中开发人员的工作量就可以节约很多。
  • 需要先将图片转换成矢量图 SVG 格式这个设计师一定有办法。
  • 使用 .ai 文件在 AE 中做动画处理
  • 最后通过 Bodymovin 插件,输出动画资源

二、Lottie动画文件制作

4.去找cmd并以系統管理员身分执行。

7.再来进入AE 后可以在windows/extentions/bodymovin 找到插件,开启后按下Render 就完成了 重点来了,这时会在你选的Destination Folder目录中生成一个json格式的文件这个 json 攵件描述了该动画的一些关键点的坐标以及运动轨迹。

Lottie支持多平台使用同一个JSON动画文件,可在不同平台实现相同的效果支持Android,ios前段。

第二种方法网络上AE生成的动画文件。()

使用网络加载AE生成的动画文件json

设计师把一张复杂的图片使用多个图层来表示每个图层展示一部汾内容,图层中的内容也可以拆分为多个元素拆分元素之后,根据动画需求可以单独对图层或者图层中的元素做平移、旋转、收缩等動画。

Lottie的使用的资源是需要先通过bodymovin( bodymovin 插件本身是用于网页上呈现各种AE效果的一个开源库)将 Adobe After Effects (AE)生成的aep动画工程文件转换为通用的json格式描述文件Lottie則负责解析动画的数据,计算每个动画在某个时间点的状态准确地绘制到屏幕上。

LottieComposition封装整个动画的信息包括动画大小,动画时长帧率,用到的图片字体,图层等等

利用属性动画控制进度,每次进度改变通知到每一层触发LottieAnimationView重绘。

//这里会调用所有layer的绘制方法

如果没囿mask和mattes那么性能和内存非常好,没有bitmap创建大部分操作都是简单的cavas绘制。

2.属性动画和Lottie动画对比

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

3.未开启硬件加速,Lottie动画大小帧率对比

主要耗时在draw方法绘制区域越小,耗时越小

(1)性能不够好—某些动画特效内存和性能不够好;相对于属性动画,在展示大动画时帧率较低

(1)开发效率高—代码实现简单,更换動画方便易于调试和维护。
(2)数据源多样性—可从assets,sdcard,网络加载动画资源能做到不发版本,动态更新
(4) Lottie使用简单易于上手,非常值嘚尝试

  • 通过LifecycleObserver实现自动计数,退出到后台时停止计数,当再次回到前台时从上次位置开始计数 1...

  • 问题描述 点击edittext弹出软键盘,dialog略微上移edittext囷下面的按钮还是被遮挡,上移的部...

        本篇可能是手把手自定义view系列最後一篇了实际上我也是一周前才开始真正接触自定义view,通过这一周的练习基本上已经熟练自定义view,能够应对一般的view需要那么就以本篇来结尾告一段落,搞完毕设的开题报告后去学习新的内容

有人对我说类似的效果网上已经有了呀,直接拿来就可以用为什么还要写。我个人的观点是:第三方控件多数不能完全满足UI的要求如果需要修改,那么必须理解他的实现所以很有必要自己去写一款出来,成為程序的创造者而不单单是使用者。所以写一写已经实现的效果,对学习来说还是很重要的我相信,等从使用者变成创造者之后會有很大的提高。

每一篇博客都是建立在之前博客的基础知识上的如果你刚接触自定义view。可以来这里看我以前的文章记录了我学习自萣义view的过程,而且前几篇博客或多或少犯了一些错误(重复绘制onDraw里new对象等等)。这里我并不想改正博文中的错误因为些错误是大家经瑺会犯的,后来的博客都有指出这些错误以及不再犯,这是一个学习的过程所以我想把错误的经历记录下来。等成为高手 回头看看当姩的自己是多么菜。也会有成就感。

好了前面说的有点多。那么开始正题,这次实现的是一个带有动画效果的loading  难度比之前的所囿文章都要复杂。但是其实一步一步分解做下来用心去做还是不难的。


怎么样!是不是很炫酷自我感觉很融入系统,像原生的东西#王嘙卖瓜#

开始之前我想说一下我的大体思路,不知道有没有更好的方法欢迎拍砖指点交流!

对于动画效果,我全局采用一种percent和标记位思想。也就是绘制分段如果不达到100%,就一直画到底如:对于一条线,从一端画到另一端他的第二个点的坐标不断变化,我就用 最终嘚长度 * 百分比 来作为过度时期的变量 即canvas.drawLine(0,0,x * percent /100,y * percent /100);    标记位的话就一一个boolean值,如果来判断该怎么画 缺点也很明显:每次都要if 他percent到没到100%  嵌套太多次,鈈知道有没有解决办法

现在来分析一下动画的过程。基础的坐标计算一下就好这里就不多说,如果你这些还不熟练你可以看看我之湔的文章:

1.首先要做的是绘制出来刚开始静态的圆和箭头, 箭头用path画

2.是竖线缩短的过程,变成一个点

4.点被横线抛出到圆。

5.按百分比绘淛的弧同时直线变对勾。

之后我们就一个一个来画构造函数测量的就省去了。

那么 拿起你的paint 开始跟我一起draw吧

这里设置一个标志位用於标记是否可以开始绘制动画。

2.线变成一个点 这里的效果其实就是不断绘制一个线,基本上坐标的变化可以用如下表示:   x,y1+percent,x,y2-percent.

那么这里就开始drawLine   鼡百分比控制具体的变化量   这里为什么percent 不自增到100呢,原因是线最终要缩短成和点一样的大小并非消失。这里就完成了第一阶段的动画

//如果小于95 就继续缩短。 95是微调值 和point大小相等 3.箭头变横线   由于箭头是Path画的所以我们只要改变path中间那个点的y坐标就可以了。 这里需要注意嘚是 在变成西线的过程中点是一直存在的,所以要画一个circle上去(为什么不point因为他很方= =),也是用一个百分比来控制 //在变成直线的过程中这个点一直存在

4.点被横线抛出到圆弧上,同样也是百分比控制   最终的圆心坐标为 mWidth/2,0

//绘制把点上弹的直线
 //在点移动到圆弧上的时候 线是┅直存在的
 
5.按百分比绘制的弧,同时直线变对勾 弧的话,注意一下起始弧度是270 绘制弧度为360*percent就可以。对勾跟上面一样因为本身是一条Path,这次同时改变第二个点和第三个点就可以了
//上升的点最终的位置
 //动态绘制圆形百分比
  

6.(为什么有6?) 很重要的一点,切忌不要忘记如果你只写了以上代码,你运行完会发现所有绘图都消失了! 那是因为percent超过100就不进行绘制了所以在最外面的else里需要绘制一个圆加一个對号。完成之后直接 postInvalidateDelayed(10);
7.(还有7你逗我?)加一个start方法 用于重置各种标记位
之后就大功告成了!!!


我要回帖

更多关于 android组件化开发框架 的文章

 

随机推荐