이번에는 js로 작은 공animation을 만드는 방법을 보여드리겠습니다. js로 작은 공 애니메이션을 만들 때 주의사항은 무엇인가요?
1. 움직이는 공
이 섹션에서는 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); }
2. 튀는 공
일정 시간이 지나면 공이 화면 밖으로 나옵니다. 공이 화면 밖으로 나가는 것을 방지하기 위해 공이 화면을 떠날 때 속도를 제어하고 속도를 반전시키는 변수를 추가합니다.
코드는 다음과 같습니다:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!