從 Mojs 動畫庫開始：探索形狀模組

在上一教學中，我們使用 mojs 為網頁上的不同 HTML 元素加入動畫效果。我們使用該庫主要對看起來像正方形或圓形的 div 元素進行動畫處理。但是，您可以使用 Html 模組來為圖像或標題等各種元素設定動畫。如果您確實打算使用 mojs 對基本形狀進行動畫處理，那麼您可能應該使用庫中的 Shape 模組。

Shape 模組可讓您使用 SVG 在 DOM 中建立基本形狀。您所要做的就是指定要建立的形狀類型，mojs 會處理剩下的事情。該模組還允許您為您創建的不同形狀設定動畫。

在本教程中，我們將介紹 Shape 模組的基礎知識，以及如何使用它來創建不同的形狀並為其設定動畫。

在 Mojs 中建立形狀

您需要實例化 mojs Shape 物件才能建立不同的形狀。該物件將接受不同的參數，這些參數可用於控制您建立的形狀的顏色、大小、角度等。

預設情況下，您建立的任何形狀都會使用文件正文作為其父級。您可以使用 parent 屬性將任何其他元素指定為其父元素。您也可以藉助 className 屬性為您建立的任何形狀指派一個類別。如果您跳過此屬性，程式庫將不會指派任何預設類別。

Mojs 內建了八種不同的形狀，因此您可以透過為 shape 屬性設定值來直接建立它們。您可以將其值設為 circle 建立圓形，rect 建立矩形，polygon 建立多邊形。您也可以將 shape 的值設為 lines 來繪製直線。如果 shape 值為 cross，則函式庫將繪製兩條垂直線；如果 shape 值為 equal。同樣，可以透過將屬性值設為 zigzag 來建立鋸齒線。

形狀物件還有一個 points 屬性，該屬性對於不同的形狀具有不同的意義。它決定 polygon 形狀中的總邊數和 equal 形狀中的平行線總數。 points 屬性也可用來設定 zigzag 線的彎曲數量。

正如我之前提到的，mojs 使用 SVG 創建所有這些形狀。這意味著 Shape 物件也將具有一些 SVG 特定屬性來控制這些形狀的外觀。您可以使用 fill 屬性來設定 mojs 形狀的填滿顏色。當未指定顏色時，庫將使用 deepink 顏色來填滿形狀。同樣，您可以使用 Stroke 屬性指定形狀的描邊顏色。當未指定描邊顏色時，mojs 會保持描邊透明。您可以使用 fillOpacity 和 StrokeOpacity 屬性來控制形狀的填滿和描邊不透明度。它們可以是 0 到 1 之間的任何值。

Mojs 還允許您控制形狀的其他與描邊相關的屬性。例如，您可以使用 StrokeDasharray 屬性指定筆劃路徑中的破折號和間隙的模式。此屬性接受字串和數字作為有效值。它的預設值為零，這意味著筆劃將是實線。可以使用 StrokeWidth 屬性指定筆畫的寬度。預設情況下，所有筆畫的寬度均為 2px。可以使用 StrokeLinecap 屬性指定不同線條端點處的形狀。 StrokeLinecap 的有效值為 butt、round 和 square。

預設情況下，您建立的任何形狀都會放置在其父元素的中心。這是因為形狀的 left 和 right 屬性都設定為 50%。您可以變更這些屬性的值以將元素放置在不同的位置。控制形狀位置的另一種方法是藉助 x 和 y 屬性。它們分別決定形狀應在水平和垂直方向上移動多少。

您可以使用 radius 屬性指定形狀的半徑。該值用於確定特定形狀的大小。您也可以使用 radiusX 和 radiusY 指定形狀在特定方向上的大小。控制形狀大小的另一種方法是藉助 scale 屬性。 scale 的預設值為 1，但您可以將其設定為您喜歡的任何其他數字。您也可以使用 scaleX 和 scaleY 屬性在特定方向上縮放形狀。

預設情況下，形狀的所有這些變換的原點都是其中心。例如，如果透過指定 angle 屬性的值來旋轉任何形狀，則該形狀將繞著其中心旋轉。如果要圍繞其他點旋轉形狀，可以使用 origin 屬性指定它。此屬性接受字串作為其值。將其設為 '0% 0%' 將圍繞其左上角旋轉、縮放或平移形狀。同樣，將其設為 '50% 0%' 將圍繞其頂部邊緣的中心旋轉、縮放或平移形狀。

您可以使用我們剛剛討論的所有這些屬性來建立各種形狀。以下是一些範例：

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 示範所示：

在 Mojs 中對形狀進行動畫處理

您可以為我們在上一節中討論的形狀的幾乎所有屬性設定動畫。例如，您可以透過指定不同的初始值和最終值來對多邊形中的點數進行動畫處理。您也可以將形狀的原點從 '50% 50%' 變更為任何其他值，例如 '75% 75%'。 angle 和 scale 等其他屬性的行為與 Html 模組中的行為相同。

不同動畫的持續時間、延遲和速度可以分別使用 duration、delay 和 speed 屬性來控制。 Repeat 屬性的工作方式也與 Html 模組中的工作方式相同。如果只想播放一次動畫，可以設定為 0。同樣，您可以將其設定為3以播放動畫4次。對 Html 模組有效的所有緩動值也對 Shape 模組有效。

這兩個模組的動畫功能之間的唯一區別是，您無法為 Shape 模組中的屬性單獨指定動畫參數。您設定動畫的所有屬性都將具有相同的持續時間、延遲、重複次數等。

以下是我們對圓的 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() 方法來指定在第一個動畫序列完全完成後要設定動畫的一組新屬性。您可以在 .then() 中為所有動畫屬性指定新的初始值和最終值。這是一個例子：

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 建立不同的形狀以及如何為這些形狀的屬性設定動畫。

Shape 模組具有 Html 模組的所有動畫功能。唯一的區別是屬性不能單獨設定動畫。它們只能作為一個群組進行動畫處理。您還可以透過使用不同的方法隨時播放、暫停、停止和恢復動畫來控制動畫播放。我在本系列的第一篇教學中詳細介紹了這些方法。

如果您對本教學有任何疑問，請隨時發表評論。在下一個教學中，您將了解 mojs 中的 ShapeSwirl 和 stagger 模組。

以上是從 Mojs 動畫庫開始：探索形狀模組的詳細內容。更多資訊請關注PHP中文網其他相關文章！