First look at the animation:

This animation looks a little difficult, but it’s actually easier than expected.

It’s just a simple combination of translation and rotation, so let’s look at it in general.

1. Mouse position

To follow the mouse, first get the position of the mouse.

You can bind the mousemove event to the canvas, which takes the absolute position of the mouse relative to the page (pageX, pageY) and subtracts the offset of the canvas itself to get the position of the mouse relative to the canvas. The core code is:

canvas.addEventListener('mousemove', event => {
  mouse.x = event.pageX - canvas.offsetLeft
  mouse.y = event.pageY - canvas.offsetTop
})
Copy the code

2. Move the mouse pointer relative to the arrow

Knowing the position of the mouse and arrow, you can calculate useful values, such as the horizontal and vertical distance between the two.

You can figure out the Angle from the inverse of the trig function tangent. There are two arctangent functions atan and atan2 in the Math object. One of the more useful is the less obvious Atan2.

var dx = mouse.x - arrow.x
var dy = mouse.y - arrow.y
var angle = Math.atan2(dy, dx)
Copy the code

3. Rotate animation

Use requestAnimationFrame (canvas animation general) to update the arrow Angle in real time to create a mouse rotation animation.

; (function drawFrame() {
  window.requestAnimationFrame(drawFrame)
  context.clearRect(0.0, canvas.width, canvas.height)
  var dx = mouse.x - arrow.x
  var dy = mouse.y - arrow.y
  var angle = Math.atan2(dy, dx)
  arrow.angle = angle
  arrow.draw(context)
})();
Copy the code

DrawFrame acts as the browser’s callback before the next redraw, emptying the canvas each frame and drawing arrows at a specific Angle. The effect is as follows:

Click to see the effect

4. Pan animation

To achieve a pan animation, you just need to change the position of the arrow at a constant speed.

arrow.x += vx
arrow.y += vy
Copy the code

The difficulty here is how to calculate horizontal and vertical velocities. We assume that the mouse movement speed is V, then the relationship of the three should satisfy:

So, the angles have just been figured out, so according to the trigonometric functions:

vx = Math.cos(angle) * v
vy = Math.sin(angle) * v
Copy the code

The following movement without considering rotation is as follows:

Click to see the effect

5. End result

Move toward the mouse and point to the mouse to achieve the effect of the beginning of the article.

Click here to see the effect

Note that the following judgments are added to the code to prevent the oscillating bug of panning animations.

if (dx * dx + dy * dy < v * v) {
  vx = 0
  vy = 0
} else {
  vx = Math.cos(angle) * v
  vy = Math.sin(angle) * v
}
Copy the code

We can analyze the reason for the oscillation. For example, if the arrow is 1 pixel away from the mouse, the next frame plus speed 2, the distance becomes -1 and the orientation becomes the opposite direction. The next frame, the distance is one again, and it oscillates. The solution here is rather blunt: once the distance is less than V (the velocity is the distance traveled in a frame), it simply stops moving.

This animation is very common and mentioned in Bibliography 2, but the principle is surprisingly simple.

The same logic applies to aircraft games where enemy planes automatically move towards you.

This paper is just a general analysis of the principle, hope to help.

To the end.


At the end of 2019, I set a flag that I would study canvas animation technology in 2020.

(The two-dimensional code in the picture is my only wechat account. If you want to add it, please note [Gold digging].)

In this series, I want to write some common animation knowledge, this article is the second, the length may vary. For more information, please check out my personal homepage or series catalog.

Because of the length problem, according to the past experience, the number of likes is not too many, after all, people like to give the kind of article that can not finish reading in a short time. Yeah, I guess I do, too. ^_^

In fact, writing articles is mainly for myself, which is a witness of self-progress. It might be better to have that mindset.

In addition, I have read three books on Canvas technology. I think I passed the basics.

1. HTML5 Canvas Core Technology

2. HTML5+JavaScript Animation Basics

3. WebGL Programming Guide

Some articles in this series may refer to the knowledge system inside. For some knowledge belonging to the domain consensus, if there is partial similarity, we can only say: “How can it be regarded as plagiarism if we learn it by ourselves?” .

I’m kidding. I should mention where I got the idea. I particularly like this quote from the Elite Daily Class article:

As for the content of the article, canvas API, this series may not be prepared to introduce one by one, please forgive me for beginners. MDN all have, quite detailed. At the same time, the article encountered will be briefly mentioned. The main core is to illustrate some of the skills and principles of personal understanding of the bar. I’m also going to analyze some of the cool animations on Codepen, and if I have time I’ll probably analyze a couple of animation engines, all 2D of course.

Thank you again for reading this far. See you in the next article.