整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
VG 動(dòng)畫(huà)有很多種實(shí)現(xiàn)方法，也有很大SVG動(dòng)畫(huà)庫(kù)，現(xiàn)在我們就來(lái)介紹 svg動(dòng)畫(huà)實(shí)現(xiàn)方法都有哪些？
SVG animation 有五大元素，他們控制著各種不同類(lèi)型的動(dòng)畫(huà)，分別為：
1.1、set
set 為動(dòng)畫(huà)元素設(shè)置延遲，此元素是SVG中最簡(jiǎn)單的動(dòng)畫(huà)元素，但是他并沒(méi)有動(dòng)畫(huà)效果。
使用語(yǔ)法：
<set attributeName="" attributeType="" to="" begin="" />eg：繪制一個(gè)半徑為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ǔ)的動(dòng)畫(huà)元素，實(shí)現(xiàn)單屬性的過(guò)渡效果。
使用語(yǔ)法：
<animate
attributeName="r"
from="200" to="50"
begin="4s" dur="2s"
repeatCount="2"
></animate>eg：繪制一個(gè)半徑為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
控制顏色動(dòng)畫(huà)，animate也可以實(shí)現(xiàn)這個(gè)效果，所以該屬性目前已被廢棄。
1.4、animateTransform
實(shí)現(xiàn)transform變換動(dòng)畫(huà)效果，與css3的transform變換類(lèi)似。實(shí)現(xiàn)平移、旋轉(zhuǎn)、縮放等效果。
使用語(yǔ)法：
<animateTransform attributeName="transform" type="scale"
from="1.5" to="0"
begin="2s" dur="3s"
repeatCount="indefinite"></animateTransform><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
可以定義動(dòng)畫(huà)路徑，讓SVG各個(gè)圖形，沿著指定路徑運(yùn)動(dòng)。
使用語(yǔ)法：
<animateMotion
path="M 0 0 L 320 320"
begin="4s" dur="2s"></animateMotion>eg：繪制一個(gè)半徑為10的圓，延遲4秒從左上角運(yùn)動(dòng)的右下角。
<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>實(shí)際制作動(dòng)畫(huà)的時(shí)候，動(dòng)畫(huà)太單一不酷，需要同時(shí)改變多個(gè)屬性時(shí)，上邊的四種元素可以互相組合，同類(lèi)型的動(dòng)畫(huà)也能組合。以上這些元素雖然能夠?qū)崿F(xiàn)動(dòng)畫(huà)，但是無(wú)法動(dòng)態(tài)地添加事件，所以接下來(lái)我們就看看 js 如何制作動(dòng)畫(huà)。
上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內(nèi)置形狀元素，還可以給任意元素添加事件。
給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名 或者addEventListener添加。
eg：使用SVG繪制地一條線，點(diǎn)擊線條地時(shí)候改變 x1 ,實(shí)現(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動(dòng)畫(huà)，主要利用 requestAnimationFrame 來(lái)實(shí)現(xiàn)一幀一幀的改變。
我們上述制作的 SVG 圖形、動(dòng)畫(huà)等，運(yùn)行在低版本IE中，發(fā)現(xiàn)SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個(gè)元素需要添加 v:元素，樣式中還需要添加 behavier ，經(jīng)常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫(kù)。
Raphael.js是通過(guò)SVG/VML+js實(shí)現(xiàn)跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類(lèi)似于jquery，本質(zhì)還是一個(gè)javascript庫(kù)，使用簡(jiǎn)單，容易上手。
使用之前需要先引入Raphael.js庫(kù)文件。cdn的地址為：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js
3.1、創(chuàng)建畫(huà)布
Rapheal有兩種創(chuàng)建畫(huà)布的方式：
第一種：瀏覽器窗口上創(chuàng)建畫(huà)布
創(chuàng)建語(yǔ)法：
var paper = Raphael(x,y,width,height)
x,y是畫(huà)布左上角的坐標(biāo)，此時(shí)畫(huà)布的位置是絕對(duì)定位，有可能會(huì)與其他html元素重疊。width、height是畫(huà)布的寬高。
第二種：在一個(gè)元素中創(chuàng)建畫(huà)布
創(chuàng)建語(yǔ)法：
var paper = Raphael(element, width, height);
element是元素節(jié)點(diǎn)本身或ID width、height是畫(huà)布的寬度和高度。
3.2、繪制圖形
畫(huà)布創(chuàng)建好之后，該對(duì)象自帶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中繪制一個(gè)圓形，一個(gè)橢圓、一個(gè)矩形。
<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>運(yùn)行結(jié)果如下：
除了簡(jiǎn)單圖形之外，還可以繪制復(fù)雜圖形，如三角形、心型，這時(shí)就使用path方法。
使用語(yǔ)法：paper.path(pathString)
pathString是由一個(gè)或多個(gè)命令組成，每個(gè)命令以字母開(kāi)始，多個(gè)參數(shù)是由逗號(hào)分隔。
eg：繪制一個(gè)三角形。
let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")還可以繪制文字，如果需要換行，使用 \n 。
文字語(yǔ)法：paper.text(x,y,text)
(x,y)是文字坐標(biāo)，text是要繪制的文字。
3.3、設(shè)置屬性
圖形繪制之后，我們通常會(huì)添加stroke、fill、stroke-width等讓圖形更美觀，Raphael使用attr給圖形設(shè)置屬性。
使用語(yǔ)法：circle.attr({"屬性名","屬性值","屬性名","屬性值",...})
如果只有屬性名沒(méi)有屬性值，則是獲取屬性，如果有屬性值，則是設(shè)置屬性。
注意：如果只設(shè)置一個(gè)屬性時(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等以及對(duì)應(yīng)的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。
使用語(yǔ)法：
obj.click(function(){
//需要操作的內(nèi)容
})3.5、添加動(dòng)畫(huà)
animate為指定圖形添加動(dòng)畫(huà)并執(zhí)行。
使用語(yǔ)法：
obj.animate({
"屬性名1":屬性值1,
"屬性名2":屬性值2,
...
},time,type)屬性名和屬性值就根據(jù)你想要的動(dòng)畫(huà)類(lèi)型加就ok。
time：動(dòng)畫(huà)所需時(shí)間。
type：指動(dòng)畫(huà)緩動(dòng)類(lèi)型。常用值有：
eg：點(diǎn)擊矩形，矩形緩緩變大。
<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ù)制上邊的代碼，分別在各個(gè)瀏覽器和低版本IE瀏覽器運(yùn)行，發(fā)現(xiàn)都可以正常運(yùn)行。SVG的動(dòng)畫(huà)庫(kù)挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫(kù)。
家好！ 歡迎來(lái)到本教程，我們將深入了解使用 HTML 畫(huà)布和 JavaScript 在代碼中創(chuàng)建有趣的氣泡的世界。 最好的部分？ 我們將只使用一點(diǎn) HTML 和所有 JavaScript，而不是 CSS 來(lái)實(shí)現(xiàn)所有這一切。
今天，我們要掌握以下幾個(gè)概念：
使用畫(huà)布上下文的 arc 方法創(chuàng)建圓。
利用 requestAnimationFrame 函數(shù)實(shí)現(xiàn)平滑的圓形動(dòng)畫(huà)。
利用 JavaScript 類(lèi)的強(qiáng)大功能來(lái)創(chuàng)建多個(gè)圓圈，而無(wú)需重復(fù)代碼。
向我們的圓圈添加描邊樣式和填充樣式以獲得 3D 氣泡效果。
你可以跟著我一起看，或者如果你想看源代碼，可以使用最終的codepen
首先，我們需要一個(gè) HTML5 Canvas 元素。 Canvas 是創(chuàng)建形狀、圖像和圖形的強(qiáng)大元素。 這就是氣泡將產(chǎn)生的地方。 讓我們來(lái)設(shè)置一下 -
<canvas id="canvas"></canvas>為了使用畫(huà)布做任何有意義的事情，我們需要訪問(wèn)它的上下文。 Context 提供了在畫(huà)布上渲染對(duì)象和繪制形狀的接口。
讓我們?cè)L問(wèn)畫(huà)布及其上下文。
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');我們將設(shè)置畫(huà)布以使用整個(gè)窗口的高度和寬度 -
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;讓我們通過(guò)添加一些 css 為畫(huà)布提供一個(gè)漂亮的舒緩淺藍(lán)色背景。 這是我們要使用的唯一 CSS。 如果您愿意，也可以使用 JavaScript 來(lái)完成此操作。
#canvas {
background: #00b4ff;
}讓我們進(jìn)入有趣的部分。 我們將通過(guò)單擊畫(huà)布來(lái)創(chuàng)建氣泡。 為了實(shí)現(xiàn)這一點(diǎn)，我們首先創(chuàng)建一個(gè)點(diǎn)擊事件處理程序：
canvas.addEventListener('click', handleDrawCircle);由于我們需要知道在畫(huà)布上單擊的位置，因此我們將在句柄 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)建圓圈，我們將利用畫(huà)布上下文中可用的 arc 方法。 Arc 方法接受 x 和 y - 圓心、半徑、起始角和結(jié)束角，對(duì)于我們來(lái)說(shuō)，這將是 0 和 2* Math.PI，因?yàn)槲覀冋趧?chuàng)建一個(gè)完整的圓。
const drawCircle = (x, y) => {
context.beginPath();
context.arc(x, y, 50, 0, 2 * Math.PI); context.strokeStyle = 'white';
context.stroke();
};現(xiàn)在我們有了圓圈，讓我們讓它們移動(dòng)，因?yàn)椤?/p>
GIF
請(qǐng)記住，當(dāng)我們創(chuàng)建圓時(shí)，我們使用了 arc 方法，它接受 x 和 y 坐標(biāo) - 圓的中心。 如果我們快速移動(dòng)圓的 x 和 y 坐標(biāo)，就會(huì)給人一種圓在移動(dòng)的印象。 讓我們?cè)囋嚢桑?/span>
//Define a speed by which to increment to the x and y coordinatesconst 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;
};為了讓我們的圓圈無(wú)縫移動(dòng)，我們將創(chuàng)建一個(gè)動(dòng)畫(huà)函數(shù)并使用瀏覽器的 requestAnimationFrame 方法來(lái)創(chuàng)建一個(gè)移動(dò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();現(xiàn)在我們已經(jīng)創(chuàng)建了一個(gè)圓圈，是時(shí)候創(chuàng)建多個(gè)圓圈了！
但在我們創(chuàng)建多個(gè)圓圈之前，讓我們準(zhǔn)備一下我們的代碼。為了避免重復(fù)我們的代碼，我們將使用類(lèi)并引入 Particle 類(lèi)。 粒子是我們動(dòng)態(tài)藝術(shù)作品和動(dòng)畫(huà)的構(gòu)建塊。 每個(gè)氣泡都是一個(gè)粒子，具有自己的位置、大小、運(yùn)動(dòng)和顏色屬性。 讓我們定義一個(gè) Particle 類(lèi)來(lái)封裝這些屬性：
class Particle {
constructor(x = 0, y = 0) {} draw() {
// Drawing the particle as a colored circle
// ...
} move() {
// Implementing particle movement
// ...
}
}讓我們將一些已設(shè)置的常量移至 Particle 類(lèi) -
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é)在畫(huà)布上渲染粒子。 我們已經(jīng)在drawCircle中實(shí)現(xiàn)了這個(gè)功能，所以讓我們將它移動(dòng)到我們的類(lèi)中并將變量更新為類(lèi)變量
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() {}
}同樣，讓我們?cè)陬?lèi)中移動(dòng) move 函數(shù) -
move() {
this.x = this.x + this.dx;
this.y = this.y - this.dy;
}現(xiàn)在，我們需要確保在事件處理程序中調(diào)用 Particle 類(lèi)。
const handleDrawCircle = (event) => {
const x = event.pageX;
const y = event.pageY; const particle = new Particle(x, y);
};canvas.addEventListener('click', handleDrawCircle);由于我們需要在 animate 函數(shù)中訪問(wèn)該粒子，以便調(diào)用其 move 方法，因此我們將該粒子存儲(chǔ)在一個(gè)名為 molecularArray 的數(shù)組中。 當(dāng)創(chuàng)建大量粒子時(shí)，這個(gè)數(shù)組也會(huì)很有幫助。 這是反映這一點(diǎn)的更新代碼 -
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);記得也要更新動(dòng)畫(huà)功能 -
此時(shí)，您將在屏幕上看到這個(gè)粒子 -
驚人的！ 現(xiàn)在，到了有趣的部分！ 讓我們創(chuàng)建很多圓圈并設(shè)計(jì)它們的樣式，使它們看起來(lái)像氣泡。
為了創(chuàng)建大量氣泡，我們將使用 for 循環(huán)創(chuàng)建粒子并將它們添加到我們?cè)诖颂巹?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);在動(dòng)畫(huà)函數(shù)中，我們將通過(guò)清除畫(huà)布并在新位置重新繪制粒子來(lái)不斷更新畫(huà)布。 這會(huì)給人一種圓圈在移動(dòng)的錯(cuò)覺(jué)。
const animate = () => {
context.clearRect(0, 0, canvas.width, canvas.height); particleArray.forEach((particle) => {
particle?.move();
particle?.draw();
}); requestAnimationFrame(animate);
};animate();現(xiàn)在我們有了移動(dòng)的氣泡，是時(shí)候給它們添加顏色，使它們看起來(lái)像氣泡了！
我們將通過(guò)向氣泡添加漸變填充來(lái)實(shí)現(xiàn)此目的。 這可以使用 context.createRadialGradient 方法來(lái)完成。
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;恭喜！ 您剛剛僅使用 HTML Canvas 和 JavaScript 創(chuàng)建了一些超級(jí)有趣的東西。 您已經(jīng)學(xué)習(xí)了如何使用 arc 方法、利用 requestAnimationFrame、利用 JavaScript 類(lèi)的強(qiáng)大功能以及使用漸變?cè)O(shè)計(jì)氣泡以實(shí)現(xiàn) 3D 氣泡效果。
請(qǐng)隨意嘗試顏色、速度和大小，使您的動(dòng)畫(huà)真正獨(dú)一無(wú)二。
請(qǐng)隨意嘗試顏色、速度和大小，使您的動(dòng)畫(huà)真正獨(dú)一無(wú)二。
我希望您在學(xué)習(xí)本教程時(shí)能像我在創(chuàng)建它時(shí)一樣獲得樂(lè)趣。 現(xiàn)在，輪到你進(jìn)行實(shí)驗(yàn)了。 我很想看看你是否嘗試過(guò)這個(gè)以及你創(chuàng)造了什么。 與我分享您的代碼鏈接，我很樂(lè)意查看。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
