html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

本文系原创文章，转载请注明出处（本人qq空间或博客园或IT EYE的相关文章链接均可）。

相信很多朋友都用过jquery的缓动效果javascript，但对于它的实现毫无头绪，而且缓动函数在各类UI中都很实用，若不清楚其原理，则每一次用其他语言时都需要寻找相应的插件方可，这无疑大大制约了开发人员的创新需求。本文章主要讲解缓动函数的基本原理以及用javascript在html5的canvas中的具体实现。

看本文章之前可以先了解以下概念

加速度的概念：高中物理的运动学中很重要的一个部分，简而言之就是描述物体运动速度变化率的单位量。

一重积分：大学高等数学或数学分析中最基础、最简单的积分学概念，若对积分学不太了解，可以事先度娘或谷哥一下相关原理。

抛物线方程：

什么是缓动？
缓动效果在现实生活中应用很多，如PPT的图片或文字的淡入淡出，图片或文字的飞入、飞出等效果，又如mac系统的屏保大量运用了缓动技术。这样的呈现效果给人一种和谐、平滑的美感，使得界面的呈现不显得突兀，可以大大优化用户体验。

缓动函数：
所谓的缓动函数实际上是描述物体运动过程中速度变化的物理量。更具体而言，缓动实际上就是一个物体

从地点A运动到地点B的一段位移中，该物体的运动速度遵循某个速度曲线函数。
如：该速度遵循线性曲线时为加速度不变的加速运动(或减速运动)，其缓动函数可以描述为：

Velocity = a*timer +k ,

其中，Velocity和Timer为变量，a和k为常量。当a的值为0时，说明物体的运动速度与运动时间无关，即此时速度运动曲线褪变为匀速直线运动。

又如：物体速度遵循抛物线方程，即此时的缓动函数为： html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

，

其中a和k为常量，Time为变量。在本文章的程序中，采取的是这种缓动函数，

以下我们通过函数图像来解析缓动曲线（由于本人亲手操刀画的图，有点挫，大家将就着看）：

其中横坐标为时间，纵坐标为当前时刻的速度，该运动曲线的意思是在 html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

时刻，其初速度为

，

当运动到时刻

时，速度降为0，如果此时该物体还要运动，那么其运行速度将会从0开始上升，如图中 html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

的右半边。

曲线图以及抛物线公式我们都得到了，但是关于a 和k这两个常数如何取值呢？如果随便取值肯定不行，

因为他们二者之间需要满足一定的依赖关系。于是乎，接下来就变成了纯粹的数学题了，热爱数学的朋友请看题，此题如下：

已知一张图片从屏幕的右边运动到屏幕的左边，总的路程为s，过程经历T秒，物体的初始速度为 html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

，末速度为

，物体速度变化的曲线方程为 html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

，且该方程仅有一个实根，问此时常量a和k的取值为多少？其中k>0
解：
由题意可知：
路程S，总共经历的时间T，初速度 html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

，末速度

，其中末速度在本示例中的值为0像素/秒，但为了兼容各类情况，此处末速度为已知条件，且用 html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

代替。

如上图封闭弧线 html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

的面积即该物体从 0时刻到T的路程总值，因此由一重积分公式可得：

html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

其中

（即在时刻t的速度为v）

解出这个积分得：

html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

-------方程1

又在点T时，也就是 html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

时刻，速度为

则由曲线方程有：

此处demo中

=0，即此时有

=k（关于

不等于0的情况，请大家自己去计算方程，此处特殊情况下方程的解很容易算出）

将k的值带入方程1 ，所以 a的关系式为： html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

于是乎我们便通过T 和 S 就确定了缓动函数的方程式，接下来我们可以通过这个函数关系式得到任意时刻的物体运动速度。

至此，核心算法部分已经完成，接下来便是在html5的canvas中将算法写上去，关于缓动的demo我会在最后贴上下载地址，可通过百度网盘下载。

划横红色线条的两个文件为图片缓动效果的demo需要用到的文件

右边的代码中， this.doInterval 是animation_js.js文件中 AnimatTimer对象的一个方法，该方法主要作用是执行帧绘制。大家都知道我们之所以能看到动画是因为图片一张一张连续播放，其中连续播放频率越高，绘制的动画越流畅。代码中speed 就是帧的播放速率，此处我取值为10。

SetValue函数是在画布canvas中绘制出图片，同时擦出画布上留下的图片痕迹，如果大家不明白这个痕迹，可以尝试注释掉setValue代码中的context.clearRect(start+1,y,height,width); 方法即可理解。

函数 setInterval中的内容每隔speed毫秒，也就是10毫秒执行一次，那么时间t的叠加时间则为10ms，，注意，由于方便度量，本程序中的时间在最后均换算为秒， 1秒=1000毫秒， duration是我希望这个动画的持续时间，start 和end 为该图片或物体的起止x坐标的位置信息。

效果如图，一张图片从右边，遵循抛物线的缓动函数运动到终点的过程，也可打自行下载demo，无需任何服务器，可在IE9及以上或chrome firefox等支持html5的浏览器中执行，未测试过360等浏览器。

html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

以上只是缓动函数的demo，其实我的最终目的是实现苹果MAC系统的屏保特效，我的文件目录effect.html是实现了框图位置信息的demo，该图片板块区域可以改变一个参数来进行板块缩放，且各个板块位置以及板块上的图片均是随机排列的：

html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

百度网盘中的代码下载地址：链接: http://pan.baidu.com/s/1dDGdfs1 密码: w5k4

文件大概64M 但是代码很小，也就1M左右，由于图片是高清，所以图片很大，如果大家不需要图片的，可以不下载img文件夹中的东西。

html5中canvas的图片缓动效果的原理——积分学的实际应用（原创）

相关推荐