“雪碧图”组件

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

您可以使用“雪碧图”组件制作精灵动画，或者在仅使用单个图片源文件时分开显示各个图片精灵。

  

制作动画时使用的带有 8 个精灵的雪碧图。每个精灵也可以单独显示，而不是作为动画的一部分显示。

如需向项目中添加“雪碧图”组件，请执行以下操作：

1. 打开组件面板，然后打开图形和效果文件夹。
2. 将雪碧图 组件拖到场景中。
3. 找到属性面板的雪碧图属性部分，然后在来源字段中输入雪碧图的图片文件网址。如果源文件是本地文件，请点击该字段中的浏览 按钮，从计算机文件系统中选择文件。
4. 输入要显示的特定精灵的 X 轴偏移、Y 轴偏移、帧宽度和帧高度。如果您要制作动画，此精灵将显示在动画的第一帧中。
5. 根据您使用雪碧图的方式，按照相应步骤显示其他精灵或制作精灵动画。

   如需显示其他精灵，请执行以下操作：

   1. 再添加一个“雪碧图”组件。
   2. 使用同一来源配置新组件，但输入要在此组件中显示的精灵的偏移量和帧尺寸。

   要制作精灵动画，请执行以下操作：

   1. 在“雪碧图”组件的属性面板中，展开高级属性。
   2. 输入动画中的帧数。该组件会每帧显示一个精灵，并假设每个精灵的大小相同。
   3. 如果您希望动画自动开始播放，请选中自动播放复选框。您还可以使用雪碧图 > 播放或切换动画状态操作（具体说明见下文）来设置事件，以此触发动画。

属性

属性	说明
名称	组件的名称。
来源	用作雪碧图的图片的网址。可以绑定到动态数据。
X Offset（X 轴偏移）	雪碧图的左边缘距离精灵的偏移量（以像素为单位）。
Y Offset（Y 轴偏移）	雪碧图的上边缘距离精灵的偏移量（以像素为单位）。
帧宽度	精灵的宽度（以像素为单位）。
帧高度	精灵的高度（以像素为单位）。
对齐方式	精灵在组件中的位置： center（居中） bottom（下对齐） bottom left（左下对齐） bottom right（右下对齐） left（左对齐） right（右对齐） top（上对齐） top left（左上对齐） top right（右上对齐）
缩放方式	如何显示与组件大小不同的精灵： 将图片调整为合适尺寸 剪裁图片，使之铺满整个空间 无 拉伸图片，使之铺满整个空间

高级属性

您可以使用高级属性配置精灵动画。点击组件属性窗格中高级属性旁边的展开图标 ，即可修改以下属性：

属性	说明
Number of Frames（帧数）	动画包含的帧数。如果您输入的数字大于雪碧图中的精灵数，动画末尾将包含空白帧。
Duration（持续时间）	每一帧的时长（以毫秒为单位）。
Number of Loops（循环次数）	动画重复播放的次数。如果您希望动画不断重复播放，请设为 0。
自动播放	选中后，可让动画自动播放。
End on frame one（在第一帧结束播放）	选中后，可让动画在最后一次循环播放后以第一帧结束。
Reverse（回放）	选中后，可让动画进行倒放。

事件和操作

“雪碧图”组件发送的事件

您可以基于“雪碧图”组件的以下事件来触发其他操作：

事件	说明
已暂停	动画暂停播放时发送。
已结束	动画结束时发送。
已开始播放	动画开始播放时发送。
已重放	动画重新开始播放时发送。

如需在事件对话框中选择上述某个事件，请将“雪碧图”组件设为目标。

“雪碧图”组件执行的操作

为了响应其他事件，可以触发“雪碧图”组件的以下操作：

操作	配置选项
新建动画	X 轴偏移 - 雪碧图的左边缘距离精灵的偏移量（以像素为单位）。 Y 轴偏移 - 雪碧图的上边缘距离精灵的偏移量（以像素为单位）。 帧宽度 - 精灵的宽度（以像素为单位）。 帧高度 - 精灵的高度（以像素为单位）。 Frames（帧数） - 动画包含的帧数。 Duration（持续时间） - 每一帧的时长（以毫秒为单位）。 Loops（循环次数） - 动画重复播放的次数。如果设为“0”，可让动画不断重复播放。 自动播放 - 选中后，可让动画自动播放。 Reverse（回放） - 选中后，可让动画进行倒放。
播放	从当前已停止或已暂停的位置开始播放动画。
暂停	暂停播放当前动画。
切换动画状态	在播放和暂停播放动画之间切换。
重放	从第一帧开始播放动画。
后退	显示序列中的上一帧。
前进	显示序列中的下一帧。
转至帧	显示指定的帧。

在事件对话框中选择上述某个操作时，请将“雪碧图”组件设为接收方。

不妨了解如何配置事件。

预览

在您指定来源、偏移量和帧尺寸后，Google Web Designer 会在场景中显示“雪碧图”组件的静态预览，以便您可以确保已正确指定了精灵。

在 Web Designer 界面中无法预览精灵动画。如需查看精灵动画播放效果，请点击右上角的预览按钮，在首选浏览器中预览文档。