Android 浅谈非矢量动画的实现

前言

之前的文章也经常提及矢量动画的一些特效,矢量动画肯定是优先会考虑用属性动画去实现。但是对于非矢量动画,实现的方式就比较多了,甚至需要根据不同的场景去选择不同的实现方式,这里就浅谈一些常用的非矢量动画方式,只是做一些简单的介绍,不会去涉及其原理。

1. gif动画

gif动画也是很早之前比较流行的非矢量动画的实现方式,因为它的实现成本比较低,在早期人员配置还不像现在这等规模的情况下,gif去实现动画的效果是一种相对简单的方式。

它的优点是:

(1)在各种平台和浏览器上广泛支持,因为出现得比较早,在兼容性这方面来说已经做得比较好了

(2)制作和分享简单,适合制作短暂动画

(3)支持透明度和循环播放功能

它的缺点是:

(1)最终的效果图像质量较低

(2)文件大小比较大

它的实现也非常简单,Glide老早就支持播放gif格式的图片了。

总的来说就是老古董,以前用得多,兼容性比较好,但是因为图像质量和文件大小等原因,现在很少使用

2. WebP动画

WebP是google在2010年9月推出的。它能提供更高效的图像压缩,同时保持良好的图像质量。

它的优点是:

(1)支持有损和无损压缩,可以在保持图像质量的同时减小文件大小。

(2)文件一般都不算大

(3)在网页传输中效率高,具有良好的浏览器支持

它的缺点是:

(1)兼容性相对不算好,因为是比较晚才提出的技术

(2)需要特定的控件来播放

它的实现也简单,和gif一样,Glide也支持webp的播放,但是我印象中是在3.7.0版本之后才支持的。

概括来说就是,它的压缩效果比较好,最终的动画图像效果也不会差,对于比较小的动画而言,很值得使用,对于android来说实现起来也方便

而且不光是动画,像我们现在放在AS中的静态图片资源,也需要换成webp

3. Lottie动画

Lottie动画是由Airbnb开发的一种动画文件格式和库,是在2017年提出的,用于展示高端矢量动画。

这个有点特殊,这里明明是介绍非矢量动画的实现,但是Lottie的宗旨其实还是矢量动画。这是因为虽然我们矢量动画优先推荐用原生属性动画来做,但是有些比较复杂,用原生来做比较耗时,性价比就不算高,所以可以用Lottie来实现复杂的矢量动画,而且Lottie也支持非属性动画。

它的优点是:

(1)基于JSON数据格式,实现轻量级和可伸缩的动画,最终导出的Lottie动画资源是一个Json格式的文件,所以相对文件比较小

(2)支持复杂的矢量动画和交互元素

(3)兼容web、移动端等平台

它的缺点是:

(1)制作需要成本,它不像gif一样制作简单,当然这不是我们开发所关心的事

(2)兼容性不算好,因为它是2017才出现的,甚至比webp更晚

它的实现同样也很简单,首先依赖Lottie库

dart 复制代码
dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

然后用com.airbnb.lottie.LottieAnimationView控件,最后调用playAnimation()就能播放动画,用起来也很简单,可以看官方demo
github.com/airbnb/lott...

总的来说,如果要实现比较复杂的矢量动画,可以优先考虑它,而且它具备文件小,使用方便等特点

如果你对它研究得透彻,你甚至可以手动去改json来改变动画的效果。

4. MP4动画

别看mp4原则上是播放视频的,变通一下,它也可以是动画的播放器,你可以把动画的效果做成视频。

它的优点:

(1)因为是视频,它能做到质量很高,而且支持音频

(2)可以做较长动画,因为是视频,所以长度可以设置较长

(3)兼容性比较高

它的缺点:

(1)文件大小较大,比其他动画格式大

(2)复杂的动画不好做

(3)可能需要去处理一些播放器的问题

mp4的实现也比较简单,一般都会使用第三方的播放器去做,像exo、GSY这些。

总的来说,mp4动画的大小比较大,一般考虑使用mp4动画的场景是动画的时间较长或者需要音效的大动画

5. PAG动画

PAG动画(也称为SWF动画)是指基于Adobe Flash技术创建的动画文件,通常以.swf文件扩展名保存。

它的优点:

(1)提供高级交互性和脚本功能,比如动画中可以和原生的控件进行交互

(2)支持矢量图形,可实现可伸缩动画

(3)可在动画中包含音频和视频元素\

它的缺点:

(1)播放需要Adobe Flash Player或类似插件,也就是播放需要特定的控件

(2)存在一些安全隐患,并且兼容性不算好

PAG动画的实现也因为需要特定的控件,所以需要依赖第三方库来实现。例如可以使用腾讯的libpag,可参考github.com/Tencent/lib...

总的来说,如果动画中需要与控件等做交互,可以考虑使用PAG动画,可以理解成一般的控件和动画放一起,都是用图层来处理,要么控件的图层在动画的图层上,要么在下面,而PAG是把控件嵌到动画里

6. 总结

上面列举了一些动画的实现方式,一般我们对比这些方式都会根据像文件的大小、使用是否方便这些维度去判断应该使用哪种方式去实现。但是这里比较特殊,应该是要根据具体的场景去使用,意思是如果你的项目比较大,场景比较多,甚至可能会使用多个方式,而不是说只选其中一个最好的去用。

小动画建议使用webp去实现,普通的矢量动画建议使用原声的熟悉动画,复杂的建议使用Lottie去实现,大动画如果还需要音效这些,建议使用mp4去实现,而如果动画和控件有交互的场景,比如我有个呼吸动画,我的控件也要跟着有呼吸的效果,这类动画使用PAG比较方便。

相关推荐
雨白3 小时前
Jetpack系列(二):Lifecycle与LiveData结合,打造响应式UI
android·android jetpack
kk爱闹5 小时前
【挑战14天学完python和pytorch】- day01
android·pytorch·python
每次的天空7 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭7 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日8 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安8 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑8 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
还鮟12 小时前
CTF Web的数组巧用
android
小蜜蜂嗡嗡14 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
aqi0014 小时前
FFmpeg开发笔记(七十一)使用国产的QPlayer2实现双播放器观看视频
android·ffmpeg·音视频·流媒体