从json文件到炫酷动画-Lottie实现思路和源码分析,Lottie是最近Airbnb开源的动画项目,支持Android、iOS、ReactNaitve三个平台,本文分析主要Lottie把json文件转为动画的思路和源码实现。
文章首先介绍Lottie的基本使用,然后分析把json文件映射到动画的实现思路,最后分析Lottie的源码实现,这里分析的是Lottie-Android。
基本用法
与使用相关的只有三个类文件: LottieAnimationView、LottieComposition、LottieDrawable ,所以Lottie使用起来特别简单(需要注意Lottie支持API16及以上)。
最简单的使用方式是在xml中增加LottieAnimationView:
"Logo/LogoSmall.json"是需要加载的动画数据路径,根目录是assets目录。
也可以通过代码设置动画数据json路径:
然后在代码中控制动画播放或者添加监听事件:
Lottie提供了LottieDrawable可以使用:
可以看到Lottie使用起来非常简单,我们之后就从以上用到的 LottieAnimationView、LottieComposition、LottieDrawable 入手来分析下Lottie动画的实现原理。
思路分析
我们先从底层思考下如何在屏幕上绘制动画,最简单的方式是把动画分为多张图片,然后通过周期替换屏幕上绘制的图片来形成动画,这种暴力的方式非常简单,但缺点明显,很耗内存