上一节介绍了canvas动画中三角函数的内容，以及跟随鼠标旋转的箭头动画。 本节主要介绍三角函数的波形运动。 包括以下内容：
顺畅的动作
直线运动
脉冲运动
1.Sin函数的波形
sin函数的波形维奇们不知道吧。 其图形如下。
取sin函数的[ 0，2]之间的值，在非连续的情况下，可这样估计。
for(varangle=0； 安吉拉
console.log(math.sin ) Angle )； //打印与角度对应的sin值
}
1 .平稳工作
首先介绍math.sin(Angle )的第一个应用——顺畅运动。
光滑是指物体平滑运动的状态，相反，是机械式的简单的0到1，以及-1和0这样的状态。 流畅的动作更接近自然的动作，就像水草在水流中左右摆动一样，摆动的过程中会有速度的变化。
我们用Math.sin函数模仿的第一个运动就是这个水草的摆动一样的运动。 另外，还因为sin函数的值介于[-1，1 ]之间。 因此，在实际的代码中，必须乘以较大的值，以便抖动看起来很明显。 水草摇晃如下图所示，在线演示地址。
具体代码如下
//水草类
函数aqu (color，num，amp ) {
this.startPoint=[]；
this.endPointX=[]；
this.endPointY=[]；
this.amp=[]；
this .贝塔系数=0；
this.color=(color==undefined )？ ' # 3b 154 e ' :颜色；
this.num=(num==undefined )？ 80:num；
}
Aqu.prototype.init=function (
for(varI=0； I
this.start point [ I ]=math.random (* 20i * 10；
this.endpoint x [ I ]=this.start point [ I ]；
this.endpoint y [ I ]=canvas.height/1.5-math.random (* 50；
this.amp[I]=math.random(*1040；
}
}
aqu.prototype.draw=function{
ctx.save (；
ctx.lineWidth=14；
ctx.lineCap='round '；
ctx.globalAlpha=0.8；
ctx.strokeStyle=this.color；
//Math.sin的应用
this.beta=del * 0.0012；
varL=math.sin(this.Beta )；
for(varI=0； I
ctx.beginPath (；
CTX.moveto(this.startpoint[I]，canvas.height )；
//周期性改变水草顶点x坐标
this.endpoint x [ I ]=this.start point [ I ] l * this.amp [ I ]
CTX.quadratic curveto (this.start point [ I ]、canvas.height-120、this.endPointX[i]、this.endPointY[i] )；
ctx.stroke (；
}
ctx.restore (；
}
var canvas=document.getelementbyid (canvas )、
CTX=canvas.getcontext('2d )；
canvas.height=400；
canvas.width=800；
//实例水草
var oAqu=new Aqu (；
//初始化
oAqu.init (；
var oldTime=new Date ().getTime )、
del=null，newTime=null；
(function drawFrmae () (
window.requestanimationframe (draw frmae )；
CTX.clear rect (0，0，canvas.width，canvas.height )；
newTime=new Date ().getTime )；
del=new Date ().getTime )- oldTime；
oldTime=newTime；
oqu.draw(CTX )；
() )
不是比机器的加减更顺畅吗？ 当然，你也通过改变math.sin(this.Beta )的增加角度值来控制挥杆的速度。
2 .直线运动
直线运动是最简单的运动，物体向等速方向运动是直线运动。
原理很简单。 具体代码请参考linear-vertical-motion.html
window.onload=function (
var canvas=document.getelementbyid (canvas )、
context=canvas.getcontext('2d )；
var angle=0，
范围=50，
xspeed=1，
yspeed=0.05；
var ball=new Ball (；
(function drawFrame () )
window.requestanimationframe (draw frame，canvas )；
context.clear rect (0，0，canvas.width，canvas.height )；
ball.x =xspeed； //水平、沿x轴方向水平运动
if (ball.xcanvas.width ball.radius ) {
ball.x=-ball.radius；
}
//垂直、角度不变，因此纵轴保持不变
ball.y=canvas.height/2 math.sin (angle ) *range；
//angle =0.05； //取消评论看看发生了什么？
ball.draw(context )；
() )；
}
实际上，如果在这里取消angle =0.05的注释，可以看到球的运动轨迹与sin函数的图像一致。
3 .脉冲运动
除了作用于物体的速度外，sin函数也可以作用于物体大小的变化。 脉冲运动是指对物体大小的变化应用sin函数。
具体代码如下。 详细代码请参阅plusing-motion.html
window.onload=function (
var canvas=document.getelementbyid (canvas )；
var context=canvas.get context (' 2d )；
var angle=0，
范围=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 (draw frame，canvas )；
context.clear rect (0，0，canvas.width，canvas.height )；
//sin值的变化导致ball.scaleX、ball.scaleY属性发生变化
ball.scalex=ball.scaley=centerscalemath.sin (angle ) *range；
angle =speed；
ball.draw(context )；
() )；
}
由此应该看到，除了位置属性外，还可以通过将sin函数与其他属性组合来形成不同的运动形式。