本篇文章給大家分享的是有關(guān)H5在Canvas中如何實(shí)現(xiàn)自定義路徑動(dòng)畫(huà)，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供盤(pán)龍網(wǎng)站建設(shè)、盤(pán)龍做網(wǎng)站、盤(pán)龍網(wǎng)站設(shè)計(jì)、盤(pán)龍網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、盤(pán)龍企業(yè)網(wǎng)站模板建站服務(wù)，十余年盤(pán)龍做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

在最近的項(xiàng)目中筆者需要做一個(gè)新需求：在canvas中實(shí)現(xiàn)自定義的路徑動(dòng)畫(huà)。這里所謂的自定義路徑不單單包括一條直線(xiàn)，也許是多條直線(xiàn)的運(yùn)動(dòng)組合，甚至還包含了貝塞爾曲線(xiàn)，因此，這個(gè)動(dòng)畫(huà)也許是下面這個(gè)樣子的：

那么如何才能在canvas中實(shí)現(xiàn)這種動(dòng)畫(huà)效果呢？其實(shí)很簡(jiǎn)單，對(duì)于路徑的處理svg非常在行，因此在canvas中實(shí)現(xiàn)自定義路徑動(dòng)畫(huà)，我們需要借助svg的力量。

創(chuàng)建Path

制作動(dòng)畫(huà)前，先要拿到動(dòng)畫(huà)的路徑，對(duì)此我們可以直接使用svg的path定義規(guī)則，比如我們定義了一條較為復(fù)雜的路徑（它到底長(zhǎng)什么樣大家可以自己試試，這里就不展示了），然后，我們需要將定義好的路徑導(dǎo)入進(jìn)一個(gè)新生成的path元素中（我們只是借助svg的api，因此并不需要將其插到頁(yè)面內(nèi)）

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提供的這兩個(gè)api很關(guān)鍵，可以說(shuō)它是實(shí)現(xiàn)路徑動(dòng)畫(huà)的最為核心的地方（在svg內(nèi)實(shí)現(xiàn)自定義路徑動(dòng)畫(huà)一般也是通過(guò)這兩個(gè)api去解決）詳情請(qǐng)戳：SVGPathElement MDN

getTotalLength方法可以獲取SVGPathElement的總長(zhǎng)度

getPointAtLength方法，傳入一個(gè)長(zhǎng)度x，將返回距離SVGPathElement起點(diǎn)的長(zhǎng)度為x的終點(diǎn)坐標(biāo)。

利用這兩個(gè)api，通過(guò)循環(huán)的方式不斷去更新canvas內(nèi)所繪制的圖形坐標(biāo)，即可實(shí)現(xiàn)路徑動(dòng)畫(huà)：

const length = pathElement.getTotalLength();
const duration = 1000; // 動(dòng)畫(huà)總時(shí)長(zhǎng)
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所繪制圖形的坐標(biāo)
    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();
}

最后，我們把它封裝一下，即可實(shí)現(xiàn)一個(gè)在canvas中實(shí)現(xiàn)自定義動(dòng)畫(huà)的簡(jiǎn)易函數(shù)啦：

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

實(shí)現(xiàn)思路大致如上所述，然而這并不是最終成果。當(dāng)我們決定要在canvas制作自定義路徑動(dòng)畫(huà)時(shí)，我們不僅要考慮如何實(shí)現(xiàn)，更要考慮性能優(yōu)化，比如在這個(gè)實(shí)現(xiàn)思路中，我們是否可以減少不必要的渲染次數(shù)？幀率如何控制達(dá)到最優(yōu)？等等。

雖然它們并不在這篇文章的討論范圍中，當(dāng)也應(yīng)當(dāng)值得我們思考。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

以上就是H5在Canvas中如何實(shí)現(xiàn)自定義路徑動(dòng)畫(huà)，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。