快速入门Mojs动画库:爆炸模块指南

wufei123 2024-06-02 阅读:54 评论:0
我们通过学习如何使用 mojs 为 HTML 元素添加动画来开始本系列。在第二个教程中,我们继续使用 Shape 模块制作内置 SVG 形状的动画。第三个教程介绍了使用 ShapeSwirl 和 stagger 模块对 SVG 形状进行动...

快速入门mojs动画库:爆炸模块指南

我们通过学习如何使用 mojs 为 HTML 元素添加动画来开始本系列。在第二个教程中,我们继续使用 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 模块没有一组可以直接更改所有这些值的属性。但是,我们可以指定单个粒子的动画值,这反过来会影响爆发动画。

爆发动画中的所有粒子都被视为原始 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 是一个非常强大的动画库,您获得的最终结果取决于您对所有属性的创意程度,因此请不断尝试。

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

以上就是快速入门Mojs动画库:爆炸模块指南的详细内容,更多请关注知识资源分享宝库其它相关文章!

版权声明

本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com

分享:

扫一扫在手机阅读、分享本文

发表评论
热门文章
  • BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)

    BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)
    知名变性人制作总监corrine busche离职bioware,引发业界震荡!外媒“smash jt”独家报道称,《龙腾世纪:影幢守护者》制作总监corrine busche已离开bioware,此举不仅引发了关于个人职业发展方向的讨论,更因其可能预示着bioware埃德蒙顿工作室即将关闭而备受关注。本文将深入分析busche离职的原因及其对bioware及游戏行业的影响。 Busche的告别信:挑战与感激并存 据“Smash JT”获得的内部邮件显示,Busche离职原...
  • 闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)

    闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)
    闪耀暖暖钻石竞技场第十七赛季“华梦泡影”即将开启!全新闪耀性感套装【靡城永恒】震撼来袭!想知道如何获得这套精美套装吗?快来看看吧! 【靡城永恒】套装设计理念抢先看: 设计灵感源于夜色中的孤星,象征着淡然、漠视一切的灰色瞳眸。设计师希望通过这套服装,展现出在虚幻与真实交织的夜幕下,一种独特的魅力。 服装细节考究,从面料的光泽、鞋跟声响到裙摆的弧度,都力求完美还原设计初衷。 【靡城永恒】套装设计亮点: 闪耀的绸缎与金丝交织,轻盈的羽毛增添华贵感。 这套服装仿佛是从无尽的黑...
  • boss直聘怎么取消面试预约 boss直聘上面试爽约了会怎么样(面试.爽约.预约.取消.boss.....)

    boss直聘怎么取消面试预约 boss直聘上面试爽约了会怎么样(面试.爽约.预约.取消.boss.....)
    求职宝典:boss直聘面试技巧及取消预约方法 各位求职者注意啦!在Boss直聘上,随意取消面试预约会留下爽约记录,影响后续求职!本文将指导您如何避免爽约,以及如何取消已预约的面试。 如何取消Boss直聘面试预约? 打开Boss直聘APP,进入“我的”页面。 点击“待面试”,查看面试日程。 选择需要取消的面试,点击“取消面试”按钮即可。 Boss直聘面试爽约的后果? 爽约行为会在HR端留下记录,影响您的求职成功率。其他HR也能看到您的不良记录,所以务必重视面试预约。...
  • 蛋仔派对2025最新皮肤兑换码汇总 最新皮肤兑换码一览(兑换.皮肤.最新.派对.汇总.....)

    蛋仔派对2025最新皮肤兑换码汇总 最新皮肤兑换码一览(兑换.皮肤.最新.派对.汇总.....)
    蛋仔派对2025最新皮肤兑换码大放送!游戏内新增多款皮肤兑换码,包含最新、福利和通用三种类型,助你轻松获取精美奖励! 赶紧来看看如何兑换吧! 兑换码列表: 最新兑换码: ccewndj4k4k、cdkqdfm4fh、peetnmp4ef、cdxymk8f67 福利兑换码: cca863ywtfa、eggy2310am、eggy2311gz、eggyeggy9wz 通用兑换码: pec74dkcty、jsrqkrrjmh、cd3wt7wrph、ccepn7d8cjf...
  • python怎么调用其他文件函数

    python怎么调用其他文件函数
    在 python 中调用其他文件中的函数,有两种方式:1. 使用 import 语句导入模块,然后调用 [模块名].[函数名]();2. 使用 from ... import 语句从模块导入特定函数,然后调用 [函数名]()。 如何在 Python 中调用其他文件中的函数 在 Python 中,您可以通过以下两种方式调用其他文件中的函数: 1. 使用 import 语句 优点:简单且易于使用。 缺点:会将整个模块导入到当前作用域中,可能会导致命名空间混乱。 步骤:...