摘要：在上一節我們介紹了動畫中有關三角函數的內容，以及一個跟隨鼠標旋轉的箭頭動畫。這一節主要介紹三角函數的波形運動。我們用函數模仿的第一個運動，就是這種類似水草擺動的運動。脈沖運動便是將函數運用于物體大小的變化中。
在上一節我們介紹了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函數與其他的屬性相結合，來形成不同的運動形式。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79227.html
