组件 API

360° 图库

gwd-360gallery

这是一个图库对象，用于显示正在轮播的某个对象。

属性

名称	说明
images:string	图库中使用的一系列图片路径，各路径间以英文逗号分隔。
autoplay:boolean	图库加载后是否自动连续播放其中的图片。
wrap:boolean	图库是否允许用户在滑动图片时循环浏览，而不在图片序列的首尾帧停下。

事件

名称	说明
firstinteraction	当用户首次与图库互动时发送。
allframesviewed	当图库的所有帧都已至少显示一次时发送。
allframesloaded	当图库的所有帧都已加载完毕时发送。
frameshown	当显示新帧时发送。
frameactivated	当新帧开始启动（即使新帧尚未显示）时发送。
frametap	当用户点按任意帧时发送。

方法

名称	说明
goToFrame(frame:number, opt_animate:string, opt_direction:string)	为指定的帧添加动画效果。
rotateOnce(opt_duration:number, opt_direction:string)	轮播一次图库中的对象。
goForwards()	将图库向前移动一帧。
goBackwards()	将图库向后移动一帧。

3D 互动区

gwd-3d-hotspot

一种元素，用于在 3D 模型上显示注释。

属性

名称	说明
data-position:string	互动区的位置。
data-normal:string	互动区的常态。
hotspot-name:string	互动区的名称。
hotspot-title:string	要在信息卡片中显示的标题文字。
hotspot-description:string	要在信息卡片中显示的说明文字。
hide-infocard:boolean	是否要隐藏信息卡片。

3D 互动区容器

gwd-3d-hotspot-container

一种容器元素，用于容纳 3D 模型上的注释。

属性

名称	说明
up-image:file	3D 互动区处于未按下状态时所显示图片的网址。
over-image:file	鼠标悬停在 3D 互动区上时，3D 互动区所显示图片的网址。
down-image:file	3D 互动区处于按下状态时所显示图片的网址。

3D 模型

gwd-3d-model

3D 查看器组件。

属性

名称	说明
id-url:download	3D 模型的 ID 或网址。
data-gwd-refresh-assets:string	Google Web Designer 使用该属性来确定是否必须刷新 3D 素材资源。
glass:boolean	为 3D 模型启用玻璃材质。
src:string	要显示的模型。
transparent:boolean	在 3D 模型上启用透明背景。
gesture-cue-icon:file	手势提示图标。
gesture-cue-text:string	手势提示图标下方显示的文字。
gesture-cue-duration:number	手势提示的显示时长（以秒为单位）。值 -1 表示没有时间限制。

事件

名称	说明
scene-rendered	在首次呈现 3D 模型场景后发送。
camera-changed	当任意 3D 相机属性发生更改时发送。event.detail 对象包含相机的所有当前属性。
hotspot-clicked	在用户点击了互动区时发送。event.detail 对象包含所点击互动区的名称。
interaction-start	当用户开始与 3D 模型互动时发送。
interaction-end	当用户停止与 3D 模型互动时发送。

方法

名称	说明
setYaw(yaw:number)	用于设置偏摆角度（以度为单位），注意不带任何动画，并且要考虑到相机限制。
setTargetYaw(targetYaw:number)	根据相机限制或旋转角度下限（介于 -360 度到 360 度之间）设置目标偏摆角度（以度为单位）。
setTargetPitch(targetPitch:number)	设置目标倾角（以度为单位）。
incrementTargetPitch(pitchDelta:number)	将目标倾角增大一个增量角度（以度为单位）。
setTargetZoom(targetZoom:number)	设置目标缩放量（以米为单位）。
incrementTargetZoom(zoomDelta:number)	增大目标缩放量（以米为单位）。
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	设置目标轴心（以米为单位）。
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	设置目标局部平移量（以米为单位）。
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	设置材质颜色。
playAnimation(animationName:string)	播放动画。
pauseAnimation(animationName:string)	暂停动画。
setAnimationTime(animationName:string, animationTime:number)	设置动画时间（以秒为单位）。
lookAtHotspot(hotspotName:string)	移动和旋转相机，使其对准互动区。

3D 模型查看器

gwd-3d-model-viewer

一种组件，用于封装 3D 模型查看器组件。

属性

名称	说明
src:file	3D 模型的源文件。
gesture-cue-icon:file	手势提示图标。
gesture-cue-text:string	手势提示图标下方显示的文字。
gesture-cue-duration:number	手势提示的显示时长（以秒为单位）。值 -1 表示没有时间限制。
skybox-image:file	3D 模型场景的背景图片。
environment-image:file	用于控制 3D 模型的环境反射。

事件

名称	说明
scene-rendered	在首次呈现 3D 模型场景后发送。
camera-changed	当任意 3D 相机属性发生更改时发送。event.detail 对象包含相机的所有当前属性。
hotspot-clicked	在用户点击了互动区时发送。event.detail 对象包含所点击互动区的名称。
interaction-start	当用户开始与 3D 模型互动时发送。
interaction-end	当用户停止与 3D 模型互动时发送。

方法

名称	说明
setYaw(yaw:number)	用于设置偏摆角度（以度为单位），注意不带任何动画，并且要考虑到相机限制。
setTargetYaw(targetYaw:number)	根据相机限制或旋转角度下限（介于 -360 度到 360 度之间）设置目标偏摆角度（以度为单位）。
setTargetPitch(targetPitch:number)	设置目标倾角（以度为单位）。
incrementTargetPitch(pitchDelta:number)	将目标倾角增大一个增量角度（以度为单位）。
setTargetZoom(targetZoom:number)	设置目标缩放量（以米为单位）。
incrementTargetZoom(zoomDelta:number)	增大目标缩放量（以米为单位）。
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	设置目标轴心（以米为单位）。
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	设置目标局部平移量（以米为单位）。
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	设置材质颜色。
playAnimation(animationName:string)	播放动画。
pauseAnimation(animationName:string)	暂停动画。
setAnimationTime(animationName:string, animationTime:number)	设置动画时间（以秒为单位）。

