HTML5(九)-超強的 SVG 動畫

VG 動畫有很多種實現(xiàn)方法，也有很大SVG動畫庫，現(xiàn)在我們就來介紹 svg動畫實現(xiàn)方法都有哪些？

一、SVG 的 animation

SVG animation 有五大元素，他們控制著各種不同類型的動畫，分別為：

set
animate
animateColor
animateTransform
animateMotion

1.1、set

set 為動畫元素設(shè)置延遲，此元素是SVG中最簡單的動畫元素，但是他并沒有動畫效果。

使用語法：

<set attributeName="" attributeType="" to="" begin="" />

attributeName ：是要改變的元素屬性名稱。
attributeType ：是表明attributeName屬性值的列表，支持三個固定參數(shù) CSS/XML/auto，如x,y以及transform屬于XML，opacity屬于CSS。auto是瀏覽器自動判別的意思，也是默認(rèn)值，如果你不知道該選哪個就填auto，瀏覽器自己判別。
to ：動畫結(jié)束的屬性值。
begin ：動畫延遲時間。

eg：繪制一個半徑為200的圓，4秒之后，半徑變?yōu)?0。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <set attributeName="r" attributeType="XML" to="50" begin="4s" />
 </circle>
</svg>

1.2、animate

是基礎(chǔ)的動畫元素，實現(xiàn)單屬性的過渡效果。

使用語法：

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>

from ：過渡效果的屬性開始值。
to：過渡效果的屬性結(jié)束值。
begin：動畫開始時間。
dur：動畫過渡時間，控制動畫速度。
repeatCount：動畫重復(fù)次數(shù)。

eg：繪制一個半徑為200的圓，4秒之后半徑在2秒內(nèi)從200逐漸變?yōu)?0。

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
 <animate attributeName="r" from="200" to="50" 
  begin="4s" dur="2s" repeatCount="2"></animate>
</circle>

1.3、animateColor

控制顏色動畫，animate也可以實現(xiàn)這個效果，所以該屬性目前已被廢棄。

1.4、animateTransform

實現(xiàn)transform變換動畫效果，與css3的transform變換類似。實現(xiàn)平移、旋轉(zhuǎn)、縮放等效果。

使用語法：

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>

repeatCount：重復(fù)次數(shù)，設(shè)置為 indefinite 表示無限循環(huán)，一直執(zhí)行。
type：添加 transform 變換類型。
eg：繪制一個半徑為200的圓，4秒之后開始縮放，在2秒內(nèi)從1.5縮小到0倍。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <animateTransform attributeName="transform" begin="4s"  
   dur="2s" type="scale" from="1.5" to="0" 
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

1.5、animateMotion

可以定義動畫路徑，讓SVG各個圖形，沿著指定路徑運動。

使用語法：

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>

path：定義路徑，使用語法與《HTML5(八)——SVG 之 path 詳解》path的d屬性一致。
begin：延遲時間。
dur：動畫執(zhí)行時間。

eg：繪制一個半徑為10的圓，延遲4秒從左上角運動的右下角。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
  <animateMotion 
   path="M 0 0 L 320 320" 
   begin="4s" dur="2s"
   ></animateMotion>
 </circle>
</svg>

實際制作動畫的時候，動畫太單一不酷，需要同時改變多個屬性時，上邊的四種元素可以互相組合，同類型的動畫也能組合。以上這些元素雖然能夠?qū)崿F(xiàn)動畫，但是無法動態(tài)地添加事件，所以接下來我們就看看 js 如何制作動畫。

二、JavaScript 控制

上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內(nèi)置形狀元素，還可以給任意元素添加事件。

給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名或者addEventListener添加。

eg：使用SVG繪制地一條線，點擊線條地時候改變 x1 ,實現(xiàn)旋轉(zhuǎn)效果。

<svg width="800" height="800" id="svg">
    <line id="line" x1="100" y1="100" 
    x2="400" y2="300" 
    stroke="black" stroke-width="5"></line>  
  </svg>
<script>
 window.onload = function(){
  var line = document.getElementById("line")
  line.onclick = function(){
   let start = parseInt(line.getAttribute("x1")),
       end=400,dis = start-end
   requestAnimationFrame(next)
   let count = 0;
   function next(){
    count++
    let a = count/200,cur = Math.abs(start+ dis*a)
    line.setAttribute('x1',cur)
    if(count<200)requestAnimationFrame(next)
   }
  }
 }
