Web端我们有哪些方法可以来实现动画?

动画的世界是丰富多彩的,对于互联网来说,静态未免显得有点太枯燥。HTML5/CSS3时代,我们要在Web里做动画选择其实已经很多了:

你可以用 Flash 技术来做动画;
你可以用 GIF 来做一个无需交互的动画;
你可以用 CSS3 的 animation;
你也可以用 CSS3 的 transition;
你也可以用 SVG 来做动画;
甚至 CSS2 的hover也可以实现简单的动画;
你还可以用通过在 Canvas 上作图来实现动画;
你也可以借助jQuery.animate方便地实现动画;

当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画,前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。

合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥。本文旨在探讨各种前端动画效果实现方式的异同,具体应用中如何实现,以及实现的效果还得根据自身的情况进行考量。

Web端我们有哪些方法可以来实现动画?

Flash动画

不可否认,目前为止,Flash制作的动画在互联网还是占据了庞大的数量,几乎可以实现任何你想要的动画,甚至很多复杂的游戏都是用Flash实现,如果不是随着移动端的兴起,估计Flash会一直火热下去。这边文章较为详细的说了Flash:分享一篇关于讲Flash兴起和没落的文章

GIF动画

在以前,对于一些广告动画和一些小的icon动画之类的,GIF确实是不错的选择,体积还可以接受,制作也简单。但有GIF有一个致命的弱点就是不支持交互以及高清晰度的渲染,逐步的被JS和CSS3所替代。

GIF动画

CSS Hover动画

通过:hover我们可以实现一个滑动逐级展现的菜单,虽然非常简单,但这个是动画的雏形,在hover中,我们几乎可以为元素应用所有的css属性,并且兼容性不错。不过在ie6下只有a标签支持:hover。

一个按钮就这么出来了: 经过我

