本文系原创文章,转载请注明出处(本人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这两个常数如何取值呢?如果随便取值肯定不行,
曲线图以及抛物线公式我们都得到了,但是关于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文件夹中的东西。
相关推荐
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
Html5——Canvas实例(制作太阳地球月球三球联动动画)
Canvas实际案例操作——爆炸粒子,渐入动画效果
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
一款很具空间感的基于html5 canvas实现的几何模型3D运动动画效果,好看的3D模型动画特效。
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
html5 canvas拖动的流体图片动画效果
基于html5 canvas实现的动态文字特效代码
html5实现一个倒计时种,使用canvas绘图试下。
html5 canvas结合css分割图片 引用动画库animal等 播放图片动画 支持三角形 矩形 梯形 横向 竖向 支持火狐浏览器及手机
HTML5 canvas仿windows屏保动态管道,设置速度、线条宽度请修改speed与default_width。
一张图,四个JS,做出来的很炫的3D云彩动态效果,做网页背景不错,欢迎下载
html5 canvas首屏自适应背景动画循环效果代码 html5 canvas首屏自适应背景动画循环效果代码
HTML5 canvas火焰文字动画效果代码
在HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款...
HTML5 canvas按钮粒子动画效果,点击按钮超酷粒子动画效果。
HTML5,canvas制作游戏2048
我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧...