摘要：在上一节我们介绍了动画中有关三角函数的内容，以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。我们用函数模仿的第一个运动，就是这种类似水草摆动的运动。脉冲运动便是将函数运用于物体大小的变化中。
在上一节我们介绍了canvas动画中有关三角函数的内容，以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括：
平滑运动
线性运动
脉冲运动
1.Sin函数的波形
sin函数的波形想必骚年们不会感到陌生，其图形如下所示：
如果想要取得sin函数在[0, 2π]之间的值，非连续的情况下，可以这样估算。
for(var angle=0; angle
1.平滑运动
首先介绍Math.sin(angle)的第一个应用——平滑运动。
平滑是指物体一种流畅的运动状态，与之相反的是机械式的简单的从0到1再到-1和0的这么一种状态。平滑的运动更加趋近与自然的运动状态，类似水草在水流中的左右摇摆，在摆动的过程中是有速度的变化的。
我们用Math.sin函数模仿的第一个运动，就是这种类似水草摆动的运动。另外，因为sin函数的值介于[-1,1]之间。所以在实际代码中需要乘以一个较大的值(也就是振幅，你懂得)，使其的摆动看起来明显一些。水草摆动的如下图所示,在线演示地址。
具体代码如下
//水草类
function Aqu(color, num, amp){
this.startPoint = [];
this.endPointX = [];
this.endPointY = [];
this.amp = [];
this.beta = 0;
this.color = (color == undefined)?"#3b154e":color;
this.num = (num == undefined)?80:num;
}
Aqu.prototype.init = function(){
for(var i=0; i
相比于机械的加减是不是更加的流畅呢？当然，你也通过改变Math.sin(this.beta)中的递增角度值，控制摆动的速度。
2.线性运动
线性运动是最简单的一种运动，物体匀速朝某个方向运动，就是线性运动。
原理很简单，具体代码请查看linear-vertical-motion.html
其实，这里如果你把angle += 0.05的注释取消，你会发现球的运动轨迹就与sin函数的图像一致了。
3.脉冲运动
除了作用于物体的速度，sin函数仍然可以作用于物体的大小变化。脉冲运动便是将sin函数运用于物体大小的变化中。
具体代码如下，详细代码请查看plusing-motion.html
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var angle = 0,
range = 0.5,
speed = 0.05,
centerScale = 1;
var ball = new Ball();
ball.x = canvas.width/2;
ball.y = canvas.height/2;
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
//sin值的变化，导致 ball.scaleX ， ball.scaleY属性变化
ball.scaleX = ball.scaleY = centerScale + Math.sin(angle)*range;
angle += speed;
ball.draw(context);
})();
}
由此你应该知道，除了位置属性，我们还可以将sin函数与其他的属性相结合，来形成不同的运动形式。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49808.html
