“过渡效果图库”组件

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

借助“过渡效果图库”组件,您可以连续显示图片,并为前后图片之间的过渡添加动画效果。

选择适当的图库

Google Web Designer 有 4 种不同的图库组件:

  • 360° 图库会显示对象不同角度的图片,使您能够前后滑动来旋转对象。360° 图库无法显示组或导航元素。
  • 手滑式图库具有简单的平面外观,可让您纵向或横向滑动图片或组。
  • 轮播式图库与手滑式图库类似,但轮播式图库会用 3D 外观显示相邻图片,就好像使用旋转显示器显示它们一样。
  • 过渡效果图库可在您从一张图片切换到下一张图片的过程中提供一系列动画效果。

如需使用“过渡效果图库”组件,请按以下步骤操作:

  1. 打开组件面板,然后打开图库文件夹。

  2. 双击过渡效果图库 组件或将其拖到场景中。

  3. 双击该组件,或在属性面板中点击设置… 按钮。此时,系统会打开过渡效果图库对话框。

  4. 左侧的资源库面板会显示您可以包含在图库中的图片。如需添加图片,请点击面板底部的导入素材资源 按钮,或从其他窗口中拖入图片。

  5. 将图库中所需的图片拖到对话框底部的面板中,或拖到场景中。要从资源库中添加多个图片,您也可以将其全部选中,接着右键点击所选内容,然后选择添加

  6. 过渡面板中选择过渡类型。

  7. 自定义过渡时长、加/减速和其他属性(详见下文)。

如需重排图库图片,请按以下步骤操作:

  1. 通过以下方式打开过渡效果图库对话框:在场景中双击该组件,或在属性面板中点击设置…
  2. 在底部的面板中,将图片拖到新位置。

如需移除图库图片,请按以下步骤操作:

  1. 通过以下方式打开过渡效果图库对话框:在场景中双击该组件,或在属性面板中点击设置…
  2. 在底部的面板中选择要移除的图片。
  3. Delete 键,或右键点击所选内容,然后从弹出式菜单中选择删除

如需切换图库图片,请按以下步骤操作:

  1. 通过以下方式打开过渡效果图库对话框:在场景中双击该组件,或在属性面板中点击设置…
  2. 右键点击面板中的图片,然后从弹出式菜单中选择更换图片

属性

您可以在过渡效果图库对话框中访问此组件的属性。如需打开此对话框,请在场景中双击过渡效果图库,或在“属性”面板中点击设置...

过渡类型

根据过渡类型,系统会提供一组不同的属性。

帧之间没有视觉过渡效果。

淡化

旧图片淡出视图以显示新图片。

属性

说明

时长

帧与帧之间的动画效果的时长(以秒为单位)。默认值为 1

加/减速

过渡动画的加/减速效果。

  • 线性(默认)
  • 由慢渐快
  • 由快渐慢
  • 先加速后减速
推入

新图片滑入视图,同时将旧图片推出视图。

属性

说明

样式
  • 常规
  • 拆分
时长 帧与帧之间的动画效果的时长(以秒为单位)。默认值为 1
加/减速

过渡动画的加/减速效果。

  • 线性(默认)
  • 由慢渐快
  • 由快渐慢
  • 先加速后减速
方向
(如果将样式设为常规,则有此属性)

效果的方向。

  • 从左至右(默认)
  • 从右至左
  • 从上至下
  • 从下至上
方向
(如果将样式设为拆分,则有此属性)

动画效果的方向。

  • 横向
  • 纵向(默认)

 

抹擦

新图片会沿着一条或多条移动的线条逐渐替换旧图片。

属性

说明

样式
  • 常规
  • 门式
  • 光圈
  • 径向
  • 条纹
 
时长 帧与帧之间的动画效果的时长(以秒为单位)。默认值为 1
加/减速

过渡动画的加/减速效果。

  • 线性(默认)
  • 由慢渐快
  • 由快渐慢
  • 先加速后减速
方向
(如果将样式设为常规条纹门式径向,则有此属性)

效果的方向。可用选项取决于样式:

  • 常规条纹
    • 从左至右(默认)
    • 从右至左
    • 从上至下
    • 从下至上
  • 门式
    • 开门(默认)
    • 关门
  • 径向
    • 顺时针(默认)
    • 逆时针
角度
(如果将样式设为常规,则有此属性)
抹擦线的角度(以度为单位,范围为 -89 度至 89 度)。
方向
(如果将样式设为门式,则有此属性)

动画效果的方向。

  • 横向
  • 纵向(默认)
起点
(如果将样式设为光圈径向,则有此属性)

光圈或抹擦半径的 X 或 Y 起点(以图库帧的百分比表示)。

条纹数量
(如果将样式设为条纹,则有此属性)
每种颜色的条纹的数量(1 至 10)。默认值为 2
颜色
(如果将样式设为条纹,则有此属性)
每个条纹的颜色。

 

切片

新图片以切片或条形逐一滑入视图的形式显示。

属性

说明

时长

帧与帧之间的动画效果的时长(以秒为单位)。默认值为 1

加/减速

过渡动画的加/减速效果。

  • 线性(默认)
  • 由慢渐快
  • 由快渐慢
  • 先加速后减速
方向

效果的方向。

  • 从左至右(默认)
  • 从右至左
  • 从上至下
  • 从下至上
切片数 切片的数量(1 至 20)。默认值为 5
显示透明背景 选中此复选框后,系统会在过渡到新图片之前显示透明背景,而不是覆盖旧图片。
百叶窗