添加到日历

gwd-addtocalendar

将活动添加到日历。

属性

名称	说明
event-title:string	将在用户日历中显示的活动名称。
start-date:string	活动的开始日期。
start-time:string	活动的开始时间（24 小时制）。
end-date:string	活动的结束日期。
end-time:string	活动的结束时间（24 小时制）。
timezone:string	活动的时区。设置该属性后，当用户位于其他时区时，系统会调整为显示当地的正确时间。
location:string	活动地点。
description:string	活动说明。
icalendar:boolean	是否应使用 iCalendar 文件。
google:boolean	是否应使用 Google 日历。
windows-live:boolean	是否应使用 Windows Live 日历。
yahoo:boolean	是否应使用 Yahoo! 日历。
bg-color:string	表示下拉菜单背景颜色的十六进制值。
font-color:string	表示下拉菜单字体颜色的十六进制值。
font-family:string	下拉菜单字体的名称。
font-size:string	下拉菜单字体的大小。
font-weight:string	下拉菜单字体的粗细。
highlight-color:string	表示下拉菜单突出显示颜色的十六进制值。

音频

gwd-audio

一个用于封装 HTMLAudioElement 的组件。

属性

名称	说明
autoplay:boolean	音频加载完毕后是否自动播放。
loop:boolean	音频播放完毕后是否循环播放。
muted:boolean	音频在开始播放时是否静音。
controls:boolean	是否启用默认的原生播放器控件。
sources:file	一系列不同格式的音频来源，各来源间以英文逗号分隔。

事件

名称	说明
play	当媒体在之前的暂停事件后又开始播放时发送。
pause	暂停播放时发送。
playing	当媒体开始播放（无论是首次播放、暂停后又开始播放，还是结束播放后又重新开始播放）时发送。
ended	播放完时发送。
volumechange	调整音量时（包括调节音量和更改静音属性时）发送。
seeked	跳转操作完成时发送。
waiting	在请求的操作（如播放）延迟到另一个操作（如跳转）完成时发送。

方法

名称	说明
mute()	切换音频的静音/取消静音状态。
pause()	暂停音频。
play()	播放音频。
replay()	重新播放音频。
seek(time:number)	跳至音频中的指定时间。

轮播式图库

gwd-carouselgallery

一种图库对象，能够以轮播方式显示各个帧。

属性

名称	说明
images:string	图库中使用的一系列图片路径，各路径间以英文逗号分隔。
groups:string	一系列组 ID，各 ID 间以英文逗号分隔。
transition-duration:number	图库动画播放速度（以毫秒为单位）。
start-frame:number	最开始显示的图片的编号。
autoplay:boolean	是否让所有帧都自动播放一次。
has-navigation:boolean	是否自动包含图库导航控件
navigation-thumbnails:boolean	是否使用缩略图（而非圆点）进行导航。
navigation-highlight:color	在导航中用于突出显示活动帧的 CSS 颜色代码。
scaling:string	如何缩放图片内容以适应帧的大小。
frame-width:number	一个内容面板的宽度。
frame-height:number	一个内容面板的高度。
neighbor-rotation-y:number	让当前居中面板的邻近面板绕 Y 轴旋转的角度，用于使邻域面板倾斜。
neighbor-translation-x:number	让当前居中面板的邻近面板沿 X 轴平移的距离，用于调整邻域面板的位置。
neighbor-translation-y:number	让当前居中面板的邻近面板沿 Y 轴平移的距离。
neighbor-translation-z:number	让当前居中面板的邻近面板沿 Z 轴平移的距离。
exit-urls:string	一系列与图库中的图片对应的退出网址，各网址间以英文逗号分隔。
show-reflection:boolean	是否显示采用 CSS3 实现的反射效果。
pause-front-media:boolean	当前帧发生变化时，是否暂停上一帧中的媒体元素（例如，视频或音频）。
resume-next-media:boolean	当前帧发生变化时，是否在新的当前帧中继续播放媒体元素（例如，视频或音频）。

事件

名称	说明
firstinteraction	当用户首次与图库互动时发送。
allframesviewed	当图库的所有帧都已至少显示一次时发送。
allframesloaded	当图库的所有帧都已加载完毕时发送。
autoplayended	当自动播放因任何原因结束时发送。如果是因达到预期的播放时长而自然结束，那么 event.detail.completed 将为 true，否则为 false。
frameshown	当显示新帧时发送。
frameactivated	当新帧开始启动（即使新帧尚未显示）时发送。
frameautoplayed	当帧已启动以自动播放时发送。此事件的触发频率可能高于 frameshown，这是因为系统会针对同时显示的多个帧中的每个帧单独触发此事件。
frametap	当用户点按任意帧时发送。
reachleftend	当图库达到最左端时发送。
reachrightend	当图库达到最右端时发送。
trackstart	当鼠标拖动/触摸拖动操作开始时发送。
track	组件将记录鼠标/触摸拖动操作的 X 轴和 Y 轴位置数据
trackend	当鼠标拖动/触摸拖动操作结束时发送。

方法

