摘要：在上一節(jié)我們介紹了動(dòng)畫中有關(guān)三角函數(shù)的內(nèi)容，以及一個(gè)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭動(dòng)畫。這一節(jié)主要介紹三角函數(shù)的波形運(yùn)動(dòng)。我們用函數(shù)模仿的第一個(gè)運(yùn)動(dòng)，就是這種類似水草擺動(dòng)的運(yùn)動(dòng)。脈沖運(yùn)動(dòng)便是將函數(shù)運(yùn)用于物體大小的變化中。
在上一節(jié)我們介紹了canvas動(dòng)畫中有關(guān)三角函數(shù)的內(nèi)容，以及一個(gè)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭動(dòng)畫。這一節(jié)主要介紹三角函數(shù)的波形運(yùn)動(dòng)。包括：
平滑運(yùn)動(dòng)
線性運(yùn)動(dòng)
脈沖運(yùn)動(dòng)
1.Sin函數(shù)的波形
sin函數(shù)的波形想必騷年們不會(huì)感到陌生，其圖形如下所示：
如果想要取得sin函數(shù)在[0, 2π]之間的值，非連續(xù)的情況下，可以這樣估算。
for(var angle=0; angle
1.平滑運(yùn)動(dòng)
首先介紹Math.sin(angle)的第一個(gè)應(yīng)用——平滑運(yùn)動(dòng)。
平滑是指物體一種流暢的運(yùn)動(dòng)狀態(tài)，與之相反的是機(jī)械式的簡單的從0到1再到-1和0的這么一種狀態(tài)。平滑的運(yùn)動(dòng)更加趨近與自然的運(yùn)動(dòng)狀態(tài)，類似水草在水流中的左右搖擺，在擺動(dòng)的過程中是有速度的變化的。
我們用Math.sin函數(shù)模仿的第一個(gè)運(yùn)動(dòng)，就是這種類似水草擺動(dòng)的運(yùn)動(dòng)。另外，因?yàn)?b>sin函數(shù)的值介于[-1,1]之間。所以在實(shí)際代碼中需要乘以一個(gè)較大的值(也就是振幅，你懂得)，使其的擺動(dòng)看起來明顯一些。水草擺動(dòng)的如下圖所示,在線演示地址。
具體代碼如下
//水草類
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
相比于機(jī)械的加減是不是更加的流暢呢？當(dāng)然，你也通過改變Math.sin(this.beta)中的遞增角度值，控制擺動(dòng)的速度。
2.線性運(yùn)動(dòng)
線性運(yùn)動(dòng)是最簡單的一種運(yùn)動(dòng)，物體勻速朝某個(gè)方向運(yùn)動(dòng)，就是線性運(yùn)動(dòng)。
原理很簡單，具體代碼請(qǐng)查看linear-vertical-motion.html
其實(shí)，這里如果你把angle += 0.05的注釋取消，你會(huì)發(fā)現(xiàn)球的運(yùn)動(dòng)軌跡就與sin函數(shù)的圖像一致了。
3.脈沖運(yùn)動(dòng)
除了作用于物體的速度，sin函數(shù)仍然可以作用于物體的大小變化。脈沖運(yùn)動(dòng)便是將sin函數(shù)運(yùn)用于物體大小的變化中。
具體代碼如下，詳細(xì)代碼請(qǐng)查看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值的變化，導(dǎo)致 ball.scaleX ， ball.scaleY屬性變化
ball.scaleX = ball.scaleY = centerScale + Math.sin(angle)*range;
angle += speed;
ball.draw(context);
})();
}
由此你應(yīng)該知道，除了位置屬性，我們還可以將sin函數(shù)與其他的屬性相結(jié)合，來形成不同的運(yùn)動(dòng)形式。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/49808.html
