Mula Pantas dengan Perpustakaan Animasi Mojs: Panduan untuk Modul Letupan

Kami memulakan siri ini dengan mempelajari cara menganimasikan elemen HTML menggunakan mojs. Dalam tutorial kedua ini, kami terus menggunakan modul Shape untuk menganimasikan bentuk SVG terbina dalam. Tutorial ketiga menunjukkan lebih banyak cara untuk menghidupkan bentuk SVG menggunakan modul ShapeSwirl dan stagger. Shape 模块制作内置 SVG 形状的动画。第三个教程介绍了使用 ShapeSwirl 和 stagger 模块对 SVG 形状进行动画处理的更多方法。

现在，我们将学习如何使用 Burst 模块以突发形式制作不同 SVG 形状的动画。本教程将取决于我们在前三个教程中介绍的概念。如果您还没有阅读过它们，我建议您先阅读它们。

创建基本连拍动画

在创建任何突发动画之前，我们需要做的第一件事是实例化 Burst 对象。之后，我们可以指定不同属性的值来控制动画的播放方式。 Burst 模块中的许多属性名称与 Shape 模块中的属性名称相同。然而，在这种情况下，这些属性执行非常不同的任务。

left 和 right 属性决定突发的初始位置，而不是突发内部的粒子。同样，x 和 y 属性决定整个突发的移动而不是单个粒子的移动。

所有爆发粒子形成的圆的半径由 radius 属性控制。这与单个形状的 radius 属性非常不同，后者决定了这些形状的大小。在爆发的情况下，半径决定了其中各个形状的距离。

可以使用 count 属性指定单次突发中的形状或粒子数量。默认情况下，您创建的每个突发中将有五个粒子。所有这些粒子均匀分布在爆发的圆周上。例如，如果有四个粒子，它们将彼此成 90 度放置。如果有三个粒子，它们将被放置在 120 度处。

如果您不希望爆发粒子覆盖整个 360 度，您可以使用 Degree 属性指定应覆盖的部分。任何大于 0 的值对此属性都有效。指定的度数将均匀分布在所有粒子之间。如果度数超过 360，形状可能会重叠。

使用 angle 属性指定的角度决定了整个突发的角度。在这种情况下，单个粒子不是绕着它们自己的中心旋转，而是绕着爆发的中心旋转。这与地球绕太阳公转类似，与地球自转轴自转不同。

scale 属性可缩放突发的所有物理属性的值，进而缩放各个形状。就像其他突发属性一样，其中的所有形状都会立即缩放。将突发 scale 设置为 3 会将整个突发的半径以及单个形状的大小增加 3。

在下面的代码片段中，我们将使用刚刚讨论的属性创建五个不同的突发。

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 仅在它们必须覆盖的度数上有所不同。由于 burstA 中的粒子必须覆盖 360 度（默认值），因此它们的放置间隔为 360/20 = 18 度。另一方面，burstE 中的粒子以 3600/20 = 180 度数放置。从零开始，第一个粒子放置在 0 度处，下一个粒子放置在 180 度处。

然后将第三个粒子放置在 360 度处，这基本上等于 0 度。然后将第四个粒子放置在 540 度处，但这基本上等于 180 度。换句话说，所有奇数粒子都放置在0度处，所有偶数粒子放置在180度处。最后，您只看到两个粒子，因为所有其他粒子都与前两个粒子重叠。

请务必记住，您无法直接控制突发动画的持续时间、延迟或缓动功能。该模块根据正在动画的不同子项的值自动确定所有这些值。

操纵单个爆发粒子

到目前为止，在本教程中，爆发中的所有粒子都应用了相同的动画。它们的角度、比例、半径和位置都改变了相同的值。此外，我们无法控制单个粒子或整个爆发的持续时间和延迟。 mojs Burst

Kini kita akan belajar cara menganimasikan bentuk SVG yang berbeza dalam letusan menggunakan modul Burst. Tutorial ini akan bergantung pada konsep yang kami perkenalkan dalam tiga tutorial sebelumnya. Jika anda belum membacanya lagi, saya syorkan membacanya terlebih dahulu. 🎜

