旋涡组件

通过旋涡组件，您可以利用互动式 3D 模型以沉浸式展示格式制作广告素材。当广告滚动进入视图时，初始 3D 动画会与网页滚动关联在一起。用户可以直接与该模型互动，并将广告展开至全屏以查看更多内容。

该组件仅适合在 Display & Video 360 旋涡广告素材中使用，Microsoft Edge 不支持该组件。

如需向项目中添加旋涡组件，请执行以下操作：

1. 打开组件面板，然后打开图形和效果文件夹。
2. 将旋涡组件拖动到场景中。
3. 双击该组件以打开旋涡修改对话框。
4. 在层面板中选择 3D 模型层。
5. 在属性面板的网址字段中，浏览找到您要使用的 3D 素材资源的 GLB 文件。您还可以调整其他属性（参见下文）。
6. 通过以下方式添加层：将图片文件从文件系统拖动到场景或层面板中（仅限 Windows 或 Mac），或者点击资源库面板底部的导入素材资源 按钮。在旋涡组件中，只能将图片添加为层。
7. 使用开始和结束标签页将每个层分别放置在动画开始和结束时它们应显示在的位置。您可以将层拖动到所需位置，也可以使用属性面板中的开始位置和结束位置字段。
8. 根据需要设置其他配置选项（见下文）。
9. 当您对该组件感到满意后（您可以在配置过程中进行预览），点击保存。之后，您将会返回到正常的 Google Web Designer 界面。

配置选项

要配置该组件，您可以在场景中双击该组件，也可以选择该组件，然后点击属性面板中的设置… 图标 。

添加中间状态

若想更好地控制旋涡组件动画，您可以添加中间状态，并更改该时间点的层属性。

1. 将鼠标悬停在开始标签页的右侧，然后点击 按钮。系统随即会显示中间标签页。
2. 默认情况下，中间状态位于动画起点和终点的中间位置。您可以调整动画时间设置。
3. 切换到中间标签，以设置该时刻的层属性。

要移除中间状态，请将鼠标悬停在中间标签的右侧，然后点击 X。

更改动画时间设置

旋涡组件的动画时间设置取决于它在网页上滚动了多远或滚出网页多远。默认情况下，动画会在该组件的上边缘开始进入网页视图 (0%) 时开始播放，并会在该组件的下边缘从网页顶部消失 (100%) 时结束播放。如果您添加了中间状态，还可以调整它在动画播放过程中的发生时间。您可以通过两种方法调整动画时间设置：

• 在动画时间设置面板中，将开始时间、中间点和结束时间框或滑块拖动至所需的百分比。
• 在动画时间设置面板的相应字段中输入开始时间、中间点和结束时间百分比。

将 3D 模型的背景设为透明

1. 选择 3D 模型。
2. 在属性面板中，选中透明的 3D 模型背景复选框。

添加手势提示

1. 选择 3D 模型。
2. 在属性面板中，点击图标下拉列表并从资源库中选择图片，或点击浏览… 从文件系统中选择图片。
3. 您也可以在文字字段中输入要与图标一起显示的文字。

手势提示会显示在 3D 模型上，用于提示用户与之互动。

旋转 3D 模型

1. 选择 3D 模型。
2. 在属性面板中，为动画的起点、中间点和终点设置偏摆。

偏摆是模型绕垂直轴旋转的角度。

添加图片层

您可以通过两种方式来添加层：

• 将文件从文件系统拖动到场景或层面板中（仅限 Mac 或 Windows）。
• 点击资源库面板底部的导入素材资源 按钮。

旋涡组件中的新层必须是图片。只能有一个 3D 模型层（系统会默认添加该层）。

移动层

1. 选择要移动的层。
2. 选择开始、中间或结束标签。
3. 使用下列方法之一放置层：
   • 将层拖动到新位置。
   • 在属性面板中设置开始、中间或结束位置属性。您只能修改与当前标签页匹配的属性。使用与开始位置一致、与中间位置一致或与结束位置一致 按钮可以将其他位置的值复制过来。

切换到开始、中间或结束标签页，以调整层的其他位置。

更换图片

1. 在场景中右键点击您想换掉的图片，然后从弹出式菜单中选择交换图片…。
2. 从“资源库”中选择图片，或点击导入文件 按钮，从您的计算机中选择图片文件。

新图片会取代原始图片。如果您之前调整过被更换掉的图片的尺寸，则新图片也会使用调整后的尺寸。否则，新图片会使用其原始尺寸。

重排层顺序

在层面板中，可通过拖动层来调整其在列表中的位置。

各层在此列表中的顺序决定着实际显示时它们彼此的前后顺序。在此列表中排名较高的层会显示在排名较低的层的前面。

删除图片层

1. 选择要删除的层。
2. 点击位于层面板底部的删除 按钮。

对于旋涡组件来说，3D 模型层是必需的，无法删除。

调整层大小

1. 选择要调整大小的层。
2. 使用下列方法之一调整层大小：
   • 在属性面板中，设置层的宽度和高度。点击锁定宽高比 按钮可切换宽高比是否固定。
   • 在场景中，拖动层边角上的某个大小调整手柄。

在整个动画时长内，层始终会缩放到指定大小。

更改层的不透明度

1. 选择要更改的层。
2. 在属性面板中，将起始位置不透明度或结束位置不透明度设为介于 0 到 1 之间的值（0 表示透明，1 表示不透明）。

在动画播放完毕时，3D 模型层始终是不透明的。

更改层的动画加/减速选项

1. 选择要更改的层。
2. 在属性面板的高级属性下方，从加/减速下拉菜单中选择加/减速类型。

不支持自定义加/减速选项。