</script>

js制作的SVG動畫，主要利用 requestAnimationFrame 來實現(xiàn)一幀一幀的改變。

我們上述制作的 SVG 圖形、動畫等，運行在低版本IE中，發(fā)現(xiàn)SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個元素需要添加 v:元素，樣式中還需要添加 behavier ，經(jīng)常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫。

三、Rapha?l.js (拉斐爾)

Raphael.js是通過SVG/VML+js實現(xiàn)跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類似于jquery，本質(zhì)還是一個javascript庫，使用簡單，容易上手。

使用之前需要先引入Raphael.js庫文件。cdn的地址為：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、創(chuàng)建畫布

Rapheal有兩種創(chuàng)建畫布的方式：

第一種：瀏覽器窗口上創(chuàng)建畫布

創(chuàng)建語法：

var paper = Raphael(x,y,width,height)

x,y是畫布左上角的坐標(biāo)，此時畫布的位置是絕對定位，有可能會與其他html元素重疊。width、height是畫布的寬高。

第二種：在一個元素中創(chuàng)建畫布

創(chuàng)建語法：

var paper = Raphael(element, width, height);

element是元素節(jié)點本身或ID width、height是畫布的寬度和高度。

3.2、繪制圖形

畫布創(chuàng)建好之后，該對象自帶SVG內(nèi)置圖形有矩形、圓形、橢圓形。他們的方法分別為：

paper.circle(cx, cy, r); // (cx , cy)圓心坐標(biāo) r 半徑
paper.rect(x, y, width, height, r); // (x,y)左上角坐標(biāo) width寬度 height高度 r圓角半徑(可選)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標(biāo) rx水平半徑 ry垂直半徑

eg：在div中繪制一個圓形，一個橢圓、一個矩形。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 paper.circle(150,150,150)
 paper.rect(0,0,300,300)
 paper.ellipse(150,150,100,150)
</script>

運行結(jié)果如下：

除了簡單圖形之外，還可以繪制復(fù)雜圖形，如三角形、心型，這時就使用path方法。

使用語法：paper.path(pathString)

pathString是由一個或多個命令組成，每個命令以字母開始，多個參數(shù)是由逗號分隔。

eg：繪制一個三角形。

let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")

還可以繪制文字，如果需要換行，使用 \n 。

文字語法：paper.text(x,y,text)

(x,y)是文字坐標(biāo)，text是要繪制的文字。

3.3、設(shè)置屬性

圖形繪制之后，我們通常會添加stroke、fill、stroke-width等讓圖形更美觀，Raphael使用attr給圖形設(shè)置屬性。

使用語法：circle.attr({"屬性名","屬性值","屬性名","屬性值",...})

如果只有屬性名沒有屬性值，則是獲取屬性，如果有屬性值，則是設(shè)置屬性。

注意：如果只設(shè)置一個屬性時，可以省略‘{}’。如：rect.attr('fill','pink')

eg：給上邊的矩形添加邊框和背景色。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 let rect = paper.rect(100,100,150,200)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>

3.4、添加事件

RaphaelJS一般具有以下事件：
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及對應(yīng)的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

使用語法：

obj.click(function(){
 //需要操作的內(nèi)容
})

3.5、添加動畫

animate為指定圖形添加動畫并執(zhí)行。

使用語法：

obj.animate({
 "屬性名1":屬性值1,
 "屬性名2":屬性值2,
  ...
},time,type)

屬性名和屬性值就根據(jù)你想要的動畫類型加就ok。

time：動畫所需時間。

type：指動畫緩動類型。常用值有：

linear - 線性漸變
ease-in | easeIn | < - 由慢到快
ease-out | easeOut | > - 由快到慢
ease-in-out | easeInOut | <> - 由慢到快再到慢
back-in | backIn - 開始時回彈
back-out | backOut - 結(jié)束時回彈
elastic - 橡皮筋
bounce - 彈跳

eg：點擊矩形，矩形緩緩變大。

<div id="box"></div>
<script>
 var paper = Raphael("box",800,500)
 let rect = paper.rect(100,100,150,100)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
 rect.attr('fill','pink')
 rect.click(function(){
  rect.animate({
   "width":300,
   "height":300
  },1000,"bounce")
 })
</script>