名称	说明
goToFrame(index:number, opt_animate:string)	转到指定帧。
goForwards(opt_animate:string)	转到下一帧（如果有）。
goBackwards(opt_animate:string)	转到上一帧。
rotateOnce(opt_duration:number, opt_direction:string)	显示一次图集中的每个帧。
stopRotation()	停止当前的自动轮播。

提示点

gwd-cuepoint

一种组件，附加到 Google Web Designer 视频组件，用于在视频达到特定时间时触发事件。

属性

名称	说明
time:number	触发相应事件的时间（以秒为单位）。

事件

名称	说明
cuepoint	当媒体播放已达到提示点中指定的时间时发送。

方法

名称	说明
seek()	将视频时间设为提示点的时间。
setTime(time:number)	设置提示点的时间。

日期交换

gwd-dateswap

日期交换功能将根据当前日期与目标日期范围的比较结果，更改元素的显示/隐藏状态。

属性

名称	说明
from_date:string	一个以 RFC2822 或 ISO 8601 格式表示日期的字符串。
to_date:string	一个以 RFC2822 或 ISO 8601 格式表示日期的字符串。

事件

名称	说明
before	在当前日期早于 from_date（不包含此日期）时发送。
during	在当前日期介于 from_date 到 to_date（包含此日期）之间时发送。
after	在当前日期晚于 to_date（不包含此日期）时发送。

方法

名称	说明
checkDate()	将当前日期与日期范围进行比较。

图库导航

gwd-gallerynavigation

Google Web Designer 图库组件的导航控件。

属性

名称	说明
for:string	图库中使用的一系列图片路径，各路径间以英文逗号分隔。
highlight:color	在导航中用于突出显示活动帧的 CSS 颜色代码。
use-thumbnails:boolean	是否使用缩略图（而非圆点）进行导航。

常规广告

gwd-genericad

用于实现常规广告容器。

事件

名称	说明
adinitialized	当常规元素马上要呈现广告内容时发送。

方法

名称	说明
initAd()	收到启动器触发的相应事件时启动广告。
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	转到展开后的广告。如果未指定页面 ID，广告会转到默认页面。
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)	退出广告并可选择合拢广告。

手势

gwd-gesture

多个手势事件的抽象。

属性

名称	说明
touch-action:string	应如何解读触摸操作。有效值为：auto、none、pan-x 和 pan-y。默认行为与该属性设为 none 时的行为相同。

事件

名称	说明
hover	当鼠标位置/触摸位置进入组件边界时发送。
hoverend	当鼠标位置/触摸位置离开组件边界时发送。
trackstart	当鼠标拖动/触摸拖动操作开始时发送。
track	组件将记录鼠标/触摸拖动操作的 X 轴和 Y 轴位置数据
trackend	当鼠标拖动/触摸拖动操作结束时发送。
tap	当记录到用户点按/鼠标点击操作时发送。
swipeleft	当用户向左滑动屏幕时发送。
swiperight	当用户向右滑动屏幕时发送。
swipeup	当用户向上滑动屏幕时发送。
swipedown	当用户向下滑动屏幕时发送。

Google 广告

gwd-google-ad

用于实现 Google 广告容器。

属性

名称	说明
polite-load:boolean	相应广告是否必须遵循礼让加载语义。
fullscreen:boolean	此广告是否应尝试展开至全屏。

事件

名称	说明
adinitialized	当元素马上要呈现广告内容时发送。
expandstart	当启动器触发展开开始事件时发送。
expandfinish	当启动器触发展开结束事件时发送。
collapsestart	当启动器触发合拢开始事件时发送。
collapsefinish	当启动器触发合拢结束事件时发送。
fullscreensupport	支持全屏展开时发送。
dynamicelementsready	在将动态数据应用于广告内容后发送。
hostpagescroll	当启动器触发主页面滚动事件时发送。

方法

名称	说明
initAd()	收到启动器触发的相应事件时启动广告。
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	转到展开后的广告。如果未指定页面 ID，广告会转到默认页面。
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	退出广告并可选择合拢广告。
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	退出广告并转到指定网址（无论在 Studio 中指定的值是什么）。如果 opt_collapseOnExit 为 true，则合拢广告。
incrementCounter(metric:string, opt_isCumulative:boolean)	跟踪计数器事件。
startTimer(timerId:string)	启动事件计时器。
stopTimer(timerId:string)	停止事件计时器。
reportManualClose()	记录浮动广告、弹出式广告、展开式广告、带弹出式内容的页内广告或带浮动内容的页内广告的手动关闭操作。此方法是 Enabler.reportManualClose 的替代方法。

互动区

gwd-hotspot

一种组件，在视频的特定时间显示和隐藏互动区。

属性

名称	说明
show-time:number	互动区的开始显示时间（以秒为单位）。
hide-time:number	互动区的停止显示时间（以秒为单位）。
left:string	视频前方互动区的左侧位置（以相对于视频帧宽度的百分比表示，例如“5%”）。
top:string	视频前方互动区的顶部位置（以相对于视频帧高度的百分比表示，例如“5%”）。
width:string	与视频成比例的互动区宽度（以相对于视频帧宽度的百分比表示）。
height:string	与视频成比例的互动区高度（以相对于视频帧高度的百分比表示）。

事件

名称	说明
hotspotshown	当互动区开始显示时发送。
hotspothidden	当互动区开始隐藏时发送。

方法

名称	说明
show(showHide:boolean)	切换互动区的显示/隐藏状态。
seek(showHide:boolean)	将视频时间设为互动区的显示时间或隐藏时间。
setTimes(showTime:number, hideTime:number)	设置互动区的显示时间和隐藏时间。

