Canvas Animation (I)

1. Acceleration motion

Here we mainly use the relationship between acceleration, velocity, time and distance

<template>
	<div id="app">
		<canvas id="canvas"></canvas>
	</div>
</template>

<script>
	export default {
  name: "App".mounted() {
    const eleCvas = document.getElementById("canvas");
    const cxt = eleCvas.getContext("2d");
    // Initializes the variable, that is, initializes the circle with X coordinates 0
    let x = 0;
    let v = 0;
    let v1 = 0;
    const a = 200;
    const t = 1/60;
    // Animation loop
    (function frame() {
      window.requestAnimationFrame(frame);
      // Each animation loop clears the canvas before redrawing a new shape
      cxt.clearRect(0.0, eleCvas.width, eleCvas.height);
      / / draw circle
      cxt.beginPath();
      cxt.arc(x, 70.20.0, (360 * Math.PI) / 180.true);
      cxt.closePath();
      cxt.fillStyle = "red";
      cxt.fill();
      // Variable increments assume 60 FPS at a time 1/60
      // v = v0+at
      // s = v0t+2at ^ 2
      v1 = v + a * t;
      x =  x +  v * t + 2 * a * t * t;
      v = v1;
    })();
  }
};
</script>

<style>
	#app {
		text-align: center;
	}
	canvas {
		border: 1px solid red;
	}
</style>
Copy the code

The direction of acceleration above is changed to the left, and given a certain initial speed, it becomes a deceleration motion, and then through the critical point velocity is zero, it can represent a frictional deceleration motion; Arc (x, 70, 20, 0, (360 * math.pi) / 180, true); X and 70 in theta can be changed to vertically accelerated motion

Description of dynamic effect cycle

SetTimeout and setInterval are not apis for continuous loops, so they may not be able to achieve smooth animation, so use requestAnimationFrame

Comparison of advantages and disadvantages

• SetTimeOut (fn, time) and setInterval (fn, time)

Advantages: The animation interval can be customized. Disadvantages: Hidden browser tags will still run, resulting in a waste of resources. Unable to execute on time and out of sync with browser refresh rate.

• requestAnimationFrame(fn)

Advantages: better performance. When the browser TAB is hidden, it will not run. Synchronize with the browser refresh rate. Cons: The animation interval cannot be customized

2, circular motion

The key here is to apply the trigonometric functions sin,cos, js to math.sin (radian), math.cos (radian)

<template>
  <div id="app">
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    const eleCvas = document.getElementById("canvas");
    const cxt = eleCvas.getContext("2d");
    // Red sphere radius
    const r1 = 10;
    let x1; y1;

    // The center and radius of the red ball track
    const x = 150;
    const y = 75;
    const r = 60;
    // Run radians per frame
    const interval = 0. 02;
    // Initial radians
    let currentAngle = 0;
    // Animation loop
    cxt.fillStyle="red";
    (function frame() {
      window.requestAnimationFrame(frame);
      // Each animation loop clears the canvas before redrawing a new shape
      cxt.clearRect(0.0, eleCvas.width, eleCvas.height);
      / / draw circle
      cxt.beginPath(a); cxt.arc(x, y, r, 0, (360 * Math.PI) / 180, false);
      cxt.closePath(a); cxt.stroke(a); cxt.beginPath(a); currentAngle += interval; x1 = x + Math.cos(currentAngle) * r;
      y1 = y + Math.sin(currentAngle) * r;
      cxt.arc(x1, y1, r1, 0, (360 * Math.PI) / 180, false);
      cxt.closePath(a); cxt.fill(a); }) (); }}; </script> <style> #app { text-align: center; } canvas { border:1px solid red;
}
</style>

Copy the code

Removing the large circle means that a ball moves in a uniform circular motion. If the y coordinate of the center of the ball is unchanged, it means a straight motion back and forth left and right, while the x coordinate is unchanged, it means a straight motion back and forth up and down. You can also use setInterval as a clock

related

• Canvas Animation (2)
• Introduction to canvas
• Canvas introduction should know the knowledge of junior high school