我們通過學(xué)習如何使用 mojs 為 html 元素添加動畫來開始本系列。在第二個教程中，我們繼續(xù)使用 Shape 模塊制作內(nèi)置 SVG 形狀的動畫。第三個教程介紹了使用 ShapeSwirl 和 stagger 模塊對 SVG 形狀進行動畫處理的更多方法。
現(xiàn)在，我們將學(xué)習如何使用 Burst 模塊以突發(fā)形式制作不同 SVG 形狀的動畫。本教程將取決于我們在前三個教程中介紹的概念。如果您還沒有閱讀過它們，我建議您先閱讀它們。
創(chuàng)建基本連拍動畫
在創(chuàng)建任何突發(fā)動畫之前，我們需要做的第一件事是實例化 Burst 對象。之后，我們可以指定不同屬性的值來控制動畫的播放方式。 Burst 模塊中的許多屬性名稱與 Shape 模塊中的屬性名稱相同。然而，在這種情況下，這些屬性執(zhí)行非常不同的任務(wù)。
left 和 right 屬性決定突發(fā)的初始位置，而不是突發(fā)內(nèi)部的粒子。同樣，x 和 y 屬性決定整個突發(fā)的移動而不是單個粒子的移動。
所有爆發(fā)粒子形成的圓的半徑由 radius 屬性控制。這與單個形狀的 radius 屬性非常不同，后者決定了這些形狀的大小。在爆發(fā)的情況下，半徑?jīng)Q定了其中各個形狀的距離。
可以使用 count 屬性指定單次突發(fā)中的形狀或粒子數(shù)量。默認情況下，您創(chuàng)建的每個突發(fā)中將有五個粒子。所有這些粒子均勻分布在爆發(fā)的圓周上。例如，如果有四個粒子，它們將彼此成 90 度放置。如果有三個粒子，它們將被放置在 120 度處。
如果您不希望爆發(fā)粒子覆蓋整個 360 度，您可以使用 Degree?屬性指定應(yīng)覆蓋的部分。任何大于 0 的值對此屬性都有效。指定的度數(shù)將均勻分布在所有粒子之間。如果度數(shù)超過 360，形狀可能會重疊。
使用 angle 屬性指定的角度決定了整個突發(fā)的角度。在這種情況下，單個粒子不是繞著它們自己的中心旋轉(zhuǎn)，而是繞著爆發(fā)的中心旋轉(zhuǎn)。這與地球繞太陽公轉(zhuǎn)類似，與地球自轉(zhuǎn)軸自轉(zhuǎn)不同。
scale 屬性可縮放突發(fā)的所有物理屬性的值，進而縮放各個形狀。就像其他突發(fā)屬性一樣，其中的所有形狀都會立即縮放。將突發(fā) scale 設(shè)置為 3 會將整個突發(fā)的半徑以及單個形狀的大小增加 3。
在下面的代碼片段中，我們將使用剛剛討論的屬性創(chuàng)建五個不同的突發(fā)。
var burstA = new mojs.Burst({ count: 20 }); var burstB = new mojs.Burst({ angle: { 0: 360 }, scale: { 1: 2 }, radius: 10 }); var burstC = new mojs.Burst({ angle: { 0: 360 }, scale: { 1: 2 }, radius: { 10: 100 } }); var burstD = new mojs.Burst({ degree: 180, radiusX: 10, angle: -90, scale: { 1: 2 }, radius: { 10: 100 } }); var burstE = new mojs.Burst({ count: 20, degree: 3600 });
您可以看到 burstA 和 burstE 僅在它們必須覆蓋的度數(shù)上有所不同。由于 burstA 中的粒子必須覆蓋 360 度（默認值），因此它們的放置間隔為 360/20 = 18 度。另一方面，burstE 中的粒子以 3600/20 = 180 度數(shù)放置。從零開始，第一個粒子放置在 0 度處，下一個粒子放置在 180 度處。
然后將第三個粒子放置在 360 度處，這基本上等于 0 度。然后將第四個粒子放置在 540 度處，但這基本上等于 180 度。換句話說，所有奇數(shù)粒子都放置在0度處，所有偶數(shù)粒子放置在180度處。最后，您只看到兩個粒子，因為所有其他粒子都與前兩個粒子重疊。
請務(wù)必記住，您無法直接控制突發(fā)動畫的持續(xù)時間、延遲或緩動功能。該模塊根據(jù)正在動畫的不同子項的值自動確定所有這些值。
操縱單個爆發(fā)粒子
到目前為止，在本教程中，爆發(fā)中的所有粒子都應(yīng)用了相同的動畫。它們的角度、比例、半徑和位置都改變了相同的值。此外，我們無法控制單個粒子或整個爆發(fā)的持續(xù)時間和延遲。 mojs Burst 模塊沒有一組可以直接更改所有這些值的屬性。但是，我們可以指定單個粒子的動畫值，這反過來會影響爆發(fā)動畫。
爆發(fā)動畫中的所有粒子都被視為原始 Burst 對象的子級。因此，mojs 允許我們使用 children 屬性來控制單個爆發(fā)粒子的動畫，該屬性接受一個對象作為其值。您可以在子對象內(nèi)使用除 x 和 y 之外的所有 ShapeSwirl 屬性。這是有道理的，因為爆發(fā)動畫中的單個粒子必須出現(xiàn)在某些位置，并且允許我們隨機更改單個粒子的位置將改變配置。
您未指定的任何子屬性值都將設(shè)置為 ShapeSwirl 模塊提供的默認值。在下面的示例中，我們對突發(fā)動畫的 20 條不同線進行動畫處理。這次，angle 屬性已設(shè)置在單個粒子上，而不是 Burst 對象上，這樣只有線繞其中心旋轉(zhuǎn)，而不是整個對象。正如我們在上一篇教程中了解到的，所有 ShapeSwirl 對象默認情況下都會從 1 縮小到 0。這就是動畫中線條長度從 40 變?yōu)?0 的原因。
var burstA = new mojs.Burst({ count: 20, children: { shape: 'line', stroke: 'black', radius: 20, angle: { 0: 180 } } });
正如我之前提到的，我們可以為連拍動畫中的所有 ShapeSwirl 屬性設(shè)置動畫。動畫中的每個子項都可以有自己的一組屬性。如果僅提供一個值，它將應(yīng)用于所有子粒子。如果這些值以數(shù)組形式提供，它們將按順序應(yīng)用，一次一個粒子。
下面是使用我們迄今為止學(xué)到的所有概念創(chuàng)建五種不同的突發(fā)動畫的 JavaScript 代碼。
var burstA = new mojs.Burst({ count: 20, angle: { 0: 180 }, radius: { 0: 100 }, children: { shape: "polygon", stroke: "black", radius: 20, angle: { 0: 360 }, duration: 4000 } }); var burstB = new mojs.Burst({ count: 20, angle: { 0: 180 }, radius: { 0: 100 }, children: { shape: "polygon", fill: ["yellow", "cyan", "orange"], stroke: "black", radius: 20, scale: { 1: 2 }, duration: 2000 }, isShowEnd: false }); var burstC = new mojs.Burst({ count: 20, angle: { 0: -180 }, radius: { 0: 100 }, children: { shape: "circle", fill: ["red", "black", "blue"], radius: { 10: "stagger(5, 1)" } } }); var burstD = new mojs.Burst({ count: 6, radius: { 0: 100 }, children: { shape: "circle", fill: ["red", "yellow", "blue"], scale: { 1: "rand(1, 10)" } }, isShowEnd: false }); var burstE = new mojs.Burst({ count: 6, radius: { 0: 100 }, children: { shape: "circle", fill: ["red", "yellow", "blue"], stroke: "black", scale: { 1: "rand(1, 10)" } } }).then({ angle: { 0: 360 }, radius: { 100: 0 }, scale: { 1: 0 } });
在第一個突發(fā)動畫中，直接應(yīng)用于 Burst 對象的 angle 會圍繞突發(fā)對象的中心旋轉(zhuǎn)整個組。然而，在children屬性中應(yīng)用的angle會圍繞它們自己的中心旋轉(zhuǎn)所有三角形。我們還通過將所有子級的動畫持續(xù)時間更改為 4000 毫秒來減慢突發(fā)動畫的速度。
在第二個連拍動畫中，所有三角形的顏色均取自傳遞給 fill 屬性的數(shù)組。我們只指定了三種填充顏色，但三角形的總數(shù)為 20。在這種情況下，mojs 會不斷循環(huán)數(shù)組元素，并一次又一次地用相同的三種顏色填充三角形。
在第四個動畫中，我們使用在上一個教程中了解的 rand 字符串來為所有子粒子隨機選擇一個比例值。我們還將 isShowEnd 屬性的值設(shè)置為 false 以隱藏動畫結(jié)束時的粒子。
在第五個動畫中，我們使用 Shape 模塊教程中的 then() 方法在第一個動畫序列完成后播放另一個動畫序列。
最終想法
本系列的目的是讓您熟悉 mojs 動畫庫的基礎(chǔ)知識。每個教程都側(cè)重于單個模塊以及如何使用該模塊中的屬性來創(chuàng)建基本動畫。
最后一個教程使用了之前教程中的概念來創(chuàng)建稍微復(fù)雜的動畫。 Mojs 是一個非常強大的動畫庫，您獲得的最終結(jié)果取決于您對所有屬性的創(chuàng)意程度，因此請不斷嘗試。
如果您希望我在本教程中澄清任何內(nèi)容，請在評論中告訴我。
