Bermula dengan Perpustakaan Animasi Mojs: Teroka Modul Bentuk-WordTekan-php.cn

从 Mojs 动画库开始：探索形状模块

Dalam tutorial sebelumnya, kami menggunakan mojs untuk menganimasikan elemen HTML yang berbeza pada halaman web. Kami menggunakan perpustakaan ini terutamanya untuk menganimasikan elemen div yang kelihatan seperti segi empat sama atau bulatan. Walau bagaimanapun, anda boleh menggunakan modul Html untuk menghidupkan pelbagai elemen seperti imej atau tajuk. Jika anda berhasrat untuk menggunakan mojs untuk menghidupkan bentuk asas, maka anda mungkin perlu menggunakan modul Shape daripada perpustakaan. 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

Modul Shape membolehkan anda mencipta bentuk asas dalam DOM menggunakan SVG. Apa yang anda perlu lakukan ialah menentukan jenis bentuk yang anda ingin buat dan mojs menguruskan yang lain. Modul ini juga membolehkan anda menghidupkan bentuk berbeza yang anda cipta. #🎜🎜# #🎜🎜#Dalam tutorial ini, kami akan merangkumi asas modul Shape dan cara menggunakannya untuk mencipta dan menghidupkan bentuk yang berbeza. #🎜🎜#

Buat bentuk dalam Mojs

#🎜🎜#Anda perlu membuat instantiate objek Shape mojs untuk mencipta bentuk yang berbeza. Objek akan menerima parameter berbeza yang boleh digunakan untuk mengawal warna, saiz, sudut, dll. bentuk yang anda buat. #🎜🎜# #🎜🎜# Secara lalai, sebarang bentuk yang anda buat akan menggunakan badan dokumen sebagai induknya. Anda boleh menentukan mana-mana elemen lain sebagai induknya menggunakan atribut parent. Anda juga boleh menetapkan kelas kepada sebarang bentuk yang anda buat dengan bantuan atribut className. Jika anda melangkau sifat ini, pustaka tidak akan menetapkan sebarang kelas lalai. #🎜🎜# #🎜🎜#Mojs dilengkapi dengan lapan bentuk terbina dalam berbeza, jadi anda boleh menciptanya secara langsung dengan menetapkan nilai untuk harta shape. Anda boleh menetapkan nilainya kepada circle untuk membuat bulatan, rect untuk membuat segi empat tepat, poligon Cipta poligon. Anda juga boleh melukis garis lurus dengan menetapkan nilai <code class="inline">shape kepada lines. Jika nilai shape ialah cross, pustaka akan melukis dua garisan menegak jika shape Jika nilainya ialah <code class="inline" pustaka akan melukis berbilang garis selari>sama. Begitu juga, garisan zigzag boleh dibuat dengan menetapkan nilai sifat kepada zigzag. #🎜🎜# #🎜🎜#Bentuk objek juga mempunyai atribut points, yang mempunyai makna yang berbeza untuk bentuk yang berbeza. Ia menentukan jumlah bilangan sisi dalam bentuk poligon dan jumlah bilangan garis selari dalam bentuk equal. Atribut points juga boleh digunakan untuk menetapkan jumlah lenturan baris zigzag. #🎜🎜# #🎜🎜#Seperti yang saya nyatakan sebelum ini, mojs menggunakan SVG untuk mencipta semua bentuk ini. Ini bermakna objek Shape juga akan mempunyai beberapa sifat khusus SVG untuk mengawal penampilan bentuk ini. Anda boleh menetapkan warna isian bentuk mojs menggunakan atribut fill. Apabila tiada warna ditentukan, pustaka akan menggunakan warna deepink untuk mengisi bentuk. Begitu juga, anda boleh menentukan warna lejang bentuk menggunakan atribut Stroke. Apabila tiada warna strok dinyatakan, mojs memastikan strok itu telus. Anda boleh mengawal kelegapan isian dan lejang bentuk menggunakan sifat fillOpacity dan StrokeOpacity. Mereka boleh menjadi sebarang nilai antara 0 dan 1. #🎜🎜# #🎜🎜#Mojs juga membolehkan anda mengawal sifat bentuk berkaitan strok yang lain. Sebagai contoh, anda boleh menggunakan atribut StrokeDasharray untuk menentukan corak sempang dan jurang dalam laluan lejang. Sifat ini menerima rentetan dan nombor sebagai nilai yang sah. Nilai lalainya ialah sifar, yang bermaksud lejang akan menjadi garis pepejal. Lebar lejang boleh ditentukan menggunakan atribut StrokeWidth. Secara lalai, semua lejang adalah 2px lebar. Anda boleh menentukan bentuk pada titik akhir baris yang berbeza menggunakan atribut StrokeLinecap. Nilai yang sah untuk StrokeLinecap ialah butt, round dan persegi. #🎜🎜# #🎜🎜# Secara lalai, sebarang bentuk yang anda cipta akan diletakkan di tengah-tengah elemen induknya. Ini kerana sifat kiri dan kanan bentuk kedua-duanya ditetapkan kepada 50%. Anda boleh menukar nilai sifat ini untuk meletakkan elemen di lokasi yang berbeza. Satu lagi cara untuk mengawal kedudukan sesuatu bentuk ialah dengan bantuan atribut x dan y. Mereka menentukan berapa banyak bentuk harus bergerak secara mendatar dan menegak, masing-masing. #🎜🎜#