Buat animasi pecah asas

🎜Sebelum mencipta sebarang animasi pecah, perkara pertama yang perlu kita lakukan ialah membuat instantiate objek Burst. Selepas itu, kita boleh menentukan nilai untuk sifat yang berbeza untuk mengawal cara animasi dimainkan. Kebanyakan sifat dalam modul Burst mempunyai nama yang sama seperti dalam modul Shape. Walau bagaimanapun, dalam kes ini, sifat ini melaksanakan tugas yang sangat berbeza. 🎜 🎜Sifat kiri dan kanan menentukan kedudukan awal letusan, bukan zarah di dalam letusan. Begitu juga, sifat x dan y menentukan pergerakan keseluruhan pecahan dan bukannya pergerakan zarah individu. 🎜 🎜Jejari bulatan yang dibentuk oleh semua zarah pecah dikawal oleh atribut radius. Ini sangat berbeza daripada atribut radius bagi bentuk individu, yang menentukan saiz bentuk tersebut. Dalam kes pecah, jejari menentukan jarak bentuk individu di dalamnya. 🎜 🎜Anda boleh menentukan bilangan bentuk atau zarah dalam satu letusan menggunakan atribut count. Secara lalai, terdapat lima zarah dalam setiap letusan yang anda buat. Semua zarah ini diagihkan sama rata di sekeliling lilitan pecah. Sebagai contoh, jika terdapat empat zarah, ia akan diletakkan pada 90 darjah antara satu sama lain. Jika terdapat tiga zarah, ia akan diletakkan pada 120 darjah. 🎜 🎜Jika anda tidak mahu pecahan zarah meliputi keseluruhan 360 ​​darjah, anda boleh menggunakan atribut Degree untuk menentukan bahagian yang perlu dilindungi. Mana-mana nilai yang lebih besar daripada 0 adalah sah untuk harta ini. Darjah yang ditentukan akan diagihkan sama rata di antara semua zarah. Jika darjah melebihi 360, bentuk mungkin bertindih. 🎜 🎜Sudut yang ditentukan menggunakan atribut angle menentukan sudut keseluruhan pecahan. Dalam kes ini, zarah individu tidak berputar di sekitar pusat mereka sendiri, tetapi di sekitar pusat pecah. Ini serupa dengan revolusi Bumi mengelilingi Matahari, dan berbeza dengan putaran Bumi pada paksinya. 🎜 Sifat 🎜skala menskalakan nilai semua sifat fizikal letusan, dan dengan itu membentuk individu. Sama seperti sifat letusan lain, semua bentuk di dalamnya berskala serta-merta. Menetapkan letusan skala kepada 3 meningkatkan jejari keseluruhan letusan dan saiz bentuk individu sebanyak 3. 🎜 🎜Dalam coretan kod di bawah, kami akan mencipta lima letusan berbeza menggunakan sifat yang baru dibincangkan. 🎜

var burstA = new mojs.Burst({
  count: 20,
  children: {
    shape: 'line',
    stroke: 'black',
    radius: 20,
    angle: {
    0: 180
    }
  }
});

🎜Anda dapat melihat bahawa burstA dan burstE hanya berbeza dalam bilangan darjah yang perlu diharungi. Memandangkan zarah dalam burstA mesti meliputi 360 darjah (lalai), ia diletakkan 360/20 = 18 darjah antara . Sebaliknya, zarah dalam burstE diletakkan pada 3600/20 = 180 darjah. Bermula dari sifar, zarah pertama diletakkan pada 0 darjah dan zarah seterusnya diletakkan pada 180 darjah. 🎜 🎜Kemudian letakkan zarah ketiga pada 360 darjah, yang pada asasnya sama dengan 0 darjah. Kemudian letakkan zarah keempat pada 540 darjah, tetapi pada dasarnya sama dengan 180 darjah. Dengan kata lain, semua zarah ganjil diletakkan pada 0 darjah dan semua zarah genap diletakkan pada 180 darjah. Pada akhirnya, anda hanya melihat dua zarah kerana semua zarah lain bertindih dengan dua zarah pertama. 🎜 🎜🎜 🎜Adalah penting untuk diingat bahawa anda tidak mempunyai kawalan langsung ke atas tempoh animasi pecah, kelewatan atau fungsi pelonggaran. Modul secara automatik menentukan semua nilai ini berdasarkan nilai kanak-kanak berbeza yang dianimasikan. 🎜

