blog
blog copied to clipboard
diamont1001
前端动画
前端动画
技术选型
动画效果和场景不同，需要的技术实现方式也不同，让我们一起来探索下各需求场景下适合的技术实现方式吧（古人云：前端动画不只有 CSS3 的^_^）
一、播放式
播放式的动画场景，类似动画片一样的一播到底，一般交互会比较少，最多也就是在中途跳个按钮打断一下。 像这种场景，自然而然的我们会想到了视频，或者 canvas ，嗯没错，这里应该没人会说 CSS3 吧！
方案1：Animate + flash2x + AnnieJS
- Animate：制作动画 flash
- Flash2x：把 flash 导出前端代码
- AnnieJs：组织导出来的代码，做二次开发
这种情况，工作量大多都集中在前期的动画设计上，也就是UI同学的活了，前端开发人员来说，只需要把做好的 flash 动画导出来做下适配，增加点业务逻辑即可。 当然，直接导出来的代码往往需要加工一下，比如做下延时加载、合并请求和资源回收等，这个需要自己在实际工作中慢慢探索。
线上例子：http://campaign.wandoujia.com/market/vincent/
方案2：视频播放
视频播放，其实就是使用 video 标签来播放视频，但是这种方案会有很多兼容性的问题，比如在安卓 webview 上，点击播放会自动全屏的问题，再比如 UC 浏览器播放视频会有个去不掉的操作栏挡在前面等等，因此到目前为止视频我们用的最少。
但是，我们发现微信的H5很多时候都有使用视频播放，比如之前的薛之谦的那个宣传页。没办法，人家兼容性不用考虑（只需考虑微信），而微信对视频的控制也有白名单机制，内部使用无障碍。
方案3：图片轮播
这，这方法是不是太笨了…… 其实，没有笨方法，只有笨的使用者！ 如果场景太长，其实就不太适合使用该方案了，因为图片太多，加载是一个问题，渲染更是一个问题。 该方法比较适合用到一些短的动画，比如一些转场动画，或者重复的展示广告小块，比如动态 logo 什么的。 该方案需要关注图片预加载和释放的问题。
二、
……未完待续