iframe

gwd-iframe

一种组件，用于封装 HTMLIframeElement。

属性

名称	说明
source:string	iframe 的来源。此来源将替换原生图片元素的 src 属性。
scrolling:string	iframe 是否显示滚动条

事件

名称	说明
iframeload	当 iframe 加载完毕时发送。

方法

名称	说明
setUrl(url:string)	更改 iframe 的网址并立即加载 iframe。

图片

gwd-image

一种组件，用于封装 HTMLImageElement 以支持延迟加载图片来源。

属性

名称	说明
source:file	图片的来源。此来源将替换原生图片元素的 src 属性。
alt:string	图片的替代文字。
scaling:string	指定图片在适应帧尺寸时采用的缩放方式。
alignment:string	图片在观看区域内的对齐方式。
focalpoint:string	将图片焦点编码为 x/y 像素坐标。
disablefocalpoint:boolean	停用由 focalpoint 属性（供 Google Web Designer 内部使用）设置的焦点。

图片按钮

gwd-imagebutton

支持鼠标未指向时/鼠标指向时/用鼠标点击时的状态的图片按钮。

属性

名称	说明
up-image:file	按钮处于未按下状态时所显示图片的网址。
over-image:file	鼠标悬停在按钮时，按钮所显示图片的网址。
down-image:file	按钮处于按下状态时所显示图片的网址。
bgcolor:string	按钮的背景颜色。
alignment:string	图片在观看区域内的对齐方式。
scaling:string	如何调整图片尺寸以适应父级容器。
disabled:boolean	是否应停用该按钮。

事件

名称	说明
imagebuttonloaded	当所有图片都已加载完毕时发送。

方法

名称	说明
toggleEnable()	在已启用/已停用之间切换。
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)	为所有按钮状态设置图片来源。

图片效果

gwd-image-effect

图片效果组件。

属性

名称	说明
scaling:string	指定图片在适应帧尺寸时采用的缩放方式。
time-limit:number	动画时间限制。值 -1 表示没有时间限制。
settings:string	启动组件设置对话框。
images:string	图片效果中使用的一系列图片路径，各路径间以英文逗号分隔。

事件

名称	说明
autoplayended	当自动播放因达到时间限制而结束时发送。

方法

名称	说明
play()	播放动画。
pause()	暂停动画。

“前后对比”图片效果

gwd-before-and-after

在这种图片效果中，两张类似图片会合成为“前后对比”效果。

“呼吸”图片效果

gwd-breathe

在这种图片效果中，图片会呈现灵活展开和收缩的动画效果。

“显露”图片效果

gwd-reveal

在这种图片效果中，椭圆形聚焦区域会在扫描一张图片时显示第二张图片。

“波浪”图片效果

gwd-wave

在这种图片效果中，图片会应用动画波浪变换，从而按照波浪形状摆动。

地图

gwd-map

用于扩展 HTMLElement 以封装 Google Maps API 调用。

属性

名称	说明
api-key:string	Google API 密钥。请访问 https://developers.google.com/maps/documentation/javascript/get-api-key
query:string	用于从 Google Places API 返回位置信息的搜索查询的名称。
start-latitude:decimal	起始中心纬度坐标。值必须介于 -90 到 90（度）之间。
start-longitude:decimal	起始中心经度坐标。相应值应介于 -180 和 180（度）之间。
request-user-location:boolean	是否必须要求提供用户所在位置。如果设为 true，系统将提示用户分享其位置信息。
client-id:string	Google Maps Premier 客户端 ID
search-radius:number	进行位置搜索的范围的最小半径（以米为单位）。
result-limit:number	单个查询中可返回的结果数量上限。
start-zoom:number	起始缩放级别（采用 Google Maps API 所使用的单位）。默认级别为 16，也是邻域级别。
marker-src:string	位置标记图片文件名（作为包含关闭、开启和阴影组件的子画面）。
gps-src:string	GPS 定位蓝点图片文件名。
msg-start-position-prompt:string	选择开始位置的对话提示文字的本地化字符串。
msg-gps-button-label:string	用于从 Geolocation API 检索用户位置信息的按钮使用的标签的本地化字符串
msg-manual-position-button-label:string	显示位置搜索字段的按钮标签的本地化字符串。
msg-manual-position-prompt:string	搜索开始地图位置的对话提示文字的本地化字符串。
msg-manual-position-placeholder:string	用于查找开始地图位置的搜索框占位符文本的本地化字符串。
msg-geocode-failure:string	当使用 Geolocation API 的尝试失败时显示的对话框提示文字的本地化字符串。
msg-no-results-found:string	当在所选位置未找到任何地图结果时显示的对话提示文字的本地化字符串。

事件

名称	说明
pinclick	当用户在地图上选择图钉时。

方法

名称	说明
setCenter(latitude:number, longitude:number, opt_accuracy:number)	将通过纬度/经度指定的位置设为地图中心。

页面

gwd-page

一个页面表示页面组中的单个卡片。

属性

名称	说明
expanded:boolean	相应页面是否被视为展开后页面（广告专用）。
centered:boolean	相应页面的内容是否居中放置。
alt-orientation-page:string	改变屏幕方向能够更好地展示页面中内容的对应页面 ID。

事件

名称	说明
attached	当页面附加到 DOM 后立即发送
detached	当页面从 DOM 中移除后立即发送
pageactivated	当页面可以开始显示时发送。
pagedeactivated	当页面不再显示时发送。
pageload	当页面内容成功加载后发送。
pagepresenting	当页面马上要开始其简介动画时发送。
shake	当检测到设备摇晃手势时发送。
tilt	当检测到设备倾斜时发送。
rotatetoportrait	当设备旋转为纵向时发送。
rotatetolandscape	当设备旋转为横向时发送。