<style> .hover-demo {display:inline-block;height:30px;cursor:pointer;line-height:30px;color:#fff;background:#f60;padding:0 20px;border-radius:2px;} .hover-demo:hover {color:#fff;} </style> <a class="hover-demo">经过我</a>

Javscript动画

因为没有其它可用的实现方式,最初的前端动画都是JS来实现,实现上就是通过一个定时器setInterval每隔一定时间来改变元素的样式,动画结束时clearInterval即可。早期的类库包括jQuery、prototype、mootools等等都是这种方式。

尽管这种方式动画的可控性很强,但是问题也很明显:

1.性能不佳,因为需要不断获取和修改Dom的布局,所以导致了大量页面重排(repaint)。

2.缺乏标准,不同的库使用了不同的API,导致即使是简单的动画也有各不相同的实现方式,调整起来比较耗时。

3.带宽消耗,一个简单动画也需要引入一个类库,相对丰富的动画,代码量都很大,结果就是增加了http请求的大小,降低了页面的载入时间。

CSS3动画

CSS3加了两种动画的实现方式,一种是 transition, 一种是 animation。

transition包含4种属性:transition-delay transition-duration transition-property transition-timing-function,对应动画的4种属性: 延迟、持续时间、对应css属性和缓动函数,

transform包含7种属性:animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state,它们可以定义动画名称,持续时间,缓动函数,动画延迟,动画方向,重复次数,填充模式。

总的来书,CSS3动画相比与JS更轻量,性能更好,更易于实现,同时也不必担心缺乏标准和增加带宽消耗的问题。animation 相比 transtion 使用起来更为复杂,但也提供了更多的控制,其中最重要的就是 frame 的支持,不过通过一些简单的JS库,例如 TJ 的 move.js, 我们也能在JS中通过 transition 来实现更复杂的控制。

对于常见的动画效果,设计师daneden已经都帮我们做好了,直接使用即可:http://daneden.github.io/animate.css/,非常赞!

HTML5动画

HTML5定义了三种绘图的方式,canvas svg webgl,其中svg做为一种可缩放矢量图形的实现是基于xml标签定义的,它有专门的 animate 标签来定义动画。而为 canvas 或者 webgl 实现动画则需要通过 requestAnimationFrame (简称 RAF) 来定期刷新画布。 尽管说 RAF 的方式会让代码变得复杂,但是因为不需要那么多的文档对象(通常浏览器只需要管理一个画布),它的性能也好很多,尤其是在内存吃紧的移动端上面。

通过新的RAF接口以及一些改进手段我们也可以用JS来实现高性能的动画。主要手段如下:

1.减少 Dom 样式属性查询,Dom 样式属性的查询会导致页面重排,从而消耗性能,通过将属性保存在JS变量中就可以避免在动画时去查询,从而减少卡顿。
2.使用性能更好的 css transform 替代改变绝对定位元素的定位属性。
3.在移动设备上使用 3d 硬件加速,最简单办法就是添加 -webkit-transform: translateZ(0),原因是移动端的显卡有很强的图形渲染能力,而每个应用的 webview 内存却是极其有限的。

使用JS的动画可控性更好,比如说通过事件捕捉可以很容易的设定不同参数。这方面做的最全面的有 Velocity.js,它可做为jquery 插件使用,对于初学者很友好,我个人会倾向于使用 tween.js,因为它只专注与动画的数值计算,不仅仅只适用与 Dom 操作。

SVG: animate

1.利用SVG提供的动画元素实现:由于SVG的内容可以定义成动态变化的,因此,利用SVG提供的各种动画元素,我们就可以得到各种动画效果,比如:沿某路径运动、渐隐渐现、旋转、缩放、改变颜色等。

2.使用SVG DOM:由于SVG DOM遵循DOM1、DOM2规范的大部分内容,因此,SVG中的每个属性和样式都可以通过脚本编程来访问;另外,SVG也提供了一套扩展的DOM接口,让通过脚本编程实现动画效果的手段更方便快捷。脚本语言中的定时器可以很好地触发和控制图象的运动。

3.SVG的动画元素标准的指定者与SYMM(Synchronized Multimedia)工作组合作,共同编写了SMIL动画规范,这个规范描绘了XML文档结构中使用的通用的动画特征集。SVG不但实现了SMIL的动画规范,同时也提供了一些SVG的特殊扩展。SVG定义了比SMIL动画更为严格的错误处理程序,当文档中有任何错误产生时,动画都将会停止。

4.SVG支持SMIL(Synchronized Multimedia Integration Language)动画规范中定义的下面的动画元素:

animate:改变SVG元素数值属性的不同值。
set:是animate的简化,主要用来改变非数值属性的属性值,比如visibility属性等。
animateMotion:沿某运动路线移动SVG元素。
animateColor:改变某些元素的颜色属性值。

SVG对SMIL动画的扩展元素和属性有:

animateTransform:改变SVG转换的转换属性值。
path属性:改变animateMotion元素中path属性的所有特性。
mpath元素:SVG允许animateMotion元素包含mpath子元素,它能够引用SVG中path元素的路径定义。
rotate属性:SVG为animateMotion增加一个rotate属性,用来控制一个对象是否自动进行旋转。

如果觉得原生操作麻烦的话,还可以借助SVG的js库:分享10个有用的操作SVG的JS类库

RAF

requestAnimationFrame简称:RAF,window.requestAnimationFrame将会通知你,浏览器你马上要开始动画效果了,然后需要在下次动画前调用相应方法来更新画面。这个方法就是传递给window.requestAnimationFrame()的回调函数。
这个方法原理其实也就跟setTimeout/setInterval差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。
可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值,通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。 一个简单的例子:

0%
<div id="test" style="width:1px;height:17px;background:#00A653;color:#FFF;">0%</div> <input type="button" value="Run" id="run"/> <script> window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var start = null; var ele = document.getElementById("test"); var progress = 0; function step(timestamp) { progress += 1; ele.style.width = progress + "%"; ele.innerHTML=progress + "%"; if (progress < 100) { requestAnimationFrame(step); } } requestAnimationFrame(step); document.getElementById("run").addEventListener("click", function() { ele.style.width = "1px"; progress = 0; requestAnimationFrame(step); }, false); </script>

由此可见,在Web端实现动画的方法实在太多了,做起来太复杂了吧,光选型就需要时间,那么有没有一种大杀器可以只引用一份就实现所有场景需要的动画呢?
答案是没有的,作为一名Web前端开发人员,我们必须去了解不同场景下的需求,然后把可能的技术方案罗列出来,去选一个最合适的,这个在随着经验的积累,也就不叫事儿了。

相关阅读