国产精品久久久99,国产精品一区二区久久精品无码,久久综合给合久久狠狠狠97色

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

在上一教程中，我們使用 mojs 為網(wǎng)頁上的不同 html 元素添加動畫效果。我們使用該庫主要對看起來像正方形或圓形的 div 元素進(jìn)行動畫處理。但是，您可以使用 Html 模塊來為圖像或標(biāo)題等各種元素設(shè)置動畫。如果您確實打算使用 mojs 對基本形狀進(jìn)行動畫處理，那么您可能應(yīng)該使用庫中的 Shape 模塊。

Shape 模塊允許您使用 SVG 在 dom 中創(chuàng)建基本形狀。您所要做的就是指定要創(chuàng)建的形狀類型，mojs 會處理剩下的事情。該模塊還允許您為您創(chuàng)建的不同形狀設(shè)置動畫。

在本教程中，我們將介紹 Shape 模塊的基礎(chǔ)知識，以及如何使用它來創(chuàng)建不同的形狀并為其設(shè)置動畫。

在 Mojs 中創(chuàng)建形狀

您需要實例化 mojs Shape 對象才能創(chuàng)建不同的形狀。該對象將接受不同的參數(shù)，這些參數(shù)可用于控制您創(chuàng)建的形狀的顏色、大小、角度等。

默認(rèn)情況下，您創(chuàng)建的任何形狀都將使用文檔正文作為其父級。您可以使用 parent 屬性將任何其他元素指定為其父元素。您還可以借助 className 屬性為您創(chuàng)建的任何形狀分配一個類。如果您跳過此屬性，庫將不會分配任何默認(rèn)類。

Mojs 內(nèi)置了八種不同的形狀，因此您可以通過為 shape 屬性設(shè)置值來直接創(chuàng)建它們。您可以將其值設(shè)置為 circle 創(chuàng)建圓形，rect 創(chuàng)建矩形，polygon 創(chuàng)建多邊形。您還可以通過將 shape 的值設(shè)置為 lines 來繪制直線。如果 shape 值為 cross，則庫將繪制兩條垂直線；如果 shape 值為 equal。同樣，可以通過將屬性值設(shè)置為 zigzag 來創(chuàng)建鋸齒線。

形狀對象還有一個 points 屬性，該屬性對于不同的形狀具有不同的含義。它確定 polygon 形狀中的總邊數(shù)和 equal 形狀中的平行線總數(shù)。 points 屬性也可用于設(shè)置 zigzag 線的彎曲數(shù)量。

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

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

默認(rèn)情況下，您創(chuàng)建的任何形狀都會放置在其父元素的中心。這是因為形狀的 left 和 right 屬性均設(shè)置為 50%。您可以更改這些屬性的值以將元素放置在不同的位置。控制形狀位置的另一種方法是借助 x 和 y 屬性。它們分別確定形狀應(yīng)在水平和垂直方向上移動多少。

您可以使用 radius 屬性指定形狀的半徑。該值用于確定特定形狀的大小。您還可以使用 radiusX 和 radiusY 指定形狀在特定方向上的大小。控制形狀大小的另一種方法是借助 scale 屬性。 scale 的默認(rèn)值為 1，但您可以將其設(shè)置為您喜歡的任何其他數(shù)字。您還可以使用 scaleX 和 scaleY 屬性在特定方向上縮放形狀。

默認(rèn)情況下，形狀的所有這些變換的原點(diǎn)都是其中心。例如，如果通過指定 angle 屬性的值來旋轉(zhuǎn)任何形狀，則該形狀將繞其中心旋轉(zhuǎn)。如果要圍繞其他點(diǎn)旋轉(zhuǎn)形狀，可以使用 origin 屬性指定它。此屬性接受字符串作為其值。將其設(shè)置為 ‘0% 0%’ 將圍繞其左上角旋轉(zhuǎn)、縮放或平移形狀。同樣，將其設(shè)置為 ‘50% 0%’ 將圍繞其頂部邊緣的中心旋轉(zhuǎn)、縮放或平移形狀。

您可以使用我們剛剛討論的所有這些屬性來創(chuàng)建各種形狀。以下是一些示例：

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 });

上面代碼創(chuàng)建的形狀如下面的 CodePen 演示所示：

在 Mojs 中對形狀進(jìn)行動畫處理

您可以為我們在上一節(jié)中討論的形狀的幾乎所有屬性設(shè)置動畫。例如，您可以通過指定不同的初始值和最終值來對多邊形中的點(diǎn)數(shù)進(jìn)行動畫處理。您還可以將形狀的原點(diǎn)從 ‘50% 50%’ 更改為任何其他值，例如 ‘75% 75%’。 angle 和 scale 等其他屬性的行為與 Html 模塊中的行為相同。

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

這兩個模塊的動畫功能之間的唯一區(qū)別是，您無法為 Shape 模塊中的屬性單獨(dú)指定動畫參數(shù)。您設(shè)置動畫的所有屬性都將具有相同的持續(xù)時間、延遲、重復(fù)次數(shù)等。

下面是我們對圓的 x 位置、比例和角度進(jìn)行動畫處理的示例：

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() 方法來指定在第一個動畫序列完全完成后要設(shè)置動畫的一組新屬性。您可以在 .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' });