我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版,欢迎购买。点击进入详情
Lottie是一个移动端的开发库,可以利用各端(目前支持Android、iOS、React Native、Web、Windows)内置渲染机制去渲染矢量动画。
通过Lottie渲染矢量动画,需要特定的的json格式,这里我们称为bodymovin json格式。
bodymovin json格式,可以通过After Effects的bodymovin插件来导出。
我们来看一下通过lottie实现一个可有各端播放动画的具体实现步骤:
- 设计人员用After Effects完成aep文件;
- 下载After Effects的bodymovin插件;
- 导出bodymovin json格式;
注:2、3步可以有设计人员完成,也可以由开发人员完成,看各自的熟练程度。这里不涉及到复杂的开发,关键是控制好动画开始和结束的位置。 - 将bodymovin json格式文件放入assets文件夹中,也可以放到服务器上下载下来使用。
一个典型的bodymovin json文件:
图片是动画需要依赖的图片。如果需要在sd上播放动画,那么json格式中图片的路径需要更改。
这里做两个json文件,一个是播放assets下的动画,另一个是播放网络下载到sd卡上的动画。
播放lottie动画:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.lottie_view);
nimationView.setImageAssetsFolder("lottie/");
animationView.setAnimation("lottie/lottie_assets.json");
animationView.setSpeed(1.0f);
animationView.loop(true);
animationView.useHardwareAcceleration(true);
animationView.playAnimation();