动画角标的实现方案与比较（JS/Flash/CSS3）

最近想在QQ弹窗每日精选上做个比较炫的角标动画，于是乎发现了这么些有意思的东东。

CSS版

最先想到的是做个纯CSS版的，原理也简单：a标签默认一张背景图，a:hover后换成另一张动态gif图。

这种方法的特点是：设计成本中，兼容性中，性能影响中。

我们期望的效果是：鼠标mouseover时，播放一遍动画，mouseout时恢复原状，再次mouseover时要重头播放一遍动画。比较搞笑的是原生IE6/7上可以满足要求（可能因为没有做优化，每次hover都会重新渲染gif，好在没有发起新的请求）。但其他浏览器却缓存了hover的状态，不管是播放一次的gif，还是循环播放的gif，都无法完美实现这样的效果（是么？再点击DEMO看看先）。

CSS3版

好吧，作为一枚有追求的页面屌丝，学习larthas做CSS3的keyframes试试看。于是拼了张背景图，做了CSS3的角标DEMO。这里有个小知识点，animation-timing-function的默认值是ease，不是期望的动画效果，这种帧动画应该设置为step-start值。

效果达到了，但是没用上。因为QQ弹窗使用的是IE内核，而IE10才开始支持CSS3的keyframes。

CSS3版的特点是：设计成本中，兼容性差，性能影响低。

CSS3 keyframes各种浏览器私有属性啊，各种凌乱啊，有木有？！

JS版

第三个想到的方案当然是用JS来实现。实现原理是：鼠标移上时开始setTimeout改变background-position的值，鼠标移开时清空动画队列。直接看DEMO，写的时候考虑到了复用性的问题，直接给需要的a标签绑定onmouseover=”gifHover(this,36,4)” 和onmouseout=”gifReset(this)”即可。

稍微说明下gitHover(this,36,4)中的4代表的是动画共有多少帧，参照这张图，有4个状态，所以是4帧，而且图片的制作必须符合从上到下依次为开始到结束状态。36是指每一帧的图片高度为36px。

在写JS版的时候遇到了两个background-position取值的兼容性问题：currentStyle（仅IE支持）以及backgroundPositionX（IE和Chrome支持，Firefox不支持），具体可以查看DEMO的源代码。

JS版的特点是：设计成本中，兼容性好，性能影响中。

Flash版

JS版本OK后，当然是不需要Flash版本了，毕竟Flash除了需要安装Flash Player以外（基本所有QQ弹窗的用户都装了），还有不少其他麻烦的技术问题（flash初始化的虚线框、z-index层级的处理等等）。但考虑到之前拍拍首页做过一个角标广告，交互形式和这个比较类似，也就一起拿出来分享吧。

AS2写的比较挫（网上只能搜到AS3的资料，以后再也不2了）就不放源文件了，swf版本可以直接使用。我封装了几个逻辑：

1、Flash默认场景大小是140×140的，当等比缩放或放大embed的width和height时，载入的图片资源不做scale处理。

2、至少需要指定“点击后的url”和“加载的图片资源pic”两个参数，详见FlashVars参数值。

3、可选参数：callback，点击关闭后页面回调JS函数名，默认值为closeCornerAd；hasClose，当值为false时，隐藏关闭按钮。

Flash版的特点是：设计成本低，兼容性中，性能影响高。

 

还有其他方案么？欢迎留言：）

参考资料：

 

posted @ 2012-04-06 01:00  猫哥_kaiye  阅读(952)  评论(0)  编辑  收藏  举报