国内二次元漫画交流组

前端知识 | 动效神器 Lottie 实现 App 动画

只看楼主 收藏 回复
  • - -
楼主
  


-海说软件接受各种技术咨询及开发业务-





前言


在没有 Lottie 之前,一般都是通过给 PNG 序列图,或者是开发自己写,当然这些动画一般都是比较简单的,但是如果遇到复杂的动画,开发一般都会拒绝掉。我自己就是个开发人员,一般我就会说,这个动画需要很多时间,版本迭代周期紧,这个版本没法实现了,要不以后有空给你看看吧。不过自从有了 Lottie,基本上都可以高效快速的还原动画。


-  gif 图片 -


是不是很好玩啊~


什么是Lottie:


Lottie 是 Airbnb 开源的一个面向 IOS、macOS、Android、React Native 的动画库,能分析 Adobe After Effects 导出的动画,并且能让原生 App 像使用静态素材一样使用这些动画,完美实现动画效果。这些动画通过一个叫 Bodymovin 的开源 After Effects 插件,以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。


怎么使用 Lottie 呢:


现在分成两个部分操作,一个给美工大师,一个给苦逼开发。


1、美工工作

(1)让设计师使用 Adobe 的 After Effects(AE) 工具制作这个动画。


(2)在AE中安装一个叫做 Bodymovin 的插件。下载 bodymovin,解压缩后只需要 \build\extension\bodymovin.zxp 这个档案就可以。


(3)手动安装 plugin,以 windows 系统而言,要先下载 **ExMan Command Line tool **并解压缩。再来把下载的 bodymovin 压缩后的 bodymovin-master\build\extension 目录下的 bodymovin.zxp 这个档案复制进去同一个资料夹。


(4)接着管理员运行命令行,运行 ExManCmd.exe /install bodymovin.zxp。


(5)最后来到AE里面找到插件,render 一下,这个时候就会生成一个 json 文件,里面描述了动画关键点的一些信息。最后就只需要把东西扔给开发就可以了

 

2、开发工作

(1)在项目的 build.grade 文件中加入

dependencies{ 

        compile 'com.airbnb.android:lottie:2.1.0'

}


(2)然后再布局文件中使用

<com.airbnb.lottie.LottieAnimationView

        android:id="@+id/animator_view"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

        app:lottie_fileName="animated.json"

        app:lottie_loop="true"

        app:lottie_autoPlay="true"

        />

这里的 animated.json 就是美工大师给的 json 文件。


(3)代码中添加代码

LottieAnimationViewanimationView = (LottieAnimationView) findViewById(R.id.animation_view);

    animationView.setAnimation("animated.json");

    animationView.loop(true);


最后就可以惊讶的发现,没有一张图片,没有一个 gif,动画效果却出来了


(4)当然还有一些常用的方法给开发使用


animationView.setProgress(0.5f)

设置演示的进度。


animationView.getProgress()

获取演示的进度。


animationView.getDuration()

获取演示的时间。


animationView.palyAnimation()

运行动画


animationView.pauseAnimation()

暂停动画。


animationView.cancleAnimation()

关闭动画。


海说软件会持续推出前端教学课程、技术干货。

往期课程:

前端知识 | 一个放大镜效果的 demo

前端知识 | 富文本编辑器 React-draft-wysiwyg

Go语言学习心得

前端知识 | 浅谈懒加载,瀑布流和木桶布局

微信支付那些事儿

前端知识 | 浅谈在React中使用echarts

微信小程序已成为企业发展的必要途径?

前端知识 | 简析ES6

企业如何选择合适的编程语言?

前端知识 | React Native手势响应浅析

该拿什么拯救,触目惊心的猝死和自杀列表背后的创业圈!

前端知识 | CSS小技巧-自适应椭圆

前端知识 | Flexbox布局模式

React Native 基于画板简析封装安卓原生UI

前端知识 | Redux的使用

前端知识 | React Native Animated动画浅谈

前端知识 | React-Router路由系统

前端知识 | React-Native 组件生命周期

React | 使用webpack构建React项目

React | 高效前端之浅谈



-END- 




举报 | 1楼 回复