速度【科普】速度是描述物体运动速度和方向的物理量。物理学中对物体速度的引用通常是指其瞬时速度。国际单位制中速度的单位是米每秒，国际符号是米/秒，中国符号是米/秒。在相对论的框架下，物体速度的上限是光速。在动画编程中，速度是最基本的要素，这一点在本系列教程第二篇讲三角函数的时候就有体现。动画编程的速度如下图所示。我们要在这里讨论的计算机动画中的速度类似于物理学中的概念。它们都是矢量，即既有大小又有方向，方向的体现就是其值的正负。回头看系列第一篇提到的坐标系，正半轴移动速度为正，负半轴移动速度为负。另一个区别是单位，不一定是时间，而是帧，比如“像素/帧”。也因为速度是一个向量，任何速度都可以分解为x轴和y轴上的速度，这是动画编程的基本思想。示例应用程序将本系列第二部分中的“跟踪鼠标位置的箭头”转换为“跟随鼠标的箭头”。代码非常基础，只需阅读注释即可。基本思想：计算目标点与物体的夹角；根据角度将速度分解到x轴和y轴；将每个轴上的速度添加到对象的位置坐标。特别是，由于此示例中的动画循环是基于帧的，因此速度单位是每帧像素。完整示例：鼠标跟随的箭头/***鼠标跟随的箭头**/window.onload=function(){constcanvas=document.getElementById('canvas');constcontext=canvas.getContext('2d');constmouse=utils.captureMouse(canvas);constarrow=newArrow();//设置速度constspeed=3;(functiondrawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,canvas.width,canvas.height);//计算鼠标与箭头的相对距离constdx=mouse.x-arrow.x;constdy=mouse.y-arrow.y;//计算箭头指向鼠标的夹角constangle=Math.atan2(dy,dx);//将速度分解为x轴和y轴-axisconstvx=Math.cos(angle)*speed;constvy=Math.sin(angle)*speed;//设置箭头的角度arrow.rotation=angle;//将分解后的速度添加到两个-箭头的轴位置arrow.x+=vx;arrow.y+=vy;//重绘箭头arrow.draw(context);}());};加速度【科普】加速度是物理学中的一个物理量，一个向量，主要用于经典物理学，一般用字母a表示，国际单位制中的单位是米每平方秒。加速度是速度矢量相对于时间的变化率，描述速度变化的方向和大小的快慢。动画编程中的加速度计算机动画中的加速度是速度的变化。它和前面的速度一样是一个向量，也可以分解成x轴和y轴上的加速度。方法同上。单位可以是像素每方框，这跟“力学”有很大关系。加速度可以使运动更加自然，是计算机动画中模拟真实运动的必要基础。请明确加速度是速度的变化，即加速度方向与速度相同即加速度，加速度方向相反即减速度。如果加速度为零，则速度恒定，物体以匀速直线运动。示例应用继续将之前的示例进行改造，将跟随鼠标的箭头变为“向鼠标方向加速的箭头”。修改量不大，即分解加速度叠加到速度上。基本思想：计算目标点与物体的夹角；将加速度分解为x和y轴；分别添加每个轴上的加速度和速度；然后将每个轴上的速度分别添加到对象的位置坐标中。完整例子：一个箭头朝着鼠标方向加速观察这个例子，你会发现虽然箭头比前面的例子移动得自然很多，但它永远不会停止。这是因为这里的加速度是恒定的，但实际上因为摩擦力等因素的加速度会减小。/***箭头朝向鼠标加速**/window.onload=function(){constcanvas=document.getElementById('canvas');constcontext=canvas.getContext('2d');const鼠标=实用程序。捕获鼠标（画布）；constarrow=newArrow();//初始化速度letvx=0;让vy=0;//设置加速度constforce=0.02;(functiondrawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,canvas.width,canvas.height);//计算鼠标与箭头的相对距离constdx=mouse.x-arrow.x;constdy=mouse.y-arrow.y;//找到指向鼠标的箭头之间的角度constangle=Math.atan2(dy,dx);//将加速度分解为x轴和y轴constax=Math.cos(angle)*force;constay=Math.sin(angle)*force;//设置箭头的角度arrow.rotation=angle;//将分解后的加速度加到两者上箭头的-轴速度vx+=ax;vy+=ay;//分解后的速度加到箭头的两轴位置上arrow.x+=vx;arrow.y+=vy;//重绘箭头arrow.draw(context);}());};比例运动将介绍两种更高级的常用技术，用于缓动和弹跳。所谓比例运动，是指运动的程度与距目标点的距离成正比。简单的说就是“距离越远，运动的程度越大”。这里的运动程度是指但不限于速度、加速度等与运动相关的变量。EasingEasing是指物体的速度与其到目标点的距离成正比，即基于距离的比例速度，影响速度的大小。慢动作具有不止一种运动特性。你可以先快后慢，或先慢后快，或先慢后快再慢。这里我们只举最简单的先快后慢的例子，即距离越长，速度越大，距离缩进为0，速度也为0。或者改造之前的鼠标跟随箭头，代码如下，基本思路：确定一个比例系数，它是一个0到1之间的小数；确定目标点，计算相对距离；计算速度，速度=距离×比例系数；使用当前位置加上速度来计算新位置；重复步骤2~4，直到物体到达目标点。完整示例：Easethearrowtothemouseposition/***Easethearrowtothemousedirection**/window.onload=function(){constcanvas=document.getElementById('canvas');constcontext=canvas.getContext('2d');constmouse=utils.captureMouse(canvas);constarrow=newArrow();//比例因子consteasing=0.05;(functiondrawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,canvas.width,canvas.height);//计算鼠标与箭头的相对距离constdx=mouse.x-arrow.x;constdy=mouse.y-arrow.y;//找到箭头指向鼠标的角度constangle=Math.atan2(dy,dx);//根据距离缓动constvx=dx*easing;constvy=dy*easing;//设置箭头的角度arrow.rotation=angle;//将分解后的速度加到箭头的两轴位置上arrow.x+=vx;arrow.y+=vy;//重绘箭头arrow.draw(context);}());};弹跳bouncing是指物体的加速度与其到目标点的距离成正比，即基于距离的比例加速度，这个比例会影响加速度的大小。弹跳将使动作自然而精神。你会发现物体会冲过目标点，然后开始反弹往复运动。这模拟了弹簧或橡皮筋??的效果。特别地，当距离为0时，加速度也为0，但速度不一定为0。或者改造之前的箭头向鼠标方向加速。代码如下。你会发现这和前面的加速例子很像，都是一个恒定的往复运动。原因是加速度和速度很难同时为0。这里我们加一个缩减系数让它停下来，基本思路：确定一个比例系数，它是一个0到1之间的小数；确定目标点，计算相对距离；计算速度，加速度=距离×比例系数；使用当前速度加加速度；通过将速度添加到当前位置来计算新位置；重复步骤2~5。完整示例：箭头朝鼠标方向弹起/***箭头朝鼠标方向弹起**/window.onload=function(){constcanvas=document.getElementById('canvas');constcontext=canvas.getContext('2d');constmouse=utils.captureMouse(canvas);constarrow=newArrow();//设置弹簧系数constspring=0.02;//初始化速度letvx=0;让vy=0;//减少系数constfriction=0.95;(functiondrawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,canvas.width,canvas.height);//计算鼠标与箭头的相对距离constdx=mouse.x-arrow.x;constdy=mouse.y-arrow.y;//找到指向鼠标的箭头之间的角度constangle=Math.atan2(dy,dx);//根据距离弹跳constax=dx*spring;constay=dy*spring;//设置箭头的角度arrow.rotation=angle;//将分解后的加速度加到箭头的两轴速度上vx+=ax;vy+=ay;//降低速度vx*=friction;vy*=friction;//将分解后的速度添加到箭头的两个轴位置arrow.x+=vx;arrow.y+=vy;//重新绘制箭头arrow。绘制（上下文）；}（））；}；
