H5在Canvas中如何實現(xiàn)自定義路徑動畫-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)網(wǎng)絡(luò)公司擁有10余年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗，近千家客戶的共同信賴。提供成都網(wǎng)站設(shè)計、成都做網(wǎng)站、網(wǎng)站開發(fā)、網(wǎng)站定制、賣友情鏈接、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)公司、網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

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

H5在Canvas中如何實現(xiàn)自定義路徑動畫

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

創(chuàng)建Path

制作動畫前，先要拿到動畫的路徑，對此我們可以直接使用svg的path定義規(guī)則，比如我們定義了一條較為復(fù)雜的路徑（它到底長什么樣大家可以自己試試，這里就不展示了），然后，我們需要將定義好的路徑導(dǎo)入進(jìn)一個新生成的path元素中（我們只是借助svg的api，因此并不需要將其插到頁面內(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提供的這兩個api很關(guān)鍵，可以說它是實現(xiàn)路徑動畫的最為核心的地方（在svg內(nèi)實現(xiàn)自定義路徑動畫一般也是通過這兩個api去解決）詳情請戳：SVGPathElement MDN

getTotalLength方法可以獲取SVGPathElement的總長度

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

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

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所繪制圖形的坐標(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();
}

最后，我們把它封裝一下，即可實現(xiàn)一個在canvas中實現(xià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);

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

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

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司其它相關(guān)文章！

以上就是H5在Canvas中如何實現(xiàn)自定義路徑動畫，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：H5在Canvas中如何實現(xiàn)自定義路徑動畫-創(chuàng)新互聯(lián)
分享URL：http://muchs.cn/article22/ioccc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站收錄、動態(tài)網(wǎng)站、網(wǎng)站制作、微信公眾號、自適應(yīng)網(wǎng)站

廣告

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

微信小程序開發(fā)