Memanipulasi zarah pecah individu

🎜Setakat ini dalam tutorial ini, semua zarah dalam letusan telah menggunakan animasi yang sama. Sudut, skala, jejari dan kedudukannya semuanya berubah dengan nilai yang sama. Selain itu, kami tidak mempunyai kawalan ke atas tempoh dan kependaman zarah individu atau keseluruhan pecahan. Modul Burst mojs tidak mempunyai set sifat yang boleh menukar semua nilai ini secara langsung. Walau bagaimanapun, kita boleh menentukan nilai animasi untuk zarah individu, yang seterusnya mempengaruhi animasi pecah. 🎜

爆发动画中的所有粒子都被视为原始 Burst 对象的子级。因此，mojs 允许我们使用 children 属性来控制单个爆发粒子的动画，该属性接受一个对象作为其值。您可以在子对象内使用除 x 和 y 之外的所有 ShapeSwirl 属性。这是有道理的，因为爆发动画中的单个粒子必须出现在某些位置，并且允许我们随机更改单个粒子的位置将改变配置。

您未指定的任何子属性值都将设置为 ShapeSwirl 模块提供的默认值。在下面的示例中，我们对突发动画的 20 条不同线进行动画处理。这次，angle 属性已设置在单个粒子上，而不是 Burst 对象上，这样只有线绕其中心旋转，而不是整个对象。正如我们在上一篇教程中了解到的，所有 ShapeSwirl 对象默认情况下都会从 1 缩小到 0。这就是动画中线条长度从 40 变为 0 的原因。

var burstA = new mojs.Burst({
  count: 20,
  children: {
    shape: 'line',
    stroke: 'black',
    radius: 20,
    angle: {
    0: 180
    }
  }
});

正如我之前提到的，我们可以为连拍动画中的所有 ShapeSwirl 属性设置动画。动画中的每个子项都可以有自己的一组属性。如果仅提供一个值，它将应用于所有子粒子。如果这些值以数组形式提供，它们将按顺序应用，一次一个粒子。

下面是使用我们迄今为止学到的所有概念创建五种不同的突发动画的 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
  }
});

在第一个突发动画中，直接应用于 Burst 对象的 angle 会围绕突发对象的中心旋转整个组。然而，在children属性中应用的angle会围绕它们自己的中心旋转所有三角形。我们还通过将所有子级的动画持续时间更改为 4000 毫秒来减慢突发动画的速度。

在第二个连拍动画中，所有三角形的颜色均取自传递给 fill 属性的数组。我们只指定了三种填充颜色，但三角形的总数为 20。在这种情况下，mojs 会不断循环数组元素，并一次又一次地用相同的三种颜色填充三角形。

在第四个动画中，我们使用在上一个教程中了解的 rand 字符串来为所有子粒子随机选择一个比例值。我们还将 isShowEnd 属性的值设置为 false 以隐藏动画结束时的粒子。

在第五个动画中，我们使用 Shape 模块教程中的 then() 方法在第一个动画序列完成后播放另一个动画序列。

最终想法

本系列的目的是让您熟悉 mojs 动画库的基础知识。每个教程都侧重于单个模块以及如何使用该模块中的属性来创建基本动画。

最后一个教程使用了之前教程中的概念来创建稍微复杂的动画。 Mojs 是一个非常强大的动画库，您获得的最终结果取决于您对所有属性的创意程度，因此请不断尝试。

如果您希望我在本教程中澄清任何内容，请在评论中告诉我。

Atas ialah kandungan terperinci Mula Pantas dengan Perpustakaan Animasi Mojs: Panduan untuk Modul Letupan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!