How to realize Circular Motion Animation with JavaScript
Today, I would like to share with you the relevant knowledge about how to achieve circular motion animation in JavaScript. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
1. A circle moving in a circle
A circle with a radius of size starts from the center of the canvas (canvas.width/2,canvas.height/2) and moves along a circle. Write the following HTML code.
A circle moving around a circle.
Varcanvas=document.createElement ('canvas'); varctx=canvas.getContext (' 2d')
Document.body.appendChild (canvas)
Canvas.width=window.innerWidth
Canvas.height=window.innerHeight
Ctx.beginPath ()
Ctx.fillStyle='rgba (0,0,0,1)'
Ctx.fillRect (0, canvas.width, canvas.height); varangle=360;varpos= [canvas.width/2,canvas.height/2]; varsize=10;varspeed=1;varcurve=0.5;varcolor='rgba (69, 204, 255. 95)'; functiondraw ()
{varradians=angle*Math.PI/180
Pos [0] + = Math.cos (radians) * speed
Pos [1] + = Math.sin (radians) * speed
Angle+=curve
Ctx.strokeStyle=color
Ctx.beginPath ()
Ctx.arc (pos [0], pos [1], size,0,2*Math.PI)
Ctx.stroke ()
Window.requestAnimationFrame (draw)
}
Window.requestAnimationFrame (draw)
View Code
Open the html file containing this HTML code in the browser, and you can render the animation shown in figure 1 in the browser window.
Figure 1? A circle moving along a circle.
As can be seen from figure 1, the starting point (canvas.width/2,canvas.height/2) of the circle motion is located at the position of angle==360 °on the circle along which the motion is moving.
two。 Two circles moving around the circle
Place two circles in the canvas, both of which start at the center of the canvas (canvas.width/2,canvas.height/2). One circle moves along the circle from 45 degrees along the circumference, and the other circle moves along the circle from the circumference of the circle. Write the following HTML code.
A circle moving around a circle.
Varcanvas=document.createElement ('canvas'); varctx=canvas.getContext (' 2d')
Document.body.appendChild (canvas)
Canvas.width=window.innerWidth
Canvas.height=window.innerHeight
Ctx.beginPath ()
Ctx.fillStyle='rgba (0,0,0,1)'
Ctx.fillRect (0Jing 0, canvas.width, canvas.height); varangle1=45;varangle2=135;varpos1= [canvas.width/2,canvas.height/2]; varpos2= [canvas.width/2,canvas.height/2]; varsize=10;varspeed=1;varcurve=0.5;varcolor1='rgba (69pr. 204 and 255pr. 95)'; varcolor2='rgba (255pr. 212 and 50pr. 95)'; functiondraw ()
{varradians=angle1*Math.PI/180
Pos1 [0] + = Math.cos (radians) * speed
Pos1 [1] + = Math.sin (radians) * speed
Angle1+=curve
Radians=angle2*Math.PI/180
Pos2 [0] + = Math.cos (radians) * speed
Pos2 [1] + = Math.sin (radians) * speed
Angle2+=curve
Ctx.strokeStyle=color1
Ctx.beginPath ()
Ctx.arc (pos1 [0], pos1 [1], size,0,2*Math.PI)
Ctx.stroke ()
Ctx.strokeStyle=color2
Ctx.beginPath ()
Ctx.arc (pos2 [0], pos2 [1], size,0,2*Math.PI)
Ctx.stroke (); / / fade ()
Window.requestAnimationFrame (draw)
} functionfade ()
{
Ctx.beginPath ()
Ctx.fillStyle='rgba (0,0,0,.03)'
Ctx.fillRect (0pen 0, canvas.width, canvas.height)
}
Window.requestAnimationFrame (draw)
View Code
Open the html file containing this HTML code in the browser, and you can render the animation shown in figure 2 in the browser window.
These are all the contents of the article "how to achieve Circular Motion Animation in JavaScript". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