復(fù)制上邊的代碼，分別在各個瀏覽器和低版本IE瀏覽器運行，發(fā)現(xiàn)都可以正常運行。SVG的動畫庫挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫。

家好！歡迎來到本教程，我們將深入了解使用 HTML 畫布和 JavaScript 在代碼中創(chuàng)建有趣的氣泡的世界。最好的部分？我們將只使用一點 HTML 和所有 JavaScript，而不是 CSS 來實現(xiàn)所有這一切。

揭示概念

今天，我們要掌握以下幾個概念：

使用畫布上下文的 arc 方法創(chuàng)建圓。

利用 requestAnimationFrame 函數(shù)實現(xiàn)平滑的圓形動畫。

利用 JavaScript 類的強大功能來創(chuàng)建多個圓圈，而無需重復(fù)代碼。

向我們的圓圈添加描邊樣式和填充樣式以獲得 3D 氣泡效果。

你可以跟著我一起看，或者如果你想看源代碼，可以使用最終的codepen

入門

首先，我們需要一個 HTML5 Canvas 元素。 Canvas 是創(chuàng)建形狀、圖像和圖形的強大元素。這就是氣泡將產(chǎn)生的地方。讓我們來設(shè)置一下 -

<canvas id="canvas"></canvas>

為了使用畫布做任何有意義的事情，我們需要訪問它的上下文。 Context 提供了在畫布上渲染對象和繪制形狀的接口。

讓我們訪問畫布及其上下文。

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

我們將設(shè)置畫布以使用整個窗口的高度和寬度 -

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

讓我們通過添加一些 css 為畫布提供一個漂亮的舒緩淺藍(lán)色背景。這是我們要使用的唯一 CSS。如果您愿意，也可以使用 JavaScript 來完成此操作。

#canvas {
  background: #00b4ff;
}

是時候創(chuàng)造泡泡了！

讓我們進(jìn)入有趣的部分。我們將通過單擊畫布來創(chuàng)建氣泡。為了實現(xiàn)這一點，我們首先創(chuàng)建一個點擊事件處理程序：

canvas.addEventListener('click', handleDrawCircle);

由于我們需要知道在畫布上單擊的位置，因此我們將在句柄 DrawCircle 函數(shù)中跟蹤它并使用事件的坐標(biāo) -

//We are adding x and y here because we will need it later.
let x, y
const handleDrawCircle = (event) => {
  x = event.pageX;
  y = event.pageY;

// Draw a bubble!
  drawCircle(x, y);
};

用圓弧法畫圓

為了創(chuàng)建圓圈，我們將利用畫布上下文中可用的 arc 方法。 Arc 方法接受 x 和 y - 圓心、半徑、起始角和結(jié)束角，對于我們來說，這將是 0 和 2* Math.PI，因為我們正在創(chuàng)建一個完整的圓。

const drawCircle = (x, y) => {
  context.beginPath();
  context.arc(x, y, 50, 0, 2 * Math.PI);

  context.strokeStyle = 'white';
  context.stroke();
};

使用 requestAnimationFrame 方法移動圓圈

現(xiàn)在我們有了圓圈，讓我們讓它們移動，因為……

GIF

請記住，當(dāng)我們創(chuàng)建圓時，我們使用了 arc 方法，它接受 x 和 y 坐標(biāo) - 圓的中心。如果我們快速移動圓的 x 和 y 坐標(biāo)，就會給人一種圓在移動的印象。讓我們試試吧！

//Define a speed by which to increment to the x and y coordinates

const dx = Math.random() * 3;
const dy = Math.random() * 7;//Increment the center of the circle with this speed
x = x + dx;
y = y - dy;

我們可以將其移至函數(shù)內(nèi) -

let x, y;

const move = () => {
  const dx = Math.random() * 3;
  const dy = Math.random() * 7;  x = x + dx;
  y = y - dy;
};

為了讓我們的圓圈無縫移動，我們將創(chuàng)建一個動畫函數(shù)并使用瀏覽器的 requestAnimationFrame 方法來創(chuàng)建一個移動的圓圈。

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  move();
    drawCircle(x,y);  requestAnimationFrame(animate);
};//Don't forget to call animate at the bottom 
animate();

創(chuàng)建粒子：引入粒子類

現(xiàn)在我們已經(jīng)創(chuàng)建了一個圓圈，是時候創(chuàng)建多個圓圈了！

