在上一教程中，我們使用 mojs 為網頁上的不同 HTML 元素添加動畫效果。愛掏網 - it200.com我們使用該庫主要對看起來像正方形或圓形的 div 元素進行動畫處理。愛掏網 - it200.com但是，您可以使用 Html 模塊來為圖像或標題等各種元素設置動畫。愛掏網 - it200.com如果您確實打算使用 mojs 對基本形狀進行動畫處理，那么您可能應該使用庫中的 Shape 模塊。愛掏網 - it200.com
Shape 模塊允許您使用 SVG 在 DOM 中創建基本形狀。愛掏網 - it200.com您所要做的就是指定要創建的形狀類型，mojs 會處理剩下的事情。愛掏網 - it200.com該模塊還允許您為您創建的不同形狀設置動畫。愛掏網 - it200.com
在本教程中，我們將介紹 Shape 模塊的基礎知識，以及如何使用它來創建不同的形狀并為其設置動畫。愛掏網 - it200.com
您需要實例化 mojs Shape 對象才能創建不同的形狀。愛掏網 - it200.com該對象將接受不同的參數，這些參數可用于控制您創建的形狀的顏色、大小、角度等。愛掏網 - it200.com
默認情況下，您創建的任何形狀都將使用文檔正文作為其父級。愛掏網 - it200.com您可以使用 parent 屬性將任何其他元素指定為其父元素。愛掏網 - it200.com您還可以借助 className 屬性為您創建的任何形狀分配一個類。愛掏網 - it200.com如果您跳過此屬性，庫將不會分配任何默認類。愛掏網 - it200.com
Mojs 內置了八種不同的形狀，因此您可以通過為 shape 屬性設置值來直接創建它們。愛掏網 - it200.com您可以將其值設置為 circle 創建圓形，rect 創建矩形，polygon 創建多邊形。愛掏網 - it200.com您還可以通過將 shape 的值設置為 lines 來繪制直線。愛掏網 - it200.com如果 shape 值為 cross，則庫將繪制兩條垂直線；如果 shape 值為 equal。愛掏網 - it200.com同樣，可以通過將屬性值設置為 zigzag 來創建鋸齒線。愛掏網 - it200.com
形狀對象還有一個 points 屬性，該屬性對于不同的形狀具有不同的含義。愛掏網 - it200.com它確定 polygon 形狀中的總邊數和 equal 形狀中的平行線總數。愛掏網 - it200.com points 屬性也可用于設置 zigzag 線的彎曲數量。愛掏網 - it200.com
正如我之前提到的，mojs 使用 SVG 創建所有這些形狀。愛掏網 - it200.com這意味著 Shape 對象還將具有一些 SVG 特定屬性來控制這些形狀的外觀。愛掏網 - it200.com您可以使用 fill 屬性設置 mojs 形狀的填充顏色。愛掏網 - it200.com當未指定顏色時，庫將使用 deepink 顏色來填充形狀。愛掏網 - it200.com同樣，您可以使用 Stroke 屬性指定形狀的描邊顏色。愛掏網 - it200.com當未指定描邊顏色時，mojs 會保持描邊透明。愛掏網 - it200.com您可以使用 fillOpacity 和 StrokeOpacity 屬性控制形狀的填充和描邊不透明度。愛掏網 - it200.com它們可以是 0 到 1 之間的任何值。愛掏網 - it200.com
Mojs 還允許您控制形狀的其他與描邊相關的屬性。愛掏網 - it200.com例如，您可以使用 StrokeDasharray 屬性指定筆劃路徑中的破折號和間隙的模式。愛掏網 - it200.com此屬性接受字符串和數字作為有效值。愛掏網 - it200.com它的默認值為零，這意味著筆劃將是實線。愛掏網 - it200.com可以使用 StrokeWidth 屬性指定筆畫的寬度。愛掏網 - it200.com默認情況下，所有筆畫的寬度均為 2px。愛掏網 - it200.com可以使用 StrokeLinecap 屬性指定不同線條端點處的形狀。愛掏網 - it200.com StrokeLinecap 的有效值為 butt、round 和 square。愛掏網 - it200.com
默認情況下，您創建的任何形狀都會放置在其父元素的中心。愛掏網 - it200.com這是因為形狀的 left 和 right 屬性均設置為 50%。愛掏網 - it200.com您可以更改這些屬性的值以將元素放置在不同的位置。愛掏網 - it200.com控制形狀位置的另一種方法是借助 x 和 y 屬性。愛掏網 - it200.com它們分別確定形狀應在水平和垂直方向上移動多少。愛掏網 - it200.com
您可以使用 radius 屬性指定形狀的半徑。愛掏網 - it200.com該值用于確定特定形狀的大小。愛掏網 - it200.com您還可以使用 radiusX 和 radiusY 指定形狀在特定方向上的大小。愛掏網 - it200.com控制形狀大小的另一種方法是借助 scale 屬性。愛掏網 - it200.com scale 的默認值為 1，但您可以將其設置為您喜歡的任何其他數字。愛掏網 - it200.com您還可以使用 scaleX 和 scaleY 屬性在特定方向上縮放形狀。愛掏網 - it200.com
默認情況下，形狀的所有這些變換的原點都是其中心。愛掏網 - it200.com例如，如果通過指定 angle 屬性的值來旋轉任何形狀，則該形狀將繞其中心旋轉。愛掏網 - it200.com如果要圍繞其他點旋轉形狀，可以使用 origin 屬性指定它。愛掏網 - it200.com此屬性接受字符串作為其值。愛掏網 - it200.com將其設置為 '0% 0%' 將圍繞其左上角旋轉、縮放或平移形狀。愛掏網 - it200.com同樣，將其設置為 '50% 0%' 將圍繞其頂部邊緣的中心旋轉、縮放或平移形狀。愛掏網 - it200.com
您可以使用我們剛剛討論的所有這些屬性來創建各種形狀。愛掏網 - it200.com以下是一些示例：
var circleA = new mojs.Shape({
parent: ".container",
shape: "circle",
left: 0,
fill: "orange",
stroke: "black",
strokeWidth: 5,
isShowStart: true
});
var circleB = new mojs.Shape({
parent: ".container",
shape: "circle",
left: 175,
fill: "orange",
stroke: "red",
radiusX: 80,
strokeWidth: 25,
strokeDasharray: 2,
isShowStart: true
});
var rectA = new mojs.Shape({
parent: ".container",
shape: "rect",
left: 350,
fill: "red",
stroke: "black",
strokeWidth: 5,
isShowStart: true
});
var rectB = new mojs.Shape({
parent: ".container",
shape: "rect",
left: 500,
fill: "blue",
stroke: "blue",
radiusX: 40,
radiusY: 100,
strokeWidth: 25,
strokeDasharray: 20,
isShowStart: true
});
var polyA = new mojs.Shape({
parent: ".container",
shape: "polygon",
top: 300,
left: 0,
fill: "yellow",
stroke: "black",
strokeWidth: 10,
points: 8,
isShowStart: true
});
var polyB = new mojs.Shape({
parent: ".container",
shape: "polygon",
top: 350,
left: 175,
radiusX: 100,
radiusY: 100,
fill: "violet",
stroke: "black",
strokeWidth: 6,
strokeDasharray: "15, 10, 5, 10",
strokeLinecap: "round",
points: 3,
isShowStart: true
});
var lineA = new mojs.Shape({
parent: ".container",
shape: "cross",
top: 350,
left: 375,
stroke: "red",
strokeWidth: 40,
isShowStart: true
});
var zigzagA = new mojs.Shape({
parent: ".container",
shape: "zigzag",
top: 500,
left: 50,
fill: "transparent",
stroke: "black",
strokeWidth: 4,
radiusX: 100,
points: 10,
isShowStart: true
});
var zigzagB = new mojs.Shape({
parent: ".container",
shape: "zigzag",
top: 500,
left: 350,
fill: "blue",
stroke: "transparent",
radiusX: 100,
points: 50,
isShowStart: true
});
登錄后復制
上面代碼創建的形狀如下面的 CodePen 演示所示：
您可以為我們在上一節中討論的形狀的幾乎所有屬性設置動畫。愛掏網 - it200.com例如，您可以通過指定不同的初始值和最終值來對多邊形中的點數進行動畫處理。愛掏網 - it200.com您還可以將形狀的原點從 '50% 50%' 更改為任何其他值，例如 '75% 75%'。愛掏網 - it200.com angle 和 scale 等其他屬性的行為與 Html 模塊中的行為相同。愛掏網 - it200.com
不同動畫的持續時間、延遲和速度可以分別使用 duration、delay 和 speed 屬性來控制。愛掏網 - it200.com Repeat 屬性的工作方式也與 Html 模塊中的工作方式相同。愛掏網 - it200.com如果只想播放一次動畫，可以將其設置為 0。愛掏網 - it200.com同樣，您可以將其設置為3以播放動畫4次。愛掏網 - it200.com對 Html 模塊有效的所有緩動值也對 Shape 模塊有效。愛掏網 - it200.com
這兩個模塊的動畫功能之間的唯一區別是，您無法為 Shape 模塊中的屬性單獨指定動畫參數。愛掏網 - it200.com您設置動畫的所有屬性都將具有相同的持續時間、延遲、重復次數等。愛掏網 - it200.com
下面是我們對圓的 x 位置、比例和角度進行動畫處理的示例：
var circleA = new mojs.Shape({
parent: ".container",
shape: "circle",
left: 175,
fill: "red",
stroke: "black",
strokeWidth: 100,
strokeDasharray: 18,
isShowStart: true,
x: {
0: 300
},
angle: {
0: 360
},
scale: {
0.5: 1.5
},
duration: 1000,
repeat: 10,
isYoyo: true,
easing: "quad.in"
});
登錄后復制
控制不同動畫播放的一種方法是使用 .then() 方法來指定在第一個動畫序列完全完成后要設置動畫的一組新屬性。愛掏網 - it200.com您可以在 .then() 中為所有動畫屬性指定新的初始值和最終值。愛掏網 - it200.com這是一個例子：
var polyA = new mojs.Shape({
parent: ".container",
shape: "polygon",
fill: "red",
stroke: "black",
isShowStart: true,
points: 4,
left: 100,
x: {
0: 500
},
strokeWidth: {
5: 2
},
duration: 2000,
easing: 'elastic.in'
}).then({
strokeWidth: 5,
points: {
4: 3
},
angle: {
0: 720
},
scale: {
1: 2
},
fill: {
'red': 'yellow'
},
duration: 1000,
delay: 200,
easing: 'elastic.out'
});
登錄后復制
在本教程中，我們學習了如何使用 mojs 創建不同的形狀以及如何為這些形狀的屬性設置動畫。愛掏網 - it200.com
Shape 模塊具有 Html 模塊的所有動畫功能。愛掏網 - it200.com唯一的區別是屬性不能單獨設置動畫。愛掏網 - it200.com它們只能作為一個組進行動畫處理。愛掏網 - it200.com您還可以通過使用不同的方法隨時播放、暫停、停止和恢復動畫來控制動畫播放。愛掏網 - it200.com我在本系列的第一篇教程中詳細介紹了這些方法。愛掏網 - it200.com
如果您對本教程有任何疑問，請隨時發表評論。愛掏網 - it200.com在下一個教程中，您將了解 mojs 中的 ShapeSwirl 和 stagger 模塊。愛掏網 - it200.com
以上就是從 Mojs 動畫庫開始：探索形狀模塊的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！