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