So erstellen Sie eine kleine Ballanimation in js

Dieses Mal zeige ich Ihnen, wie Sie mit js eine Animation erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer kleinen Ballanimation mit js? . Werfen wir einen Blick darauf.

1. Ein sich bewegender Ball

In diesem Abschnitt werden wir p5.js verwenden, um einen kleinen Ball zu erstellen, der sich auf dem Bildschirm bewegt.

Die Idee besteht darin, Variablen zu verwenden, um die Position des Balls aufzuzeichnen und sie dann in der Funktion draw() zu ändern. Da die Funktion draw() weiterhin ausgeführt wird (Frequenz beträgt FPS, Standard 60 Bilder/). zweitens), also bewegt sich der Ball.

Der Code lautet wie folgt:

var x=0; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //width和height是关键词，分别是Canvas的宽和高 
 x+=2; 
 ellipse(x,height/2,20,20); 
}

2. Der springende Ball

Nach einer gewissen Zeit Der Ball wird sich vom Bildschirm entfernen. Um zu verhindern, dass der Ball den Bildschirm verlässt, fügen wir eine Variable hinzu, um die Geschwindigkeit zu steuern und die Geschwindigkeit umzukehren, wenn der Ball den Bildschirm verlässt.

Der Code lautet wie folgt:

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; 
}

Außerdem können wir zwei Variablen verwenden, um die Geschwindigkeit in x- und y-Richtung zu steuern, um die Funktion des Ballauswurfs auf der Leinwand zu realisieren.

Der Code lautet wie folgt:

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; 
 } 
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln PHP chinesische Website!

Empfohlene Lektüre:

So konvertieren Sie JS-Datentypen

Detaillierte Erläuterung der impliziten Typkonvertierung in JS

So verwenden Sie den $http-Dienst in Angular

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine kleine Ballanimation in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!