粒子效果组件

AMPHTML 广告视频广告图片广告均不支持此组件。

通过粒子效果组件,您可以添加基于粒子系统的动画效果。粒子是在起始参数范围内(例如在特定区域和大小范围内)生成的,然后以指定的速率移动和变化。这样就可以产生具有某种程度随机性的视觉效果,例如下雪、下雨、火焰、蒸汽和烟雾。

下雪效果的示例

如需使用粒子效果组件,请按以下步骤操作:

  1. 打开组件面板,然后打开图形和效果文件夹。

  2. 双击粒子效果 组件,或将其拖到场景中。

  3. 在场景中双击该组件,或在属性面板中点击设置… 按钮。系统随即会打开“粒子效果”对话框。

  4. 将您要添加为层的图片从资源库面板拖到面板中。如需添加其他图片,请点击面板底部的添加图片 按钮。

  5. 从底部的预设面板中选择所需效果,然后将其拖到场景中;或者点击所需效果上方显示的“添加” 按钮。场景中随即便会显示该效果的快照,并描绘出粒子起始区域(生成粒子的位置)的轮廓。您可以将多种效果分别添加为不同的层。

  6. 通过调整效果的属性,对效果进行自定义。您可以将新的一组属性保存为自定义预设

重排层的顺序

层的顺序决定了它们在重叠时的堆叠方式。如需更改层的堆叠顺序,请按以下步骤操作:

  1. 通过以下方式打开“粒子效果”对话框:在场景中双击粒子效果组件,或在属性面板中点击设置… 按钮。
  2. 面板中,将层拖动到新位置。

调整层的位置

您可以移动图片或效果的粒子起始区域,只要不移出组件的边界就行。如需移动层,请按以下步骤操作:

  1. 通过以下方式打开“粒子效果”对话框:在场景中双击粒子效果组件,或在属性面板中点击设置… 按钮。
  2. 选择要移动的层。该图片或效果的粒子起始区域周围会出现一个边界框。您还可以选择多个层,以便将它们一起移动。
  3. 您可以采用以下方法之一:
    • 在场景中:
      • 将层拖动到新位置。
      • 使用箭头键可将层一次移动 1 个像素的距离。在按住 Shift 键的同时按一下箭头键,可将层沿箭头键所表示的方向移动 10 个像素的距离。
    • 在“属性”面板中:
      • 对于图片,请修改顶部和左侧位置属性。
      • 对于效果,请展开高级属性并修改 X 轴发射范围Y 轴发射范围的值。设置保持同步增减 选项,可移动粒子起始区域,而不调整其大小。

调整层的大小

您可以为图片或效果的粒子起始区域调整大小,只要大小不超过组件的宽度和高度就行。对于效果,您可以调整粒子起始区域的大小。如需调整层的大小,请按以下步骤操作:

  1. 通过以下方式打开“粒子效果”对话框:在场景中双击粒子效果组件,或在属性面板中点击设置… 按钮。
  2. 选择要调整大小的层。该图片或效果的粒子起始区域周围会出现一个边界框。您还可以选择多个层。
  3. 您可以采用以下方法之一:
    • 在场景中:拖动边界框各边和各角上的控制手柄。
    • 在“属性”面板中:
      • 对于图片,请修改宽度和高度属性。
      • 对于效果,请展开高级属性并修改 X 轴发射范围Y 轴发射范围的值。确保已停用保持同步增减 选项。

移除层

如需从该组件中删除层,请按以下步骤操作:

  1. 通过以下方式打开“粒子效果”对话框:在场景中双击粒子效果组件,或在属性面板中点击设置… 按钮。
  2. 面板中,选择要删除的一个或多个层。
  3. Delete 键,或点击面板底部的删除层 按钮。

隐藏和显示层

您可以隐藏某个层,以便更轻松地操作其他层。隐藏的层不会显示在预览画面和已发布的文件中。如需隐藏或显示某个层,请按以下步骤操作:

  1. 通过以下方式打开“粒子效果”对话框:在场景中双击粒子效果组件,或在属性面板中点击设置… 按钮。
  2. 隐藏所有层 图标下方,点击要隐藏或显示的层对应的框。

属性

除了整个组件的属性外,您还可以配置该组件中所含的各种效果的属性。

粒子效果组件的属性

属性

说明

名称 设置粒子效果组件的名称。
自动播放

如果选中此属性,则在该组件加载时会自动播放动画。

注意:单个效果也具有自动播放属性。

设置动画时间限制 如果选中此属性,则在播放指定的时长(以秒为单位)后会停止播放动画。

每种效果的属性

您可以在“粒子效果”对话框中查看每种效果所特有的属性。通过以下方式打开该对话框:在场景中双击“粒子效果”组件,或在“属性”面板中点击设置… ,然后选择相应效果即可查看其属性。

预设

每项预设都有一组默认属性,您可以通过右键点击预设下拉菜单并选择重置来恢复这些属性。如果您改选其他预设,新预设的以下属性将重置为默认值。

Google Web Designer 自带了一些内置预设。您还可以保存自己的预设,然后导出并导入这些预设,以便在其他计算机上使用(请参阅自定义预设)。

属性

说明

