简述下移动端使用gif, 透明背景视频, 动画的问题

先阐述下写这篇文章的起因

项目是再app内置浏览器中嵌入的一个 H5 页面，需求中有一个动画的效果，比较简单的动画，而且动画背景透明

 

下面来说说这个需求的坎坷经历

 

1. 第一个想到的应该就是让 UI 小姐姐做一个动态图啦，于是 UI 小姐姐也做了，但遇到了几个问题

　　- 动态图片太大，快接近我的整个项目的2倍大小

　　- 做出来的透明背景 gif 图片有白边锯齿，UI 小姐姐说无法解决

没办法，抛弃这个方案

 

2. 接下来就开始查资料，查到了一种可以实现页面透明背景动画的方式，而且没有白边，那就是使用透明背景的视频，下面附上方法

　　- 先让 UI 小姐姐做一个透明背景视频，据她所知也只有 mov 格式的视频支持透明通道了，那就 mov 格式的透明视频

　　- 注意：浏览器是不支持 mov 格式的视频的，所以就用了格式工厂将 mov 视频转成 webm ，也只能转成 webm，  3s的视频100k 左右还好还好，mp4 不支持透明的视频，鬼就在这

　　- 然后将视频作为网页背景，这里不讲该方法  参考这位大佬的做法 链接

　　- 桌面chrome,firefox浏览器测试 ok, 移动端 chrome, 神奇浏览器, via浏览器 测试 ok

  交付测试时出现问题，微信内置浏览器打开后视频没有作为背景，而是一个视频的黑块，qq等浏览器也出现类似情况，即便没有此问题的浏览器也会出现进入页面时视频的黑色背景一闪而过

  桌面端浏览器倒是没出啥问题，透明背景的视频正常显示并播放

  想也是，一是视频兼容性太差，二是webm 的兼容性更差，再是透明视频兼容性更差，选这个方案的时候有点孟浪了

 

 3. 总不能把这样的bug页面交付吧，我同意测试也不同意啊，测试同意项目经理也不同意啊，上面的人知道会被活剐了的，继续查资料吧

　然而并没有查出个所以然，项目经理就让我请教一下公司一个比较资深的前端，问了之后根据各方面原因就推荐了一个方法，用 CSS3 动画，

　说实话刚开始我是想到用 CSS3 动画实现，但是毕竟技术有限，动画中有些部分是用 CSS3 不能实现的，就想用其他的方法了，但现在其他方法也走不通了，去给项目经理说，给产品经理说，

　都没办法了，那就用动画实现，砍掉了一些 CSS3 不能实现的效果，只把 CSS3 能实现的留了下来，就给 UI 小姐姐要了动画的拆解图

　还别说， CSS3 实现的动画还挺好看，过渡丝滑，画面圆润有光泽

 

还有一种方法是使用蒙层抠出视频中的动画部分,自己研究了下还是没怎么看懂 附上链接，有兴趣的童鞋可以看看

 

总结一下: CSS3 能实现的效果尽量可以使用 CSS3 实现，效果是不错的，使用视频做背景兼容性不好，我在网上找过几个用视频做背景的网站，放在移动端要么视频显示有问题要么视频一直静止再开始的界面，png 序列帧也是可以实现，但占用更大，网站做的大的话可以考虑 gif , 总之根据需求而定，希望这篇文章对有此问题的朋友们有所帮助。

 

转载于:https://www.cnblogs.com/blackbentel/p/9122352.html