页面组

gwd-pagedeck

页面组是包含多个页面的容器。页面组一次展示一个页面，并且各个不同的页面可以按任何指定顺序、并采用任意受支持的页面转换方式循环展示。

属性

名称	说明
default-page:string	默认页面的 ID。

事件

名称	说明
pagetransitionstart	在页面转换开始前发送。
pagetransitionend	在页面转换完成后发送。

方法

名称	说明
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	前往页面组中的下一页。
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	前往页面组中的上一页。
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	前往页面组中的指定页。
getCurrentPage()	返回当前页面；如果未显示任何页面，则返回 null。
getDefaultPage()	如果已指定默认页面，则返回默认页面，否则返回第一个页面。
getPage(pageId:string)	返回具有指定 ID 的页面
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean)	返回属性值等于指定值或 -1（如果未找到某个页面）的页面元素。
getOrientationSpecificPage(orientation:string, pageId:string)	返回与指定方向相对应的页面。
getElementById(id:string)	在相应页面组的所有页面中查找具有指定 ID 的元素。由于 gwd-pagedeck 仅保留 DOM 中的活动页面，因此标准的 document.getElementById(id) 将不会返回非活动页面中的元素。引用非活动页面中的元素是一种很常见的情况（尤其是在动态广告中）。在这些情况下，可以使用此方法通过元素 ID 取消对相应元素的引用。

视差

gwd-parallax

视差组件。

属性

名称	说明
settings:string	启动组件设置对话框。
yscroll:decimal	在场景中呈现视差动画时使用的滚动系数。

事件

名称	说明
ready	当视差组件中的所有素材资源都已加载完毕时发送。

粒子效果

gwd-particleeffects

用于组合多个粒子效果和图片的组件。

属性

名称	说明
autoplay:boolean	组件加载完毕后是否自动播放动画。
time-limit:number	动画时间限制。值 -1 表示没有时间限制。
settings:string	启动组件设置对话框。

事件

名称	说明
timelimitreached	当动画播放达到指定的时间限制时发送。

方法

名称	说明
play()	播放动画。
pause()	暂停动画。
stop()	停止动画。

粒子

gwd-particles

粒子系统组件。

属性

名称	说明
acceleration-x:number	x 轴上的加速度分量（以像素/帧/帧为单位）。
acceleration-y:number	y 轴上的加速度分量（以像素/帧/帧为单位）。
angle-max:number	粒子速度方向的最大角度。
angle-min:number	粒子速度方向的最小角度。
autoplay:boolean	在父 gwd-particleeffects 开始播放时是否自动播放动画。
color1:color	第一种颜色。
color2:color	第二种颜色。
color-rate:number	每帧的颜色从颜色 1 变为颜色 2 的速率（该速率会累加），介于 [0, 1] 范围内。
emit-interval:number	下一个粒子发出前的帧数。
emit-x-max:string	粒子发射范围的最大 x 坐标。
emit-x-min:string	粒子发射范围的最小 x 坐标。
emit-y-max:string	粒子发射范围的最大 y 坐标。
emit-y-min:string	粒子发射范围的最小 y 坐标。
loop:boolean	是否循环播放动画。
number:number	粒子数量。
opacity-min:number	粒子的最小不透明度。
opacity-max:number	粒子的最大不透明度。
opacity-rate:number	每帧的不透明度变化速率，该速率会与粒子的当前不透明度相加。
random-colors:boolean	粒子是否具有介于颜色 1 和颜色 2 之间的随机颜色。如果为 false，所有粒子的初始颜色都是颜色 1。
shape:string	形态的形状。
size-max:number	粒子的最大尺寸（以像素为单位）。
size-min:number	粒子的最小尺寸（以像素为单位）。
size-rate:number	每帧的尺寸变化速率，该速率会与粒子的当前尺寸相加。
skip-forward:number	跳至向粒子系统发射了指定百分比的粒子的时间。
speed-max:number	粒子的最大速度（以像素/帧为单位）。
speed-min:number	粒子的最小速度（以像素/帧为单位）。
sprite-image-src:file	用作形态的图片的来源。
turbulence-frequency:number	湍流的频率。值越高，动画中的不规则变化就越频繁。它应该是一个正数。
turbulence-rate:number	强度随时间变化的速率。
turbulence-strength:number	对粒子施加的湍流强度。它应该是一个正数。
turbulence-trail:number	要渲染的粒子先前状态和当前状态的数量。

方法

名称	说明
play()	播放动画。
pause()	暂停动画。
stop()	停止动画。

雪碧图

gwd-spritesheet

用于显示雪碧图中的单个关键帧或动画。

属性

名称	说明
imagesource:file	“雪碧图”文件的网址。
offsetx:number	Sprite 工作表的左边缘距离以下任一边缘的偏移量（以像素为单位）： 要使用的“雪碧图”文件中特定图片的左边缘 制作动画时使用的首张 Sprite 图片的左边缘
offsety:number	Sprite 工作表的上边缘距离以下任一边缘的偏移量（以像素为单位）： 要使用的“雪碧图”文件中特定图片的上边缘 制作动画时使用的首张 Sprite 图片的上边缘
clipwidth:number	以下任一图片的宽度（以像素为单位）： 要使用的“雪碧图”文件中的特定图片 制作动画时使用的首张 Sprite 图片
clipheight:number	以下任一图片的高度（以像素为单位）： 要使用的“雪碧图”文件中的特定图片 制作动画时使用的首张 Sprite 图片
alignment:string	确定图片在容器内的位置。
scaling:string	确定各种尺寸的图片在组件内的显示方式。
totalframecount:number	动画包含的帧数。
duration:number	每一帧的时长（以毫秒为单位）。
loopcount:number	动画重复播放的次数。如果设为 0，则为不限次数重复播放。
autoplay:boolean	动画是否自动播放。
endonstartframe:boolean	动画是否在初始帧结束播放
reverseplay:boolean	动画是否反向播放。

