最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

动态面板的应用(3)

教程 小楼一夜听春语 1949浏览

支付宝官网的首页有三张背景图轮流呈现。

地址:https://www.alipay.com/

页面上的图标、按钮等元素,不在教程中再做讲述。

我们这里主要实现图片的自动切换。

在页面中,三张图片轮流切换,并且切换时带有渐变效果。

这样的交互,我们需要借助动态面板来实现。

并且,有一点需要注意,页面中的图片是铺满全屏的,并且改变浏览器窗口大小时,图片始终居中显示。

在画布中放入一个动态面板,并命名。

动态面板的尺寸与图片素材的尺寸保持一致,宽度1600像素,高度820像素。

然后,我们在概要面板中为动态面板添加两个新状态。

图片的尺寸需要自适应浏览器窗口,这就不能直接在动态面板的状态中添加图片,而是要把图片作为动态面板状态的背景图片。

我们在概要面板中点中动态面板的第一个状态,在样式面板中为状态设置背景图片。

再点中动态面板的第二个状态,为第二个状态设置背景图片。

当然,第三个状态也要同样设置。

此时,动态面板已经添加好了三张背景图片,我们需要通过交互让三张图片轮流播放。

页面打开之后,图片就开始自动循环播放,所以要添加的交互是动态面板的[载入时]事件。

在动态面板[载入时],为[当前]面板[设置面板状态]为[下一项],并且启用[向后循环],也就是切换到最后一个状态后,还能重回第一个状态。进入与退出动画都是[逐渐]效果。循环的间隔[4000]毫秒,并且[首个状态延迟4000毫秒后切换],以免页面打开后第一张图片一闪而过。

完成交互事件的添加之后,还有最后一步。

在样式面板中,将动态面板设置为浏览器的[100%宽度]

并且,自身宽度设置为很小的尺寸。

因为宽度太大的话,在浏览器窗口宽度小于动态面板宽度时会出现水平方向的滚动条。

到这里,我们就完成了图片的自动切换,并且能够水平方向铺面全屏。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 动态面板的应用(3)