How to implement custom path animation in Canvas?-HTML Tutorial-php.cn

How to implement custom path animation in Canvas?

php中世界最好的语言

Release： 2018-01-19 09:21:14

Original

1782 people have browsed it

This time I will show you how to implement custom path animation in Canvas? , What are the precautions for implementing custom path animation in Canvas? The following is a practical case, let’s take a look.

In a recent project, the author needs to make a new requirement: implement custom path animation in canvas. The so-called custom path here not only includes a straight line, but may be a combination of motions of multiple straight lines, and even includes Bezier curves

So how can we achieve this animation effect in canvas? In fact, it is very simple. SVG is very good at processing paths. Therefore, to implement custom path animation in canvas, we need to use the power of SVG.

Create Path

Before making animation, we must first get the path of the animation. For this, we can directly use the path definition rules of svg. For example, we define a more complex path (which end You can try it out for yourself, and I won’t show it here). Then, we need to import the defined path into a newly generated path element (we just use the svg API, so we don’t need to insert it into Page)

const path = 'M0,0 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z';
 
const pathElement = document.createElementNS('http://www.w3.org/2000/svg',"path");
pathElement.setAttributeNS(null, 'd', path);
getTotalLength与getPointAtLength

Copy after login

The two APIs provided by SVGPathElement are very critical. It can be said that it is the core place to implement path animation (the implementation of custom path animation in svg is generally solved through these two APIs) ) For details, please click: SVGPathElement MDN

getTotalLength method can get the total length of SVGPathElement

getPointAtLength method, passing in a length x, will return the end coordinate of the length x from the starting point of SVGPathElement.

Use these two APIs to continuously update the coordinates of the graphics drawn in the canvas through a loop to achieve path animation:

const length = pathElement.getTotalLength();
const duration = 1000; // 动画总时长
const interval = length / duration;
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
let time = 0, step = 0;
 
const timer = setInterval(function() {
  if (time <= duration) {
    const x = parseInt(pathElement.getPointAtLength(step).x);
    const y = parseInt(pathElement.getPointAtLength(step).y);
    move(x, y);  // 更新canvas所绘制图形的坐标
    step++;
  } else {
    clearInterval(timer)
  }
}, interval);
 
function move(x, y) {
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.beginPath();
   context.arc(x, y, 25, 0, Math.PI*2, true);
   context.fillStyle = '#f0f';
   context.fill();
   context.closePath();
}

Copy after login

Finally, we encapsulate it. Implement a simple function to implement custom animation in canvas:

function customizePath(path, func) {
    const pathElement = document.createElementNS('http://www.w3.org/2000/svg',"path");
    pathElement.setAttributeNS(null, 'd', path);
      const length = pathElement.getTotalLength();
    const duration = 1000;
    const interval = length / duration;
    let time = 0, step = 0;
   
      const timer = setInterval(function() {
        if (time <= duration) {
              const x = parseInt(pathElement.getPointAtLength(step).x);
              const y = parseInt(pathElement.getPointAtLength(step).y);
              func(x, y);
              step++;
        } else {
              clearInterval(timer)
        }
     }, interval);
}

Copy after login

const path = 'M0,0 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z';
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
function move(x, y) {
      context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
      context.arc(x, y, 25, 0, Math.PI*2, true);
      context.fillStyle = '#f0f';
      context.fill();
      context.closePath();
}
customizePath(path, move);

Copy after login

The implementation idea is roughly as described above, but this is not the final result. When we decide to create a custom path animation in canvas, we not only have to consider how to implement it, but also

Performance Optimization. For example, in this implementation idea, can we reduce the number of unnecessary renderings? How to control frame rate to achieve optimum? etc.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!