事件

名称	说明
animationend	动画结束时发送。
animationpause	动画暂停播放时发送。
animationplay	动画开始播放时发送。
animationrestart	动画暂停播放后又重新开始播放时发送。

方法

名称	说明
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)	定义新动画。
play()	播放动画。
pause()	暂停动画。
togglePlay()	在播放和暂停播放动画之间切换。
restart()	重放动画。
previousFrame()	显示上一帧。
nextFrame()	显示下一帧。
goToFrame(id:number)	通过帧号显示特定帧。

星级

gwd-starratings

该组件用于呈现一行星形来表示评分。

属性

名称	说明
ratingvalue:decimal	评分值。
iconsize:number	星形图标大小。
isemptyshown:boolean	是否显示空星形图标。
isemptycolored:boolean	空星形图标是否有颜色。
colorprimary:color	主要填充颜色。
colorsecondary:color	辅助渐变颜色。
gradienttype:string	渐变类型。
ratingmax:number	最高星级。
ratingmin:decimal	最低星级。

事件

名称	说明
complete	已创建星级图标时。
validationerror	星级评分值低于最低评分。

街景

gwd-streetview

Google 街景组件。

属性

名称	说明
key:string	若想了解如何为您的应用获取一个具有唯一性的密钥，请访问：https://developers.google.com/maps/documentation/javascript/get-api-key。
latitude:decimal	相应位置的纬度值。
longitude:decimal	相应位置的经度值。
interaction:boolean	视图是否可以平移/旋转。
heading:decimal	指明相机的罗盘方向。可接受的值介于 0 到 360 之间（0 和 360 这两个值均表示“北”，值 90 表示“东”，值 180 表示“南”）。如果您没有指定罗盘方向，则系统会计算出一个值，将相机从进行最近距离的拍摄时所处的那个点指向指定的位置。
pitch:decimal	用于指定相机相对于街景拍摄车的向上或向下倾斜角度。这通常会是（但并非总是）水平角度。正值表示相机向上倾斜（90 度表示相机垂直向上）；负值表示相机向下倾斜（-90 度表示相机垂直向下）。
zoom:number	用于指定相机相对于街景拍摄车的缩放比例。

手滑式图库

gwd-swipegallery

在可滑动浏览的内容条中显示各个帧的图库对象。

属性

名称	说明
images:string	图库中使用的一系列图片路径，各路径间以英文逗号分隔。
groups:string	一系列组 ID，各 ID 间以英文逗号分隔。
transition-duration:number	图库动画播放速度（以毫秒为单位）。
start-frame:number	指定从哪一个帧开始播放。
num-frames-to-display:number	一次显示的帧数。
frame-snap-interval:number	每滑动一下后前进的帧数。
autoplay:boolean	是否让图库自动轮播一次。
has-navigation:boolean	是否包含图库导航控件。
navigation-thumbnails:boolean	是否使用缩略图（而非圆点）进行导航。
navigation-highlight:color	在导航中用于突出显示活动帧的 CSS 颜色代码。
scaling:string	如何缩放图片内容以适应帧的大小。
swipe-axis:string	系统在哪个轴上检测到了滑动。
offset:number	相邻内容帧之间空白区域的大小。
frame-width:number	一个内容帧的宽度。此属性会覆盖 num-frames-to-display。
frame-height:number	一个内容帧的高度。
autoplay-duration:number	帧的自动播放总时长。
autoplay-step-interval:number	自动播放期间各帧之间的间隔时间。
exit-urls:string	一系列与图库中的图片对应的退出网址，各网址间以英文逗号分隔。
disable-gesture:boolean	隐藏/停用可为图库启用触摸导航的手势组件。
pause-front-media:boolean	当前帧发生变化时，是否暂停上一帧中的媒体元素（例如，视频或音频）。
resume-next-media:boolean	当前帧发生变化时，是否在新的当前帧中继续播放媒体元素（例如，视频或音频）。

事件

名称	说明
firstinteraction	当用户首次与图库互动时发送。
allframesviewed	当图库的所有帧都已至少显示一次时发送。
allframesloaded	当图库的所有帧都已加载完毕时发送。
autoplayended	当自动播放因任何原因结束时发送。如果是因达到预期的播放时长而自然结束，那么 event.detail.completed 将为 true，否则为 false。
frameshown	当所有必要动画播放完毕后显示新帧时发送。
frameactivated	当新帧开始启动（即使新帧尚未显示）时发送。
frameautoplayed	当帧已启动以自动播放时发送。此事件的触发频率可能高于 frameshown，这是因为系统会针对同时显示的多个帧中的每个帧单独触发此事件。
frametap	当用户点按任意帧时发送。
reachleftend	当图库达到最左端时发送。
reachrightend	当图库达到最右端时发送。
framemouseover	当用户将鼠标移到帧上时发送。
framemouseout	当用户将鼠标从帧上移开时发送。
trackstart	当鼠标拖动/触摸拖动操作开始时发送。
track	组件将记录鼠标/触摸拖动操作的 X 轴和 Y 轴位置数据
trackend	当鼠标拖动/触摸拖动操作结束时发送。

