H5的动画效果,到底应该用H5动画来实现还是应该做成视频直接插入?
上分析:
动画篇
1.动画加载时间短,不会消耗太多流量
动画是由多个平面素材组合(也就是多张图),而视频,就是视频了。两者相比,视频的容量会更大,所以也就需要更多时间和更多流量来加载。运气不好的视频型H5是这样的:点开链接,却出现一个“视频加载中”
这无疑是一个“流量预警”:接下来要播放视频了,会用掉很多的流量。于是网速不好不想等的同学,流量不够的同学,流量够但是不想浪费的同学,都会在这一步默默地左上角退出。
而动画基本不会有这样的问题,几张图片(通常还是压缩好的),快速加载,然后就是漂亮的动画效果了。
2.可以添加更丰富的交互
这无疑是动画党最坚定的理由了。视频因为是一整个文件,除了暂停,继续播放,基本没有其他的交互效果。
而动画因为是多个元素的组合,每个元素都有进行下一步动作的可能,每一步动画都可以添加不同的手势交互,甚至可以控制动画双向播放。“交互”毕竟一直是H5的重头戏,缺少了交互效果的H5,似乎也少了那么点乐趣。
3.对流量党更加友好
这个应该不用多解释了,可能10个动画H5才能比得上1个视频H5的容量。而且由于视频都是从头到尾直接播放,所以如果出现卡顿或者网速问题,分分钟就是“重头再来”,这对于没WiFi也没有4G包年的流量党来说实在是太奢侈了。
4.平均制作成本较低
动画基本标配:平面设计+交互
视频基本标配:平面设计+交互+视频制作
嗯,就是这样。
视频篇
1.画面真实度高,细节更丰富
跟只用平面素材拼凑起来的动画比,用视频编辑软件各种加特效、甚至是直接高清拍摄的视频,展现出来的效果当然有更好的细节,而且看起来也会更连贯更真实。而动画如果加载不顺畅的话,那就成了PPT。。。
2.保证声画同步
动画只能额外加音乐,如果加载速度不一致(比如音乐快了点,画面慢了点),就可能会有声画不同步的现象。所以目前动画基本是只有背景音乐,最多是交互的时候产生音效。
而视频是画面连音乐一体的,就完全不用担心这样的问题啦。
3.降低对手机的要求
这一条看起来很奇怪吧哈哈,其实是这样,动画比视频的元素更“小”,视频比动画的元素更“少”。也就是说,只要网速ok,视频加载完了就可以直接播放。
但动画素材加载出来之后,还要手机不停地运算来驱动动画效果,不同型号的手机就要考虑不同的适配问题,差一点的手机遇上复杂的动画可能就卡成平面了。可以说,这就是很多H5中复杂的动画效果选择用视频来展示的重要原因。
4.安卓端的播放限制
这个问题是这样的,腾讯爸爸的微信和qq都自带内置浏览器(qq浏览器X5内核),而他们的内置浏览器都默认——安卓系统视频置顶!
也就是说,只要你是安卓机,就会自动把视频弹到最顶端播放,还自动全屏。不仅会有个无法隐藏的进度条,而且所有的交互效果都——与你无关。
最可恶的是,部分安卓机型可能还会在视频播放结束后出现广告。只有点击手机上的返回键才会回到H5的界面。
关于这个问题,目前能给的建议就是:浏览器中打开。不过最近有用户反映,就算浏览器打开也没办法解决这个问题,那就。。。建议先不用视频吧