隐藏和显示层

在层面板中，点击层缩略图旁边的框（位于隐藏所有层 按钮下方）。

通过点击隐藏所有层 按钮，您可以隐藏或显示所有层。

隐藏某个层更便于您处理其他层，并会使隐藏的层不显示在配置预览中，但对于在浏览器中进行预览或对于已发布的广告素材，则没有影响。

显示和隐藏重影

1. 选择一个图片层。
2. 在属性面板中的高级属性下，点击显示重影复选框。

重影是层的半透明版本，显示在您当前未修改的位置，使您能够直观地比较开始位置、中间位置和结束位置。重影仅供您参照，不会在预览画面和发布的文件中显示。

属性

旋涡组件属性

属性	说明
名称	旋涡组件的名称。
滚动系数	介于 0 到 1 之间的数值，表示观看者滚动的距离。仅用于在 Google Web Designer 场景中显示。默认值为 0.5。

在旋涡修改对话框中，您可以在选择某个层后查看和修改层属性。

3D 模型层属性

注意：使用低于 11.0.0 版的 Google Web Designer 创建的旋涡组件在 3D 模型层属性方面可能有所不同。

属性	说明
名称	3D 模型组件的名称。
网址	3D 素材资源的 GLB 来源文件。 您可以使用 Khronos glTF Validator 确保您的 GLB 文件有效。 适用于较旧的旋涡组件 3D 素材资源的网址或 ID。 系统只支持在 Poly 中托管且已开启链接共享功能的素材资源。素材资源文件不得超过 2 MB，因为 Google Web Designer 中可能无法加载更大的素材资源。有关其他要求，请参阅 3D 素材资源指南。 网址的开头应为 https://poly.google.com/view/。 您可以在 Poly 查看页面网址的末尾找到该 ID，例如 https://poly.google.com/view/0CkCZrXqCWW。 示例： https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW 刷新素材资源 - 如需刷新 3D 素材资源，您可以点击网址字段中的这个按钮。如果您没有看到任何变化，可能是系统仍在处理素材资源，请稍等片刻，然后重试。
透明的 3D 模型背景	（仅适用于较旧的旋涡组件。） 如果您希望 3D 模型组件的背景是透明的，请选中此框。
手势提示
图标	显示在 3D 模型上的图片，用于提示用户与模型互动。手势提示会微微移动以吸引用户的注意力，直至达到动画时间限制，并会在用户开始与模型互动后消失。
文字	显示在手势提示图标下方的文字。仅在指定了手势提示图标时才适用。
设置动画时间限制	勾选此框并设置时长（以秒为单位），可以限制手势提示动画的时长。
位置和尺寸
开始	在动画开始处，层与旋涡组件左侧和顶部之间的距离。选择开始标签后可对其进行修改。
中间	在动画的中间状态，层与旋涡组件左侧和顶部之间的距离。选择中间标签后可对其进行修改。
结束	在动画结束处，层与旋涡组件左侧和顶部之间的距离。选择结束标签后可对其进行修改。
大小	层的宽度和高度。在整个动画时长内，会一直影响相应层。
旋转
偏摆	模型绕垂直轴旋转的开始、中间和结束角度（以度为单位）。
样式
不透明度	层的起始位置、中间位置和结束位置的不透明度，用介于 0（表示透明）到 1（表示不透明）之间的数字表示。
高级属性
加/减速	层动画的加/减速类型。不支持自定义加/减速选项。

图片层属性

属性	说明
来源	图片文件来源（不可修改）。
退出网址	用户点击图片时的退出网址。
位置和大小
开始	在动画开始处，层与组件左侧和顶部之间的距离。选择开始标签后可对其进行修改。
中间	在动画的中间状态，层与组件左侧和顶部之间的距离。选择中间标签后可对其进行修改。
结束	在动画结束处，层与组件左侧和顶部之间的距离。选择结束标签后可对其进行修改。
大小	层的宽度和高度。在整个动画时长内，会一直影响相应层。
样式
不透明度	层的起始位置、中间位置和结束位置的不透明度，用介于 0（表示透明）到 1（表示不透明）之间的数字表示。
高级属性
加/减速	层动画的加/减速类型。不支持自定义加/减速选项。
显示重影	启用后，在不活动的位置（您当前未编辑的位置）会显示层的半透明版本。

事件和操作

事件

可以使用事件在广告中触发其他操作。旋涡组件会发送以下事件：

事件	说明
已加载旋涡组件	当组件中包含的所有素材资源都已加载完毕时发送。

要在“事件”对话框中选择此事件，请将旋涡组件设为目标。

您还可以为旋涡组件中包含的 3D 模型设置事件和操作。

预览

在配置过程中

您可以在处理旋涡组件时预览该组件：

1. 要进入组件修改模式，请在场景中双击相应组件。
2. 点击顶部的预览标签。
3. 上下滚动，以查看可见层在示例移动设备布局中的行为（系统不会显示隐藏的层）。
4. 预览时，您无法修改该组件。点击开始、中间或结束标签，进行更改，然后再次点击预览标签以查看相应更改。

在浏览器中

要在浏览器中预览该组件，请在 Google Web Designer 中退出组件修改模式，然后使用预览按钮。预览页面会模拟广告在网页上的呈现效果，而且包含的内容足以让您滚动到该组件的上方和下方。

您可从以下预览模式选项中进行选择：

• 设备 - 选择移动设备或自定义。
• 旋转设备方向 - 在纵向和横向之间切换。
• 视口尺寸 - 如果在设备字段选择了自定义，则可以通过修改此字段或拖动预览的调整尺寸手柄来设置新尺寸。

旋涡广告在浏览器中始终使用视差预览模式。