先上效果图,这个是做的一个仿抖音的点赞动画:

众所周知,属性动画、补间动画通常只能做一些效果简单的,而做复杂的动画可采用gif图,帧动画,但是这样资源空间增大导致apk增大不小。而加载json文件实现动画就完美解决以上问题。
设计师AE导出Json文件,Lotti 解析Json文件后调Core Animation的API绘制渲染。所以让你们公司的UI去学一学AE吧,多们技能好防身。
Lottie开源库地址:一个集Android、Ios、React Native与Web平台于一身的女子。
https://github.com/airbnb/lottie-android
使用方式:
- 引入库
compile 'com.airbnb.android:lottie:1.0.1'
-
创建assets文件夹,将json文件放入其中。
image.png
- 引用LottieAnimationView控件
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_likeanim"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:lottie_fileName="likeanim.json"
app:lottie_loop="true"
android:layout_centerInParent="true"/>
常用属性:
app:lottie_fileName="likeanim.json" 加载json的文件名
app:lottie_loop="true" 是否循环播放
app:lottie_autoPlay="true" 是否自动播放
常用操作:
lottieLike.playAnimation(); //播放
lottieLike.pauseAnimation(); //暂停
lottieLike.cancelAnimation(); //取消
lottieLike.getDuration(); //获取动画时长
lottieLike.addAnimatorListener(new Animator.AnimatorListener() { //添加动画监听
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
网友评论