新图片像从百叶窗后面露出来一样显示。

属性

说明

样式
  • 常规
  • 威尼斯百叶窗
时长 帧与帧之间的动画效果的时长(以秒为单位)。默认值为 1
加/减速

过渡动画的加/减速效果。

  • 线性(默认)
  • 由慢渐快
  • 由快渐慢
  • 先加速后减速
方向
(如果将样式设为常规,则有此属性)

效果的方向。

  • 从左至右(默认)
  • 从右至左
  • 从上至下
  • 从下至上
方向
(如果将样式设为威尼斯百叶窗,则有此属性)

动画效果的方向。

  • 横向
  • 纵向(默认)
帘叶数量

帘叶的数量(1 至 20)。默认值为 5

显示透明背景
(如果将样式设为常规,则有此属性)

选中此复选框后,系统会在过渡到新图片之前显示透明背景,而不是覆盖旧图片。

交错过渡
(如果将样式设为威尼斯百叶窗,则有此属性)
如果要让帘叶逐一(而不是同时)过渡,则选中此复选框。
旋转

旧图片一边旋转一边放大,然后在完成旋转的同时向回缩小并显示新图片。

属性

说明

时长

帧与帧之间的动画效果的时长(以秒为单位)。默认值为 1

加/减速

过渡动画的加/减速效果。

  • 线性(默认)
  • 由慢渐快
  • 由快渐慢
  • 先加速后减速
方向

效果的方向。

  • 顺时针(默认)
  • 逆时针
Z 字形

新图片以蛇形网格图案的形式逐渐显示。

属性

说明

时长

帧与帧之间的动画效果的时长(以秒为单位)。默认值为 1

加/减速

过渡动画的加/减速效果。

  • 线性(默认)
  • 由慢渐快
  • 由快渐慢
  • 先加速后减速
方向

动画效果的方向。

  • 横向(默认)
  • 纵向
行数 行的数量(1 至 20)。默认值为 5
列数 列的数量(1 至 20)。默认值为 5

属性

说明

名称 过渡效果图库组件的名称。
图片 图库中显示的图片。在过渡效果图库对话框的面板中进行修改。可以绑定到动态数据
缩放方式

确定不同尺寸的图片以何种方式在固定尺寸的帧中显示。了解详情

  • 将图片调整为合适尺寸
  • 剪裁图片以覆盖整个可用空间
  • 拉伸图片以覆盖整个可用空间
开始帧 您一开始想要显示哪个帧(1 为第一帧)。
自动播放
自动播放

如果选中此属性,系统会自动轮换播放图库中的帧。

启用此选项后,播放整个图库所需的总时间会显示在面板中。

间隔 每帧显示多长时间(以秒为单位)。仅在选中自动播放时才适用。
重复次数 轮换播放图库中的帧的次数,0 表示无限次循环播放。仅在选中自动播放时才适用。
互动
封装 选中后,即可从最后一帧转到第一帧。
手势

更改图库中当前播放的帧的用户手势。

  • 点击(默认)
  • 滑动(仅适用于某些过渡类型*)

除了选定的手势以外,用户还可以使用导航要点(如启用),或您使用事件设置的任何自定义导航控件。

忽略反向滑动 选中后,组件不会响应与动画效果方向相反的滑动手势,因此用户无法转到上一帧。仅当将手势属性设为滑动,且未选中启用互动式过渡时才适用。
启用互动式过渡 选中后,过渡动画将随用户的鼠标而显示。仅当手势属性可设为滑动时才可用。*
导航
包含 选中后,图库会显示导航要点。
缩略图 选中后,图库会显示每个帧的缩略图以供导航。
突出显示 设置当前显示的帧的突出显示颜色。
高级
退出网址 由与每个帧对应的退出网址构成的列表(各网址之间以英文逗号分隔)。可以绑定到动态数据

 

*滑动支持

以下过渡类型和样式支持滑动:

  • 推入 - 常规
  • 切片
  • 抹擦 - 常规
  • 抹擦 - 条纹
  • 百叶窗 - 常规

事件和操作

过渡效果图库发送的事件

您可以根据以下过渡效果图库组件事件触发其他操作:

事件 说明
自动播放已结束 当自动播放因任何原因结束时发送。如果是因达到预期的循环次数而自然结束,那么 event.detail.completed 将为 true,否则为 false。
帧被激活 当开始启动新帧(即使新帧尚未显示)时发送。
已显示帧 当显示新帧时发送。
点按帧 当用户点按任意帧时发送。
轮播一次已结束 当轮播因任何原因结束时发送。如果是自然结束,event.detail.completed 将为 true,否则为 false。
左端 当图库达到最左端时发送。
右端 当图库达到最右端时发送。

要在事件对话框中选择上述某个事件,请将过渡效果图库组件设为目标

“过渡效果图库”组件执行的操作

以下过渡效果图库组件操作可由其他事件触发:

操作 配置选项
转至帧
  • 帧号
  • 动画
旋转一次
  • 从当前帧开始
开始自动播放
  • 从当前帧开始
停止
前进
后退

事件对话框中选择上述某个操作时,请将“过渡效果图库”组件设为接收方

了解如何配置事件

预览

如果您处于过渡效果图库对话框的设计模式,只需点击面板中的播放 按钮即可查看基本过渡效果(从当前所选的帧开始播放)。您可以在预览播放期间修改属性,以查看所做更改立即生效后的效果。

切换到预览标签页可查看过渡效果图库与您设置的属性配合使用的效果,包括自动播放和互动选项。

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

该内容对您有帮助吗?

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