方法

名称	说明
goToFrame(frame:number, opt_animate:string)	转到指定帧。
rotateOnce(opt_duration:number, opt_direction:string)	让图库中的每个帧都显示一次。
stopRotation()	停止当前的自动轮播。
goForwards()	将图库向前移动一帧。
goBackwards()	将图库向后移动一帧。

旋涡

gwd-swirl

旋涡组件。

属性

名称	说明
yscroll:decimal	在场景中呈现旋涡动画时使用的滚动系数。
settings:string	启动组件设置对话框。

事件

名称	说明
ready	当所有子素材资源都已加载完毕时发送。

点按区域

gwd-taparea

点击/点按事件的抽象。

属性

名称	说明
exit-override-url:string	用户点按了点按区域后退出到的网址。

事件

名称	说明
action	当用户触摸（在移动设备上）或点击（在桌面设备上）按钮时发送。

点按通话/发短信

gwd-taptocall

用户点击或触摸时向配置的电话号码致电或发短信的组件。

属性

名称	说明
number:string	向其致电或发短信的电话号码。
action:string	选择是发短信还是致电。

事件

名称	说明
action	当用户触摸（在移动设备上）或点击（在桌面设备上）按钮时发送。
taptocall	在打电话或发短信时发送。

方法

名称	说明
dial()	向指定的电话号码打电话或发短信。

过渡效果图库

gwd-transitiongallery

过渡效果图库组件。

属性

名称	说明
settings:string	启动组件设置对话框。
images:string	图库中使用的一系列图片路径，各路径间以英文逗号分隔。
scaling:string	指定图片在适应帧尺寸时采用的缩放方式。
exit-urls:string	一系列与图库中的图片对应的退出网址，各网址间以英文逗号分隔。

事件

名称	说明
autoplayended	当自动播放因任何原因结束时发送。如果是因达到预期的循环次数而自然结束，那么 event.detail.completed 将为 true，否则为 false。
frameactivated	当新帧开始启动（即使新帧尚未显示）时发送。
frameshown	当显示新帧时发送。
frametap	当用户点按任意帧时发送。
rotateonceended	当轮播因任何原因结束时发送。如果是自然结束，event.detail.completed 将为 true，否则为 false。
reachleftend	当图库达到最左端时发送。
reachrightend	当图库达到最右端时发送。

方法

名称	说明
goToFrame(frame:number, with_animation:boolean)	转到指定帧。
rotateOnce(startFromCurrentFrame:boolean)	如果 startFromCurrentFrame 为 false 或未指定，则从开始帧显示图库中的帧，否则从当前帧开始。轮播在达到开始帧之前即停止。
startAutoplay(startFromCurrentFrame:boolean)	如果 startFromCurrentFrame 为 false 或未指定，则从开始帧开始自动播放图库，否则从当前帧开始。自动播放在达到循环次数时即停止。
stop()	如果动画正在进行，则取消动画。
goForwards()	将图库向前移动一帧。
goBackwards()	将图库向后移动一帧。

百叶窗过渡

gwd-blinds

一种百叶窗效果组件：新图片像从百叶窗后面露出来一样显示，窗叶会逐一打开，从一边开始逐渐过渡到另一边。

属性

名称	说明
direction:dropdown	效果的方向。
blinds:number	百叶窗的数量。
transparentbackground:boolean	是否在渲染新图片的百叶窗之前显示透明背景。如果为 false，百叶窗会覆盖旧图片。

门式抹擦过渡

gwd-door-wipe

门式抹擦效果组件是抹擦效果的一种变化形式，根据抹擦方向可分为两种。在打开类型的门式抹擦效果中，新图片从旧图片中央开始显示，就像双扇门打开一样。在关闭类型的门式抹擦效果中，新图片从旧图片的另一边开始向中央显示，就像双扇门关闭一样。

属性

名称	说明
orientation:dropdown	动画效果的方向。
direction:dropdown	门式抹擦效果的方向。

淡出过渡

gwd-fade

一种过渡式淡出组件。

圆形渐大抹擦过渡

gwd-iris-wipe

一种圆形渐大抹擦效果组件：在不断扩大的圆圈（默认是从帧的中心开始扩大）内显示新图片。

属性

名称	说明
originpercentx:number	不断扩大的圆圈在 x 轴上的起点，以相对于帧宽度的位置值表示。
originpercenty:number	不断扩大的圆圈在 y 轴上的起点，以相对于帧高度的位置值表示。

推入过渡

gwd-push

一种推入过渡效果组件，新图片滑入视图，同时将旧图片推出视图。

属性

名称	说明
direction:dropdown	推入效果的方向。

径向抹擦过渡

gwd-radial-wipe

径向抹擦效果组件是一种抹擦效果变化形式，通过绕指定点以半径的形式抹擦（像时钟指针一样）来显示新图片。

属性

名称	说明
direction:dropdown	效果的方向。
originpercentx:number	x 轴上的起点（以相对于帧宽度的位置值表示），通过以半径的形式开始抹擦来显示新图片。
originpercenty:number	y 轴上的起点（以相对于帧高度的位置值表示），通过以半径的形式开始抹擦来显示新图片。

旋转过渡

gwd-rotate

一种旋转效果组件：旧图片一边旋转一边放大，然后在完成旋转时开始缩小，从而显示出新图片。

属性

名称	说明
direction:dropdown	效果的方向。

切片过渡

gwd-slice

一种切片效果组件：新图片以切片或条形逐一滑入视图的形式显示。

