TGideas

非Flash动画的简单尝试

In 网页重构

on 2012-07-18 14:58:10

by 东莞哥

在“未来战士伊泽瑞尔”专题中小小的尝试了一下非Flash动画的效果。效果很简单，实现也很容易，分享一下一些心得。专题地址：http://lol.qq.com/act/a20120628ez/。使用iPad、Webkit内核浏览器或Firefox可以看到效果。

文件加载方面，将CSS进行了拆解加载：非IE6浏览器加载notie6.css，一些PNG32的图片；Webkit内核浏览器加载webkit.css，Firefox浏览器加载moz.css，动画效果样式；将非首屏的背景图片CSS样式放于img.css，延迟加载。

CSS3动画方面，针对Firefox和Webkit浏览器使用了一些简单的CSS3动画，包括：顶部视频左边的怪兽、投票结果和武器示范右边EZ构架图两处的呼吸灯效果；等级、技能和击杀效果按钮的过度效果；第二屏视频右下角图形的旋转效果；等级按钮中间的烟雾效果。

图1 CSS3效果截图

呼吸灯和旋转主要是使用CSS 3的keyframes，渐隐和背景位移是使用animation，感兴趣的同学可以看看webkit.css和moz.css源文件。这儿简单介绍一下旋转效果的实现。

图2 旋转效果背景图和CSS（代码截取于webkit.css）

旋转效果一共使用了四张图片（从左到右，1-4环），如图2所示。4个div，绝对定位且圆心对齐，每个使用一个背景，1环使用呼吸灯效果，2、4环顺时针旋转，3环逆时针旋转。

iPad兼容方面，首先，iPad会默认将页面自动缩放成最佳比例，这样的结果是会导致一些元素错位。解决方法是类似多终端页面一样，设置meta标签的viewport属性，<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/>。因为针对PC端的页面在iPhone上没有太大的浏览意义，所以我强制了页面不能被缩放。

其次由于不支持Flash动画，将所有的Flash视频播放器都替换为HTML5 Video，背景音乐采用HTML5 Audio替换，并将Flash音频播放器用CSS3和JS替换。

耗时间最多的是页面顶部那个较大的EZ变身效果。本来想打算使用将.f4v的Flash视频格式转为.mp4文件，采用HTML5 Video自动循环播放，隐藏控制栏的方式。但是完成后发现，在iPad下，媒体文件是不能自动播放的，所有的播放都需要用户主动触发。查了查原因，貌似是苹果怕超大体积媒体文件的自动播放会大量消耗用户的流量。只得悲催的将iPad下背景音乐自动播放给关了，换Canvas实现顶部动画效果。

BTW，估计是为了减少资源开销，iPad同时只能播放一个媒体文件，也就是说在背景音乐播放时，再去播放视频，背景音乐会暂停；另外在页面滚动时，所有的CSS3动画会暂停。

说是Canvas实现顶部动画效果，但其实是很简单的做法，不用Canvas也可以。我是使用了逐帧动画的方式，将每帧的画面保存后拼合在一起，然后改变整合图片的位置，如图3。

图3 整合图片

需要说的是，最先是每0.2秒保存1帧视频截图，然后整合图片，这样动画连续程度高，也更精致，如图4。但在iPad上测试发现，动画表现得极其卡，完全不能看。后来对帧进行了大量删减，改为图3的形式后，动画较为流畅，只是细腻程度打了折扣。

图4 最初的整合图片

其实CSS 3和Canvas还有很多强大的功能，这次简单的使用只能算是站在了动画的山脚下。遗憾的是，由于国内IE浏览器大行其道，这些效果大部分人还体验不到。