Mojs动画库入门：突发模块

最新推荐文章于 2024-08-12 08:32:13 发布

cunjie3951

最新推荐文章于 2024-08-12 08:32:13 发布

阅读量389

点赞数

文章标签： python java 大数据 css spring

本文介绍了如何使用Mojs动画库中的突发模块来创建SVG形状的爆发动画。讲解了如何实例化对象并设置控制动画播放方式的属性，如`radius`、`angle`、`degrees`等。此外，还探讨了如何处理单个粒子的动画，通过`children`属性自定义粒子的动画效果。最后，鼓励读者进行实验，以充分利用Mojs的强大功能。

摘要由CSDN通过智能技术生成

我们通过学习如何使用mojs为HTML元素设置动画来开始本系列文章。在第二个教程中，我们继续使用Shape模块来制作内置SVG形状的动画。第三篇教程介绍了使用ShapeSwirl和stagger模块为SVG形状设置动画的更多方法。

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

创建基本的连拍动画

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

的left和right属性确定突发，而不是在其内部的颗粒的初始位置。类似地， x和y属性确定整个爆发而不是单个粒子的位移。

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

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

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

使用angle属性指定的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中的粒子burstE为3600/20 = 180度。从零开始，第一个粒子置于0度，第二个粒子置于180度。

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

重要的是要记住，您不能直接控制突发动画的持续时间，延迟或缓动功能。该模块根据不同的动画子代的值自动确定所有这些值。

处理单个爆炸粒子

到目前为止，在本教程中，所有突发中的粒子都应用了相同的动画。它们的角度，比例，半径和位置都改变了相同的值。而且，我们无法控制单个粒子或整个突发的持续时间和延迟。 mojs Burst模块没有一组可以直接更改所有这些值的属性。但是，我们可以为单个粒子指定动画值，这反过来会影响连拍动画。

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

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

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

正如我前面提到的，我们可以对ShapeSwirl动画中的所有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使整个组围绕Burst对象的中心旋转。但是，在children属性内应用的angle使所有三角形绕其自身的中心旋转。我们还通过将所有子级的动画持续时间更改为4000毫秒来减慢了突发动画的速度。

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

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

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