属性

名称	说明
direction:dropdown	切片效果的方向。
slices:number	拆分视图的切片或条形的数量。
transparentbackground:boolean	是否在新图片切入之前显示透明背景。如果为 false，切片会覆盖旧图片。

拆分推入过渡

gwd-split-push

拆分推入效果组件是推入效果的一种变化形式，旧图片会在垂直或水平方向上拆分为两部分。新图片的相应拆分部分会将旧图片的各个部分沿相反的方向推出视图。

属性

名称	说明
orientation:dropdown	动画效果的方向。

条纹抹擦过渡

gwd-stripe-wipe

条纹抹擦效果组件是抹擦效果的一种变化形式，交替颜色的纯色条纹会同时在屏幕上扩大以覆盖旧图片。然后，这些条纹会缩小以显示新图片。

属性

名称	说明
direction:dropdown	效果的方向。
stripes:number	每种颜色的条纹的数量。
color1:color	表示两种交替条纹颜色中的一种的十六进制值。
color2:color	表示另一种交替条纹颜色的十六进制值。

威尼斯百叶窗过渡

gwd-venetian-blinds

一种威尼斯百叶窗效果组件：新图片像从威尼斯百叶窗后面露出来一样显示，窗叶会同时打开或逐一打开。

属性

名称	说明
orientation:dropdown	动画效果的方向。
blinds:number	百叶窗的数量。
staggered:boolean	窗叶在过渡时是否有延迟。如果为 false，所有窗叶会同时过渡。

抹擦过渡

gwd-wipe

一种过渡式抹擦组件。在常规抹擦效果中，新图片会沿着一条从一边向另一边抹擦的线条逐渐替换旧图片。

属性

名称	说明
direction:dropdown	效果的方向。
angle:number	使线条倾斜以使用新图片替换旧图片的角度。

Z 字形过渡

gwd-zigzag

一种 Z 字形效果组件：新图片以蛇形网格图案的形式显示。在水平 Z 字形效果中，以交替方向（从左到右和从右到左）在连续行中显示新图片的图块。在垂直 Z 字形效果中，以交替方向（从上到下和从下到上）在连续列中显示新图片的图块。

属性

名称	说明
orientation:dropdown	动画效果的方向。
rows:number	Z 字形效果的行数。
columns:number	Z 字形效果的列数。

视频

gwd-video

一种组件，用于封装 HTMLVideoElement。

属性

名称	说明
autoplay:boolean	视频加载完毕后是否自动播放。
loop:boolean	视频播放完毕后是否循环播放。
muted:boolean	视频在开始播放时是否静音。
controls:boolean	是否启用默认的原生播放器控件。
sources:file	一系列不同格式的视频，各视频间以英文逗号分隔。
poster:string	一个网址，用于指明在用户开始播放或跳转之前一直显示的海报帧。

事件

名称	说明
play	在媒体暂停后再开始播放时发送，也就是在之前的暂停事件发生后继续播放时发送。
pause	暂停播放时发送。
playing	在媒体开始播放（无论是首次播放，暂停后开始播放，还是结束播放后又重新开始播放）时发送。
ended	播放完时发送。
volumechange	调整音量时（包括调节音量和更改静音属性时）发送。
seeked	跳转操作完成时发送。
waiting	在请求的操作（如播放）延迟到另一个操作（如跳转）完成时发送。

方法

名称	说明
mute()	在将视频静音/取消静音之间切换。
pause()	暂停视频。
play()	播放视频。
replay()	重放视频。
seek(time:number)	跳至视频中的指定时间。
setVolume(volume:number)	设置视频音量。
setSources(sources:string)	设置视频来源。

YouTube

gwd-youtube

用于扩展 HTMLElement 以封装 YouTube API 调用。

属性

名称	说明
video-url:string	视频的 YouTube 网址。
autoplay:string	在受支持的环境下，YouTube 视频会在加载后自动播放。
preview-duration:number	设置预览的时长。仅在自动播放属性设为 preview 时使用
controls:string	显示视频控件（none、autohide）。
color:string	播放器进度条的颜色主题（红色或白色）。
muted:boolean	视频在开始播放时是否静音。
loop:boolean	视频播放完毕后是否循环播放。
pause-on-end:boolean	剩余 1 秒时暂停视频。
start-position:number	在指定时间（秒）启动视频。
allowfullscreen:boolean	允许在桌面设备上全屏显示。
extra-player-args:string	https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters 中所述的其他 YouTube 播放器参数

事件

名称	说明
buffering	YouTube 播放器正在缓冲。
ended	YouTube 视频已播放完毕
paused	YouTube 视频已暂停。
playing	YouTube 视频开始播放。
replayed	YouTube 视频已重放。
viewed0percent	视频播放了 0% 时发送。
viewed25percent	视频播放了 25% 时发送。
viewed50percent	视频播放了 50% 时发送。
viewed75percent	视频播放了 75% 时发送。
viewed100percent	视频播放了 100% 时发送。
previewed0percent	预览开始播放时发送。
previewed25percent	预览播放了 25% 时发送。
previewed50percent	预览播放了 50% 时发送。
previewed75percent	预览播放了 75% 时发送。
previewed100percent	预览播放了 100% 时发送。

方法

名称	说明
toggleMute()	在将视频静音/取消静音之间切换。
pause()	暂停视频。
play()	播放视频。
replay()	重放视频。
seek(time:number)	跳至视频中的指定时间。
setYouTubeId(id:string, cueOnly:boolean)	将 YouTube 视频的来源更改为指定 ID。