Anda boleh menentukan jejari bentuk menggunakan atribut radius. Nilai ini digunakan untuk menentukan saiz bentuk tertentu. Anda juga boleh menggunakan radiusX dan radiusY untuk menentukan saiz bentuk dalam arah tertentu. Cara lain untuk mengawal saiz bentuk ialah dengan atribut scale. Nilai lalai untuk skala ialah 1, tetapi anda boleh menetapkannya kepada mana-mana nombor lain yang anda suka. Anda juga boleh menggunakan sifat scaleX dan scaleY untuk menskalakan bentuk dalam arah tertentu. 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
});

Salin selepas log masuk

上面代码创建的形状如下面的 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"
});

Salin selepas log masuk

控制不同动画播放的一种方法是使用 .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'
});

Salin selepas log masuk

最终想法

在本教程中，我们学习了如何使用 mojs 创建不同的形状以及如何为这些形状的属性设置动画。

Shape 模块具有 Html 模块的所有动画功能。唯一的区别是属性不能单独设置动画。它们只能作为一个组进行动画处理。您还可以通过使用不同的方法随时播放、暂停、停止和恢复动画来控制动画播放。我在本系列的第一篇教程中详细介绍了这些方法。

如果您对本教程有任何疑问，请随时发表评论。在下一个教程中，您将了解 mojs 中的 ShapeSwirl 和 stagger

Secara lalai, asal semua transformasi bentuk ini adalah pusatnya. Sebagai contoh, jika anda memutarkan sebarang bentuk dengan menyatakan nilai atribut angle, bentuk akan diputarkan mengenai pusatnya. Jika anda ingin memutarkan bentuk di sekeliling titik lain, anda boleh menentukannya menggunakan atribut origin. Sifat ini menerima rentetan sebagai nilainya. Menetapkannya kepada '0% 0%' akan memutar, menskalakan atau menterjemah bentuk di sekeliling sudut kiri atasnya. Begitu juga, menetapkannya kepada '50% 0%' akan memutar, menskalakan atau menterjemahkan bentuk di sekeliling tengah tepi atasnya. 🎜 🎜Anda boleh membuat pelbagai bentuk menggunakan semua sifat ini yang baru kita bincangkan. Berikut adalah beberapa contoh: 🎜 rrreee 🎜Bentuk yang dicipta oleh kod di atas ditunjukkan dalam demo CodePen di bawah: 🎜 🎜🎜

Animasikan bentuk dalam Mojs

🎜Anda boleh menganimasikan hampir mana-mana harta bentuk yang kita bincangkan dalam bahagian sebelumnya. Sebagai contoh, anda boleh menghidupkan bilangan titik dalam poligon dengan menentukan nilai awal dan akhir yang berbeza. Anda juga boleh menukar asal bentuk daripada '50% 50%' kepada sebarang nilai lain, seperti '75% 75%'. Sifat lain seperti angle dan scale berkelakuan sama seperti dalam Html modul yang sama. 🎜 🎜Tempoh, kelewatan dan kelajuan animasi yang berbeza boleh digunakan masing-masing tempoh, delay dan atribut kelajuan untuk dikawal. Atribut Repeat juga berfungsi sama seperti dalam modul Html. Jika anda hanya mahu animasi dimainkan sekali, anda boleh menetapkannya kepada 0. Begitu juga, anda boleh menetapkannya kepada 3 untuk memainkan animasi 4 kali. Semua nilai pelonggaran yang sah untuk modul Html juga sah untuk modul Shape. 🎜 🎜Satu-satunya perbezaan antara keupayaan animasi kedua-dua modul ini ialah anda tidak boleh menentukan parameter animasi secara individu untuk sifat dalam modul Shape. Semua sifat yang anda animasikan akan mempunyai tempoh, kelewatan, kiraan ulangan yang sama, dsb. 🎜 🎜Berikut ialah contoh di mana kita menganimasikan kedudukan-x, skala dan sudut bulatan: 🎜 rrreee 🎜🎜 🎜Salah satu cara untuk mengawal main balik animasi yang berbeza ialah menggunakan kaedah .then() untuk menentukan set sifat baharu untuk dianimasikan selepas jujukan animasi pertama selesai sepenuhnya. Anda boleh menentukan nilai awal dan akhir baharu untuk semua sifat animasi dalam .then(). Berikut adalah contoh: 🎜 rrreee 🎜🎜

Pemikiran Akhir

🎜Dalam tutorial ini, kami belajar cara mencipta bentuk yang berbeza menggunakan moj dan cara menghidupkan sifat bentuk ini. 🎜 🎜Modul Shape mempunyai semua keupayaan animasi modul Html. Satu-satunya perbezaan ialah sifat tidak boleh dianimasikan secara individu. Mereka hanya boleh dianimasikan sebagai satu kumpulan. Anda juga boleh mengawal main balik animasi dengan menggunakan kaedah yang berbeza untuk memainkan, menjeda, menghentikan dan menyambung semula animasi pada bila-bila masa. Saya memperincikan kaedah ini dalam tutorial pertama siri ini. 🎜 🎜Jika anda mempunyai sebarang soalan tentang tutorial ini, sila tinggalkan komen. Dalam tutorial seterusnya anda akan mempelajari tentang modul ShapeSwirl dan stagger dalam mojs. 🎜

Atas ialah kandungan terperinci Bermula dengan Perpustakaan Animasi Mojs: Teroka Modul Bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!