這次帶給大家js如何做出小球動畫,js做出小球動畫的注意事項有哪些,以下就是實戰案例,一起來看一下。
一、運動的小球
本節將用p5.js做一個在螢幕上運動的小球。
思路是用變數記錄小球的位置,然後在draw()函數裡對其做出改變,由於draw()函數會不斷地運行(頻率為FPS,預設60幀/秒),所以小球便產生了運動。
程式碼如下:
var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是关键词,分别是Canvas的宽和高 x+=2; ellipse(x,height/2,20,20); }
二、反彈的小球
經過一段時間後,小球會移出螢幕。為了不讓小球跑到螢幕之外,我們新增一個變數用來控制速度,並在小球離開螢幕時讓速度反向。
程式碼如下:
var x=0; var speed=2; function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(x,height/2,20,20); //width和height是关键词,分别是Canvas的宽和高 x+=speed; if(x>width||x<0){ speed*=-1; }
進一步,我們可以用兩個變數控制x、y方向的速度,實現小球在畫布上彈射的功能。
程式碼如下:
var x=200; var y=200; var Vx=2; var Vy=3; function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(x,y,20,20);//width和height是关键词,分别是Canvas的宽和高 x+=Vx; y+=Vy; if(x>width||x<0){ Vx*=-1; } if(y>height||y<0){ Vy*=-1; } }
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是js如何做出小球動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!