html5在Canvas中如何實(shí)現(xiàn)自定義路徑動(dòng)畫(huà)

這篇文章主要介紹html5在Canvas中如何實(shí)現(xiàn)自定義路徑動(dòng)畫(huà)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專(zhuān)注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)翔安免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

在最近的項(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è)樣子的：

html5在Canvas中如何實(shí)現(xiàn)自定義路徑動(dòng)畫(huà)

那么如何才能在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);

以上是html5在Canvas中如何實(shí)現(xiàn)自定義路徑動(dòng)畫(huà)的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：html5在Canvas中如何實(shí)現(xiàn)自定義路徑動(dòng)畫(huà)
轉(zhuǎn)載來(lái)于：http://bm7419.com/article32/iiocsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、定制開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、面包屑導(dǎo)航、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都app開(kāi)發(fā)公司