如何在Canvas中實現自定義路徑動畫

在最近的項目中筆者須要作一個新需求：在canvas中實現自定義的路徑動畫。這裏所謂的自定義路徑不僅僅包括一條直線，也許是多條直線的運動組合，甚至還包含了貝塞爾曲線，所以，這個動畫也許是下面這個樣子的：

那麼如何才能在canvas中實現這種動畫效果呢？其實很簡單，對於路徑的處理svg很是在行，所以在canvas中實現自定義路徑動畫，咱們須要藉助svg的力量。

建立Path

製做動畫前，先要拿到動畫的路徑，對此咱們能夠直接使用svg的path定義規則，好比咱們定義了一條較爲複雜的路徑（它到底長什麼樣你們能夠本身試試，這裏就不展現了），而後，咱們須要將定義好的路徑導入進一個新生成的path元素中（咱們只是藉助svg的api，所以並不須要將其插到頁面內）

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

SVGPathElement提供的這兩個api很關鍵，能夠說它是實現路徑動畫的最爲核心的地方（在svg內實現自定義路徑動畫通常也是經過這兩個api去解決）詳情請戳：SVGPathElement MDN

getTotalLength方法能夠獲取SVGPathElement的總長度

getPointAtLength方法，傳入一個長度x，將返回距離SVGPathElement起點的長度爲x的終點座標。

利用這兩個api，經過循環的方式不斷去更新canvas內所繪製的圖形座標，便可實現路徑動畫：

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

最後，咱們把它封裝一下，便可實現一個在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);
}

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

實現思路大體如上所述，然而這並非最終成果。當咱們決定要在canvas製做自定義路徑動畫時，咱們不只要考慮如何實現，更要考慮性能優化，好比在這個實現思路中，咱們是否能夠減小沒必要要的渲染次數？幀率如何控制達到最優？等等。

雖然它們並不在這篇文章的討論範圍中，當也應當值得咱們思考。