图片效果组件

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

利用“图片效果”组件，您可以将各种基于 JavaScript 的视觉效果应用到一张图片（在某些情况下，还可应用到一对图片）：前后对比、呼吸、显露和波浪。

Image Effect component - Google Web Designer

如需使用“图片效果”组件，请按以下步骤操作：

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

2. 双击图片效果 组件，或将其拖到场景中。

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

4. 将图片拖动到对话框场景，或点击选择图片以选择一张图片。

5. 从属性面板的下拉菜单中，选择所需的图片效果类型。

6. 某些效果类型使用两张图片。您可以从“资源库”中选择另一张图片，也可以浏览文件系统以导入一个图片文件。

7. 通过调整效果的属性来对其进行自定义（详见下文）。

属性

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

图片效果组件的属性

属性	说明
名称	设置图片效果组件的名称。
缩放	确定各种尺寸的图片在组件内的显示方式。了解详情。 将图片调整为合适尺寸 剪裁图片以覆盖整个可用空间 无 拉伸图片以覆盖整个可用空间
设置动画时间限制	如果选中，则在播放指定的时长（以秒为单位）后会停止自动播放动画。

每种效果类型的属性

您可以在“图片效果”对话框中访问每种效果类型所特有的属性。打开该对话框（方法是在场景中双击“图片效果”组件，或在“属性”面板中点击设置... ，然后选择相应效果类型即可查看其属性。

无

未对图片应用任何效果。

前后对比

“前后对比”效果在两张图片之间应用抹擦过渡，这种过渡在完成后反转方向，然后重复。

  

属性	说明
图片
基本图片	在分隔线的上方或左侧显示的图片。使用交换图片 按钮可切换基本图片和已显露的图片。
已显露的图片	在分隔线的下方或右侧显示的图片。使用交换图片 按钮可切换已显露的图片和基本图片。
分隔线
角度	两张图片之间的分隔线的角度，范围为 0 度到 180 度。默认为 90 度（一条竖线）。
羽化	沿分隔线的图片边缘的柔和度。1 会导致明显的过渡，值越大，边缘越模糊。
互动	如果选中跟随鼠标框，分隔线会跟随鼠标光标。
动画
自动播放	如果选中自动播放框，则在该组件加载时动画即会开始播放。
初始状态
位置	动画开始时分隔线的开始位置。
延迟	动画开始自动播放前的时长（以秒为单位）。

呼吸

“呼吸”效果可以让图片自如地伸缩。

   

属性	说明
图片
基本图片	要应用效果的图片。
呼吸
速度	动画的速度。0 会禁止动画播放，而在此之上的值越大，动画播放速度越快。
横向效果
膨胀	图片横向膨胀的量级。
收缩	图片横向收缩的量级。
纵向效果
膨胀	图片纵向膨胀的量级。
收缩	图片纵向收缩的量级。
保持时间
膨胀	图片保持完全膨胀状态的时长（以秒为单位）。
收缩	图片保持完全收缩状态的时长（以秒为单位）。
曲线
横向	横向失真造成的曲线的数量。
纵向	纵向失真造成的曲线的数量。

显露

显露效果会在椭圆聚焦区域内显示第二张图片的相应部分。

  

属性	说明
图片
基本图片	在聚焦区域外显示的图片。使用交换图片 按钮可切换基本图片和已显露的图片。
已显露的图片	由聚焦区域显露的图片。使用交换图片 按钮可切换已显露的图片和基本图片。
焦点
半径	沿 X 轴和 Y 轴的聚焦区域半径。使用锁定半径比 按钮可在更改半径时保持宽高比。
羽化	聚焦区域边缘的柔和度。0 会使聚焦区域产生明显边缘，值越大，聚焦区域的边缘越模糊。
效果	如果选中保持显露状态框，已显露的图片会在聚焦区域移动后保持可见状态。
动画
自动播放	聚焦区域的移动模式。 飘荡（默认） - 聚焦区域在图片上随机移动，并改变方向以停留在图片上。 穿越式飘荡 - 聚焦区域在图片上随机移动，并在到达边缘时出现在图片的另一侧。 圆形 - 聚焦区域以圆圈形式移动。 无
速度	聚焦区域的速度。0 会禁止动画播放，而在此之上的值越大，动画播放速度越快。
互动	选中跟随鼠标框后，聚焦区域会跟随鼠标指针。

波浪

以动画形式呈现波浪图案的图片切片。

   

属性	说明
图片
基本图片	要应用效果的图片。
波浪
类型	效果中使用的波形。 标准 - 动画导致图片出现波纹。 扭曲收放 - 动画以对称波形收缩和展开图片。
方向	波浪动画的方向。 横向 纵向
速度	波浪动画的速度。0 会禁止动画播放，而在此之上的值越大，动画播放速度越快。
量级	波浪的强度。0 不产生任何效果，而在此之上的值越大，波浪则越大。
长度	波峰之间的距离。长度越短，效果中的波浪越多。
反向	如果选中反向框，波浪会从左向右移动（横向）或从下向上移动（纵向）。
消除轨迹	如果选中消除轨迹框，系统会针对动画的每一帧重新绘制图片，以防止出现拖尾效果。
高级
波浪区域	受波浪效果影响的图片部分。
全强度	图片中波浪效果达到最大量级的部分。效果的量级在波浪区域的其他部分渐减。

事件和操作

图片效果组件发送的事件

您可以根据以下图片效果组件事件触发其他操作：

事件	说明
自动播放已结束	当自动播放的动画达到动画时间限制时发送。

图片效果组件和每种效果执行的操作

以下图片效果组件操作可由其他事件触发：

• 播放
• 暂停

在“事件”对话框中选择上述某个操作时，请将图片效果组件或特定效果设为接收方。

了解如何配置事件。

预览

当您使用“图片效果”对话框时，场景会为您展示当为组件添加动画效果时组件是如何显示的。如果您更改了任何属性，则动画会返回到开头处。

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