一、简介
你有没有遇上一些设计师,对一些酷炫的动画着迷,喜欢根据场景设计出可爱而流畅的动画。但是在实际工作中,哪怕开发人员也觉得这些动画非常的棒,可我们知道,越是定制化的动画,实现起来将会越麻烦和耗时。这有时候就会引发设计师和工程师的矛盾。
而自从 Airbnb 开发出 Lottie 之后,设计师只需要使用 After Effects 设计出完美的动画,然后通过 Bodymovin 插件进行简单的转换和导出成 JSON,最后工程师将 JSON 放入 App 项目中,就可以将动画 100% 还原到你的产品中。
二、为什么要用 Lottie?
Lottie 是一套跨平台的完整解决方案,设计师只需要使用 After Effectes 设计出动画之后,使用 Lottic 提供的 Bodymovin 将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS、Android 和 React Native之上,无需关心中间的实现细节。
对于不同的工作角色,Lottie 给你带来的都是更简洁的工作流。
如果你是 Designer,你可以充分发挥你的动画设计天分,因为它们最终会被 100% 的还原。
如果你是 Engineer,你可以通过简单的导入和有限的代码,就可以实现设计师要求的动画,并且 Lottie 并不臃肿。
如果你是 Product Manager,你的产品将具有更人性化的酷炫动画,而这并不会带来开发周期的延长。
整体来说,Lottie 是一个优秀的项目,它能解决很多关于动画上的沟通问题和提供解决方案。可它依然有一些不足的地方:
系统版本限制,Android(Api 14+) 和 iOS(>=8.0) 都有不同的版本限制。
有一些交互动画,不被支持,哪怕导出了也无法被正常执行。
Bodymovin 插件还有待完善,有些 After Effects 实现的效果,无法被正常导出。
而今天,我们站在一个 Android 工程师的角度,来看看如何使用 Lottie。这里只聊 Android 下使用 Lottie,如何编辑动画,如何安装插件,这些都是设计师需要关心的,对我们而言,拿到的就是一个 Lottie 动画的 JSON 文件,我们只需要关心如何使用它。
三、在 Android 下使用 Lottie
Lottie Github: https://github.com/airbnb/lottie-android
Lottie 官方文档: http://airbnb.io/lottie/
本来参考了公众号
承香墨影