但在我們創(chuàng)建多個圓圈之前，讓我們準(zhǔn)備一下我們的代碼。為了避免重復(fù)我們的代碼，我們將使用類并引入 Particle 類。粒子是我們動態(tài)藝術(shù)作品和動畫的構(gòu)建塊。每個氣泡都是一個粒子，具有自己的位置、大小、運動和顏色屬性。讓我們定義一個 Particle 類來封裝這些屬性：

class Particle {
  constructor(x = 0, y = 0) {}

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

讓我們將一些已設(shè)置的常量移至 Particle 類 -

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
  }

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

draw 方法將負(fù)責(zé)在畫布上渲染粒子。我們已經(jīng)在drawCircle中實現(xiàn)了這個功能，所以讓我們將它移動到我們的類中并將變量更新為類變量

class Particle {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 50;
    this.dx = Math.random() * 3;
    this.dy = Math.random() * 7;
    this.color = 'white';
  }

  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    context.strokeStyle = this.color;
    context.stroke();    context.fillStyle = this.color;
    context.fill();
  }  move() {}
}

同樣，讓我們在類中移動 move 函數(shù) -

move() {
    this.x = this.x + this.dx;
    this.y = this.y - this.dy;
}

現(xiàn)在，我們需要確保在事件處理程序中調(diào)用 Particle 類。

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  const particle = new Particle(x, y);
};canvas.addEventListener('click', handleDrawCircle);

由于我們需要在 animate 函數(shù)中訪問該粒子，以便調(diào)用其 move 方法，因此我們將該粒子存儲在一個名為 molecularArray 的數(shù)組中。當(dāng)創(chuàng)建大量粒子時，這個數(shù)組也會很有幫助。這是反映這一點的更新代碼 -

const particleArray = [];

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;  const particle = new Particle(x, y);
  particleArray.push(particle);
};canvas.addEventListener('click', handleDrawCircle);

記得也要更新動畫功能 -

此時，您將在屏幕上看到這個粒子 -

驚人的！現(xiàn)在，到了有趣的部分！讓我們創(chuàng)建很多圓圈并設(shè)計它們的樣式，使它們看起來像氣泡。

為了創(chuàng)建大量氣泡，我們將使用 for 循環(huán)創(chuàng)建粒子并將它們添加到我們在此處創(chuàng)建的粒子數(shù)組中。

const handleDrawCircle = (event) => {
  const x = event.pageX;
  const y = event.pageY;

  for (let i = 0; i < 50; i++) {
    const particle = new Particle(x, y);
    particleArray.push(particle);
  }
};canvas.addEventListener('click', handleDrawCircle);

在動畫函數(shù)中，我們將通過清除畫布并在新位置重新繪制粒子來不斷更新畫布。這會給人一種圓圈在移動的錯覺。

const animate = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  particleArray.forEach((particle) => {
    particle?.move();
    particle?.draw();
  });  requestAnimationFrame(animate);
};animate();

現(xiàn)在我們有了移動的氣泡，是時候給它們添加顏色，使它們看起來像氣泡了！

我們將通過向氣泡添加漸變填充來實現(xiàn)此目的。這可以使用 context.createRadialGradient 方法來完成。

const gradient = context.createRadialGradient(
  this.x,
  this.y,
  1,
  this.x + 0.5,
  this.y + 0.5,
  this.radius
);

gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');context.fillStyle = gradient;

總結(jié)

恭喜！您剛剛僅使用 HTML Canvas 和 JavaScript 創(chuàng)建了一些超級有趣的東西。您已經(jīng)學(xué)習(xí)了如何使用 arc 方法、利用 requestAnimationFrame、利用 JavaScript 類的強大功能以及使用漸變設(shè)計氣泡以實現(xiàn) 3D 氣泡效果。

請隨意嘗試顏色、速度和大小，使您的動畫真正獨一無二。

我希望您在學(xué)習(xí)本教程時能像我在創(chuàng)建它時一樣獲得樂趣。現(xiàn)在，輪到你進(jìn)行實驗了。我很想看看你是否嘗試過這個以及你創(chuàng)造了什么。與我分享您的代碼鏈接，我很樂意查看。

在線咨詢

上一篇：敲代碼只服這一個！幾行代碼搞定京東官網(wǎng)，徹底征服所有人
下一篇：React入門：從入口文件到組件化的奧秘