ID 效果的 ID(您可以在事件中通过此 ID 来引用相应效果)。
数量 未停止或未循环播放该效果的动画时生成的粒子总数。
大小 初始粒子大小的范围。请以像素为单位指定最小值和最大值。
形态 粒子形状。
  • 方形
  • 圆形
  • 直线
  • 泪珠形
  • 图片(从资源库中选择图片。可以绑定到动态数据。)
颜色 起始颜色和结束颜色。
不透明度 最低和最高初始不透明度。0 表示透明,1 表示不透明(可以使用小数值表示半透明)。
速度 最低和最高初始速度。
方向

粒子移动方向的最小和最大角度。

您还可以使用圆圈上的控件设置角度范围。

高级
X 轴发射范围

生成粒子时使用的最小和最大 X 坐标,以像素或百分比的形式指定。

如果您设置了保持同步增减 选项,系统会自动将任何更改同时应用于两个坐标字段,从而使粒子起始区域的宽度保持不变。

Y 轴发射范围

生成粒子时使用的最小和最大 Y 坐标,以像素或百分比的形式指定。

如果您设置了保持同步增减 选项,系统会自动将任何更改同时应用于两个坐标字段,从而使粒子起始区域的高度保持不变。

大小变化速率 大小变化的速率,以像素为单位指定(支持使用小数值)。如果使用负值,则会使粒子缩小。
随机颜色 如果选中此属性,粒子初始颜色会在起始颜色和结束颜色之间随机变化。
颜色变化速率 颜色从起始颜色变为结束颜色的速率。如果选中随机颜色,则此属性会被停用。
不透明度变化速率 不透明度变化的速率。如果使用负值,则会使粒子变为透明。
自动播放 如果选中此属性,当组件开始播放时,该效果的动画就会开始播放。若未选中此属性,您可以使用事件来触发动画。
循环播放 如果选中此属性,则会不停地播放该效果的动画。若未选中此属性,则会在生成的粒子达到指定的总数后结束播放动画。
发射间隔 生成新粒子的间隔时间。
快进 在生成了指定百分比的粒子时开始播放动画。
加速度 粒子移动的水平和垂直加速度。
湍流
频率 影响粒子移动的湍流频率。值越高,每个粒子路径中的不规则变化就越频繁。
强度 湍流的强度。如果设为 0,则表示没有湍流。
强度变化速率 湍流强度的变化速率。
拖尾 粒子沿其移动路径留下的拖尾长度。如果设为 1,则表示没有拖尾。

湍流可能会减缓广告或网页的加载速度,特别是在您设置了较长的拖尾时。

自定义预设

您可以将一组资源另存为自定义预设,以便重复使用它们。

保存新的自定义预设

  1. 调整现有预设的属性。
  2. 在底部的预设面板中,点击另存为预设 "Save as preset" icon 按钮。您还可以在场景中右键点击效果,或在属性面板中右键点击预设下拉菜单。
  3. 为新预设输入具有唯一性的名称,然后按 Enter 键或点击确定

此时,该预设会列在属性面板的下拉列表中,还会出现在预设面板内,并以自定义预设 "Custom preset" icon 图标表示。

重命名自定义预设

  1. 预设面板中右键点击相应预设,然后选择重命名…
  2. 输入新名称,然后按 Enter 键或点击确定

删除自定义预设

  1. 预设面板中右键点击相应预设,然后选择删除
  2. 点击确认来确认删除。

导出自定义预设

导出自定义预设,以便将其分享给其他 Google Web Designer 用户。

  1. 预设面板中右键点击相应预设,然后选择导出…
  2. 为导出文件选择目标文件夹。

导出的.zip 文件与预设具有相同的名称。

导入自定义预设

如果您有某个自定义预设的导出文件,可以将其导入到您的 Google Web Designer 实例中。

  1. 将导出的 .zip 文件复制到要将预设导入到的计算机。
  2. 在该计算机上,打开 Google Web Designer 中的“粒子效果”对话框。
  3. 在底部的预设面板中,点击导入预设 "Import" icon 按钮。
  4. 选择导出的自定义预设对应的 .zip 文件。

导入的预设会显示在属性面板的下拉列表中,还会显示在预设面板内。

事件和操作

粒子效果组件发送的事件

您可以根据粒子效果组件的以下事件来触发其他操作:

事件 说明
已达到时间限制 当动画播放达到指定的时间限制时发送。
粒子效果组件及每种效果执行的操作

以下粒子效果组件操作可由其他事件触发:

  • 播放
  • 暂停
  • 停止

在“事件”对话框中选择上述某个操作后,请将粒子效果组件或特定效果设为接收方

了解如何配置事件

预览

当您使用“粒子效果”对话框时,设计标签会显示该组件的显示效果静态快照。

要观看当前设置的动画效果,请切换到预览标签。您可以在预览播放期间修改属性,以查看所做更改立即生效后的效果。

您还可以在自己首选的浏览器中预览文档,只需依次点击对话框底部的保存预览按钮即可。

该内容对您有帮助吗?

您有什么改进建议?
搜索
清除搜索内容
关闭搜索框
主菜单
4826666451405773804
true
搜索支持中心
true
true
true
true
true
5050422
false
false