开发一个交易网站多少钱,宝塔做的网站能不能访问,服装设计基础,wordpress媒体库空白说到动画效果#xff0c;一般都会感到很高端#xff0c;感觉很酷炫#xff1b;而小菜技术有限#xff0c;稍复杂的动画效果也需要很多时间处理#xff0c;但是遇到时间紧任务重的情况该怎么办呢#xff1f;那就尝试一下 Lottie 吧#xff0c;酷炫的动画集成却相当简单一般都会感到很高端感觉很酷炫而小菜技术有限稍复杂的动画效果也需要很多时间处理但是遇到时间紧任务重的情况该怎么办呢那就尝试一下 Lottie 吧酷炫的动画集成却相当简单还支持跨平台。 Lottie 是个啥 Lottie 是一个开源的动画工具由惊一群 Airbnb 的神人开发。它是一个 IOS/Android/React Native 本地库渲染后效果动画实时允许应用程序使用动画一样容易因为他们使用静态图像。 Lottie 咋集成 build.gradle 中添加 compile com.airbnb.android:lottie:2.5.5小菜需要支持 Android 版本 15所以需要在 AndroidManifest.xml 中添加如下版本权限uses-sdk tools:overrideLibrarycom.airbnb.lottie /Tips: 此时还要注意 AndroidManifest.xml 根目录中要添加 xmls:tools如图 同步之后即可添加动画效果在众多酷炫的动画中选择符合自身业务的动画下载会生成一个 json 文件可供 Android 和 IOS 共用将下载好的 json 文件拷贝到 assets 中小菜好奇 json 文件内容打开大概了解是动画图层的一系列元素但并不能直接明了的理解这也是一个动画不方便动态修改样式但弊端之一 引用 LottieAnimationViewxml 中直接添加并设置基本属性或只是在 xml 中添加控件通过 Java/Kotlin 调整 LottieAnimationView 动画过程!-- 第一种通过 xml 添加 LottieAnimationView 动画属性 --
com.airbnb.lottie.LottieAnimationViewandroid:layout_widthmatch_parentandroid:layout_height80dpandroid:layout_gravitycenterairbnb:lottie_autoPlaytrueairbnb:lottie_fileNameanimation-w180-h180.jsonairbnb:lottie_looptrue /!-- 第二种 xml 中只添加 LottieAnimationView 基本属性 --
com.airbnb.lottie.LottieAnimationViewandroid:idid/test_lav1android:layout_widthwrap_contentandroid:layout_height80dpandroid:layout_weight1 /若第二种通过 Java/Kotlin 动态设置 LottieAnimationView 动画属性mLav1.setAnimation(animation-w180-h180.json);
// ------ 设置动画的三种方式 ------
// 1. 当前版本已经不推荐使用该方法了
// mLav1.loop(true);
// 2. 设置循环动画次数
// mLav6.setRepeatCount(5);
// 3. 设置动画轮播属性从头播放
// mLav5.setRepeatMode(Animation.RESTART);
mLav1.setRepeatMode(Animation.RESTART);
mLav1.playAnimation();至此即可实现 LottieAnimationView 动画的完整效果小菜在测试时还测试了以下的属性因为 LottieAnimationView 继承的还是 ImageView所以很多属性都保留还包括动画的坚挺方法也尝试了一下 pauseAnimation() 和 cancelAnimation()均可停止动画播放 // 可监听动画的各阶段属性
mLav1.addAnimatorListener(new Animator.AnimatorListener() {Overridepublic void onAnimationStart(Animator animation) {Log.e(TAG, onAnimationStart);}Overridepublic void onAnimationEnd(Animator animation) {Log.e(TAG, onAnimationEnd);}Overridepublic void onAnimationCancel(Animator animation) {Log.e(TAG, onAnimationCancel);}Overridepublic void onAnimationRepeat(Animator animation) {Log.e(TAG, onAnimationRepeat);}
});// pauseAnimation() 和 cancelAnimation()
mLav3.setAnimation(animation-w180-h1802.json);
mLav3.loop(true);
mLav3.playAnimation();
Handler handler new Handler();
handler.postDelayed(new Runnable() {Overridepublic void run() {mLav3.pauseAnimation();
// mLav4.cancelAnimation();}
}, 3000);Lottie 孰优劣 优势 Lottie 的优势很明显动画效果酷炫且流畅支持跨平台效果统一集成简单。 劣势 万事万物都有两面性Lottie 的劣势在于动画效果不可动态修改样式这一点很重要不能直接调整动画的颜色等依赖于 json 文件据说有个别的动画兼容性不太好(小菜并没遇到)。 如何缓解劣势 Lottie 难道只是固定的网站上这些样式吗有些样式很好但是个别颜色不太合适的动画效果怎么办官方提供了 Lottie Editor可调整各个图层的颜色还有官方文档 Lottie Doc 方便我们更快速高效的使用 Lottie。 Lottie 是一种便捷的动画方式小菜觉得学好动画的基础也很重要希望会对各位有所帮助。以下是小菜公众号欢迎闲来吐槽 公众号.jpg
