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时，说明物体的运动速度与运动时间无关，即此时速度运动曲线褪变为匀速直线运动。
又如：物体速度遵循抛物线方程，即此时的缓动函数为：
，
又如：物体速度遵循抛物线方程，即此时的缓动函数为：
，其中a和k为常量，Time为变量。在本文章的程序中，采取的是这种缓动函数，
以下我们通过函数图像来解析缓动曲线（由于本人亲手操刀画的图，有点挫，大家将就着看）：
其中横坐标为时间，纵坐标为当前时刻的速度， 该运动曲线的意思是 在
时刻，其初速度为
，
时刻，其初速度为，当运动到时刻
时，速度降为0，如果此时该物体还要运动，那么其运行速度将会从0开始上升，如图中的右半边。
曲线图以及抛物线公式我们都得到了，但是关于a 和k这两个常数如何取值呢？如果随便取值肯定不行，
时，速度降为0，如果此时该物体还要运动，那么其运行速度将会从0开始上升，如图中的右半边。曲线图以及抛物线公式我们都得到了，但是关于a 和k这两个常数如何取值呢？如果随便取值肯定不行，
因为他们二者之间需要满足一定的依赖关系。于是乎，接下来就变成了纯粹的数学题了，热爱数学的朋友请看题，此题如下：
已知一张图片从屏幕的右边运动到屏幕的左边，总的路程为s，过程经历T秒，物体的初始速度为，末速度为
，物体速度变化的曲线方程为
，且该方程仅有一个实根，问此时常量a和k的取值为多少？其中k>0
解：
由题意可知：
路程S，总共经历的时间T，初速度，末速度，其中末速度在本示例中的值为0像素/秒 ，但为了兼容各类情况，此处末速度为已知条件，且用代替。
如上图 封闭弧线O的面积即该物体从 0时刻到T的路程总值，因此由一重积分公式可得：
其中
（即在时刻t的速度为v）
解出这个积分得：
-------方程1
又在点T时，也就是时刻，速度为
则由曲线方程有：
此处demo中=0，即此时有=k（关于不等于0的情况，请大家自己去计算方程，此处特殊情况下方程的解很容易算出）
将k的值带入方程1 ， 所以 a的关系式为：
于是乎我们便通过T 和 S 就确定了缓动函数的方程式，接下来我们可以通过这个函数关系式得到任意时刻的物体运动速度。
至此，核心算法部分已经完成，接下来便是在html5的canvas中将算法写上去，关于缓动的demo我会在最后贴上下载地址，可通过百度网盘下载。
已知一张图片从屏幕的右边运动到屏幕的左边，总的路程为s，过程经历T秒，物体的初始速度为
，末速度为，物体速度变化的曲线方程为，且该方程仅有一个实根，问此时常量a和k的取值为多少？其中k>0解：
由题意可知：
路程S，总共经历的时间T，初速度
，末速度，其中末速度在本示例中的值为0像素/秒 ，但为了兼容各类情况，此处末速度为已知条件，且用代替。如上图 封闭弧线
O的面积即该物体从 0时刻到T的路程总值，因此由一重积分公式可得：其中
（即在时刻t的速度为v）解出这个积分得：
-------方程1又在点T时，也就是
时刻，速度为则由曲线方程有：
此处demo中
=0，即此时有=k（关于不等于0的情况，请大家自己去计算方程，此处特殊情况下方程的解很容易算出）将k的值带入方程1 ， 所以 a的关系式为：
于是乎我们便通过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等浏览器。
以上只是缓动函数的demo，其实我的最终目的是实现苹果MAC系统的屏保特效，我的文件目录effect.html是实现了框图位置信息的demo，该图片板块区域可以改变一个参数来进行板块缩放，且各个板块位置以及板块上的图片均是随机排列的：
文件大概64M 但是代码很小，也就1M左右， 由于图片是高清，所以图片很大，如果大家不需要图片的，可以不下载img文件夹中的东西。
相关推荐
周公周金桥 2020-09-06
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
MaureenChen 2020-04-21
xingguanghai 2020-03-13
teresalxm 2020-02-18
木四小哥 2013-05-14
SoShellon 2013-06-01
Simagle 2013-05-31
羽化大刀Chrome 2013-05-31
waterv 2020-01-08
LutosX 2013-07-29
vanturman 2013-06-27
wutongyuq 2013-04-12
luoqu 2013-04-10
today0 2020-09-22
89520292 2020-09-18
bigname 2020-08-25