知方号

知方号

设计/前端 关于AE动画/特效web实现的四种方法

1.通过动图/视频来实现

如果你是设计师,并且熟练的运用Photoshop,那你一定对混合图层非常熟悉,他是实现两种图层消除颜色差值的一种快速实现方法,当然在web网页上也存在像Photoshop中的图层逻辑和混合模式,通过css代码可以实现网页中的图片和文字、视频等元素的图层堆叠,你可以把一种元素放置到另一种元素的上方,并且可以调节混合模式blend-mode来做到和Photoshop的混合图层一样的效果,通过这种方式,我们可以通过ae来制作合适的特效或动画效果,把我们所制作的效果放到网页当中,通过混合模式来消除ae所生成的颜色背景,从而达到与网页背景相融合,实现网页特效的目的。

mix-blend-mode:screen

Ae所生成的动画特效都是附带颜色背景的,无论是动图gif还是视频,网所以页设计者在进行这种实现的时候,往往一开始要进行合理的具体规划,保证ae动画特效的背景颜色与网页主体颜色保持一直或相近,才能达到完美消除底色。

但鉴于网页中的混合模式相比于Photoshop的混合方式要少,尤其是当如果出现两种颜色差距较大背景在网页中切换时,覆盖在之上的动画特效往往会出现底色,与原有的颜色形成不协调的色差,导致明显的感官差异,因此在使用视频和动图特效过程中,网页的整体颜色协调和网页的交互模式都需要提前应对处理和规划。

 

抛开各种格式的视频,Gif动图本身也存在一定的缺陷,无法实现透明过渡,色彩表现清晰度也比较低。

AE在生成包括MP4的各种视频格式时,往往自身的设置属性无法达到,所以经常通过ME进行各种视频的详细调整和导出,其中AVI格式的视频,可以通过携带alpha通道导出,在导入Photoshop时,会自动生成无背景视频,但在网页使用过程中,鉴于视频播放器的问题,总会生成一层默认黑色背景,当网页加载AVI时也要通过其他的插件支持,导致本身并不能进行透明背景的输出,背景必然存在。

2.通过json数据/svga来实现

通过数据的方式实现动画和特效,关于AE通过插件导出json和svga数据,两者基本一样,都需要通过绑定js来进行加载实现,都可以把图层信息转换成数据进行储存,再通过加载器来进行动画特效的播放和控制。

AE中有专门的对应json和svga格式的导出插件,通过设置导出,把ae中的图层信息和动画信息转化成文本数据,再通过调用Lottie.js和svga.js就可以再网页当中实现无背景存在的特效和动画。

这里着重说明一下在下使用Lottie.js,可以通过设置导出带有图片的文件和json代码,并在网页中进行调用,也可以直接包含图形信息到数据,只生成json文件,直接调用一个json就可以实现,甚至可以直接生成html和css源代码,只用纯css和html就能完成动画特效的实现。

可以加载alpha通道,表明可以实现动画特效的颜色背景输出和无背景动画输出,因为可以转换信息到数据,因此json文件需要自带的json播放器才能查看导出效果,或者直接加载到网页当中也可以观看导出效果。

 

 关于压缩方面,视频和动图可以用合适的工具进行相应的格式压缩,数据文件则要压缩调整好后进行生成,要在生成动画效果后调整好大小,清晰度等参数,再通过插件进行导出json文件,这样才能控制好动效数据的大小,没有办法进行后期对json数据进行压缩。

3.APNG/WebP新图片格式

通过新型的的图片格式生成透明背景的动画特效,近几年兴起的新型图片格式,在原先的图片格式上可以进行时间轴播放,支持alpha通道,透明和渐变过渡,老式图片格式的升级版,经过几年的发展,在浏览器的兼容性上已经适配了不少的主流浏览器,但无论那种新图片格式,相比于其他动效实现方式在网页上的兼容性还是表现的差一些。

兼容问题参考此篇文档

https://blog.csdn.net/weixin_44369568/article/details/101458255https://blog.csdn.net/weixin_44369568/article/details/101458255https://blog.csdn.net/weixin_44369568/article/details/101458255

在下只使用过APNG,WebP没用过,所以不做说明,网页特效可以通过AE制作,并生成png序列帧或iff等带有alpha透明序列帧,再通过isparta工具把序列帧导出为APNG动图,或通过其他方式转化成APNG,也可以生成无背景的动画特效。

 

关于APNG的生成,Isparta工具不怎么好用,会报错和卡死,维护也相当弱,工具存在bug问题,(明明生成报错失败了,文件下还是会生成带有isparta后缀的APNG,可以正常播放和使用,gif选项导出不了等)APNG格式相当于是整个png动画序列通过Photoshop加入时间轴调整后,再进行整合的一个文件包格式,体积是整个png序列,甚至更大。

压缩相对困难,除去ispata自带的压缩工具,其他没有对应的兼容工具可以使用,如果要进行压缩,只能像数据格式一样,需要先对png序列进行处理,压缩和调整,在进行生成。

4.Css/Js纯代码实现

按照设计者制作的ae特效演示用纯代码实现,通过css和js代码进行动画特效的实现,二维动画的实现有animation.js等,三维的动画实现有three.js等,还有都两者沾一点的echarts.js和echarts-gl.js。

可以直接通过代码的方式直接生成,也可以通过把AE动画拆分成对应的动画组件或者图片,通过css进行时间移动,透明度变换等,将动画进行组合,从而生成动画特效,效果实现代码和逻辑比较复杂,需要经过大量调整,控制度最高,代码可调节。

其中threejs的使用生成会带有颜色场景和灯光,同动图一样,使用前需要对网页的交互效果实现进行规划,防止出现过渡色差的那种不协调感

 体积比较

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。