HTML5实现动画效果的方式汇总 _html5教程技巧

js代码：
定义一些变量：

为了实例化汽车canvas(初始时被隐藏)，我们使用下面的自执行的匿名函数

点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：

加速，减速，通过以下方法，改变移动距离的大小来实现：

主调方法：

画背景：

画车身：

画轮胎：

由于原理简单，并且代码中作了详细注释，这里就不一一讲解！
2.CSS3
你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果：
HTML代码：

定义车身与轮胎转到的动画（你会看到基本每一个动画都有四个版本的定义：原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】）

3.JQuery与CSS3
这是一个效果与兼容性俱佳的方式（特别对于IE9暂不支持CSS3而言）
HTML代码（可以看到与CSS3中的HTML代码并无不同）：

JS代码：
首先引入在线API：

实现动画代码（相当简洁）：

简单讲解：prefix首先识别出当前是哪个定义被采用了（-o?-moz?-webkit?-ms?），然后定义了动画的起点位置和终点位置。接 着，定义了设置旋转角度的函数（该函数将在在动画的每一步(step)中执行）。然后，定义了一个动画，该定义方式导致了无限自循环调用！
本文，通过一个简单的动画实例，演示了HTML5下，实现动画的几种常见方式。