Axure RP 9萌新修炼手册-第五章-交互应用(7)

AxureRP9教程 小楼一夜听春语 243℃ 0评论

六、多状态

在前面的案例中,我们只使用了动态面板的一个默认状态“State1”。

在动态面板的编辑状态下,我们可以为动态面板添加或复制出更多的状态。(图5-125)

并且,我们可以通过动作【设置面板状态】来指定动态面板显示哪一个状态。

案例28:制作图片轮播

在产品班(http://www.chanpinban.com)的首页有一个产品展示功能。(图5-126)

这个功能有如下的交互效果:

  • 三张产品图片可以自动轮流切换显示,切换时带有渐变动画;
  • 图片切换时,下方的圆点标签会对应选中;
  • 点击左右箭头能够切换图片;
  • 点击圆点标签也能够切换到对应的图片。

这样的图片展示功能,通常叫做幻灯片效果或图片轮播效果。

我们通过动态面板就能够完成这样的图片展示功能。

1、准备相关的元件。

(1)先放入一张图片元件,将第一张产品图片导入,并在图片上点击鼠标右键,上下文菜单中选择【转换为动态面板】,命名为“LoopBanner”。

(2)双击动态面板,将默认的状态复制(重复状态)为3个。(图5-127)

(3)打开概要功能面板,双击状态“State2”和“State3”中的图片导入另外两张产品图片。

完成这一步后,我们关闭动态面板的状态编辑。

(4)在页面中放入三个圆形,边框设置为白色,取消填充颜色。(图5-128)

(5)将三个圆形命名为“1~3”或“State1~State3”(注意大小写),并为每个圆形添加【选中】的交互样式,【填充颜色】为白色“FFFFFF”。

注:如果不知道如何添加交互样式,前面的内容是怎么学的?

(6)在属性设置中,为所有圆点标签添加相同的【选项组】名称,让它们能够唯一选中。

注:如果不知道如何进行属性设置,前面的内容是怎么学的?

(7) 还要在属性设置中把第一个圆形设置为默认【选中】状态。

(8)在动态面板上层的左右两侧,放入两个箭头图标。(图5-129)

2、为元件添加交互。

我们先进行分析。

(1)页面打开之后,三张图片自动循环播放;

(2)循环播放的同时,对应的圆点页签变为选中的状态;

(3)点击左右箭头时,能够切换图片,切换后还能够继续循环播放;

(4)点击圆点标签也能够切换状态,并且切换后也能够继续循环播放。

按照上面的分析,我们添加交互设置。

步骤1

页面打开时执行的交互需要通过【载入时】触发,添加动作为“当前元件”【设置面板状态】为【下一项】,并且能够【向后循环】,切换的动画为【逐渐】,每次的【循环间隔】为2000毫秒。(图5-130)

添加完这个交互事件之后,预览原型就能够看到3张图片自动切换播放的效果。

步骤2

动态面板【状态改变时】有三种情形:

情形1:切换到第1个状态,【选中】第1个圆点标签;

情形2:切换到第2个状态,【选中】第2个圆点标签;

情形3:切换到第3个状态,【选中】第3个圆点标签。

此处以情形1为例。

(1)为动态面板“LoopBanner”添加【状态改变时】【选中】圆点标签“1”或“State1”的交互。(图5-131)

(2)为【状态改变时】的交互事件【启用情形】,设置名称为“切换到第1个状态”,添加条件判断【当前】动态面板““LoopBanner””的【面板状态】【==】【状态】“State1”。(图5-132)

(3)为【状态改变时】的交互事件【添加情形】,设置名称为“切换到第2个状态”,添加条件判断【当前】动态面板““LoopBanner””的【面板状态】【==】【状态】“State2”。(图5-133)

(4)为“切换到第2个状态”的情形添加交互,【选中】圆点标签“2”或“State2”。(图5-133)

(5)继续为【状态改变时】的交互事件【添加情形】,设置名称为“不符合以上情形”,无需添加任何条件。(图5-133)

(6)为“不符合以上情形””的情形添加交互,【选中】圆点标签“3”或“State3”。(图5-133)

注:最后一个情形不需要添加条件,因为不是前两种情形就是第三种情形。

此时预览原型,圆点标签以及能够跟随面板状态选中。

步骤3

(1)为左右箭头分别添加【单击时】的交互,动作仍然是【设置面板状态】,只是选择状态时分别是【上一项】和【下一项】,同时也要勾选【向前循环】或【向后循环】,并且添加“500”毫秒的【逐渐】【进入动画】和【退出动画】。

此处以左箭头的交互为例。(图5-134)

(2)添加了以上交互之后,虽然能够点击箭头切换状态,但是动态面板的循环会自动停止,我们还需要让动态面板的【载入时】交互事件再次被【触发】。(图5-135)

步骤4

(1)为圆点标签添加【单击时】的交互,动作还是【设置面板状态】,只是状态是按照与当前圆点标签标签对应的状态【名称或序号】【值】““[[This.name]]””进行切换,并且能够【向后循环】,同时带有“500”毫秒的【逐渐】【进入动画】和【退出动画】。

因为,我们的圆点标签元件是按照状态顺序编号(1~3)或状态的名称(State1~State3)命名的,所以可以通过系统变量 “[[This.name]]”获取圆点标签的名称(也就是状态的序号或名称)来切换状态。

此处以第一个圆点标签的交互为例。(图5-136)

(2)点击圆点标签后,动态面板的循环也会自动停止,还需要再次将动态面板的【载入时】交互事件【触发】。

这个动作设置参考步骤3的第(2)部分完成。

注:第一个圆点标签的交互完成之后,我们就可以把它的交互事件复制,粘贴给另外两个圆点标签。这里因为使用了系统变量“[[This.name]]”,粘贴后的交互无需做任何修改。

第七节 中继器啊

中继器元件一般用于模拟列表。例如:商品列表、邮件列表、视频列表、评论列表、标签列表等。

并且,通过中继器我们能够实现列表内容的添加、删除、修改、排序以及筛选。

一、基本操作

中继器元件的基本操作分为四个步骤:

  • 中继器编辑状态中创建列表项的模板;
  • 中继器样式中组织数据;
  • 中继器交互中将数据与模板元件绑定;
  • 中继器样式中进行布局等设置。

案例29:制作商品列表

我们通过中继器元件模拟京东秒杀的商品列表。(图5-137)

1、创建列表项的模板。

拖入中继器元件到画布中,命名为“GoodsList”,然后双击中继器元件进入编辑状态。

在中继器的编辑状态中,我们创建列表项的模板。

模板由多个元件以及一个组合组成。(图5-138)

组合中包含一个白色的背景矩形、图片“GoodsImage”以及显示商品名称的文本标签元件“GoodsName”。

剩下是显示商品价格与促销价格的文本标签“Price”,显示秒杀进度百分比的文本标签“Ratio”,秒杀进度条“ProgressBar”以及进度条的灰色背景,还有红色边框以及立即抢购按钮。

这里需要注意,价格元件“Price”由两段文字(促销价格以及原价)组成,这两段文字具有不同的样式。

  • 促销价格的字体为“Arial”字体,而原价的字体是“微软雅黑”。
  • 促销价格中人民币符号的字号是13号字,数字是24号字;原价中的文字字号是14号字。
  • 促销价格与原价之间包含6个14号字的空格。

关于元件的样式设置,请参考本案例的RP源文件。

完成元件的准备之后,我们关闭中继器的编辑状态。

2、在样式中为中继器添加数据。

(1)数据可以从Excel表格中进行复制,回到Axure RP的样式功能面板中,点中(不要双击)数据表的首行首列,通过快捷键<Ctrl+V>粘贴到中继器的数据集中。

注:Excel数据表文件在本书素材中获取。

粘贴数据后,在数据表的末尾会存在一个空行,点中空行再点击删除行的按钮将其删除。

(2)双击数据集自动创建的列名进行修改,将列名与模板中对应的元件命名保持一致,并在最后一列之后添加新列,命名为“GoodsImage”。

(3)在新增加的列中,右键单击单元格,在上下文菜单中选择【导入图片】,从本地磁盘中将每一个商品的图片素材导入。

到这里,我们就完成了数据的添加。(图5-139)

3、添加交互,将数据与模板元件进行绑定。

(1)绑定商品图片

在中继器的【每项加载时】添加交互,【设置图片】“GoodsImage”为【插入变量或函数】列表中的“[[Item.GoodsImage”]]。(图5-140)

"Item"是中继器加载每一项时数据行的对象,通过这个数据行对象调用列名即可获取列值。

此时,我们已经能够看到商品列表中每一项的图片都发生了变化。

(2)绑定商品名称

这里需要注意,商品名称最多为32个文字。

在交互中继续添加【设置文本】的动作,设置商品名称“GoodsName”的【值】为【插入变量或函数】列表中的“Item.GoodsName”,并且对商品名称通过函数“substr()”进行截取,只保留前32个文字,具体的公式为“[[Item.GoodsName.substr(0,32)]]”。(图5-141)

此时,我们已经能够看到商品列表中每一项的名称也都发生了变化。

(3)绑定商品价格

因为商品价格的文本标签“Price”中包含了多种不同样式的文字,我们需在【设置文本】的动作中【添加目标】,通过【富文本】进行元件““Price””文本的设置。(图5-142)

此时,不用我说你也知道发生了什么对吗?

(4)绑定秒杀进度

我们继续为秒杀进度的文本标签元件“Ratio”绑定数据,在【设置文本】的动作中【添加目标】,为元件“Ratio”【设置文本】为【值】,从【插入变量或函数】列表中选择的“[[Item.Ratio]]”将元件文本中的数值进行替换。(图5-143)

此时...此刻,我想淫湿一手...哇哈哈哈哈哈哈!

(5)设置秒杀进度条尺寸

这个设置很有意思,我们需要让不同商品的进度条元件“ProgressBar”根据进度比例(Item.Ratio)显示不同的长度。

继续为交互添加动作,为进度条元件“ProgressBar”【设置尺寸】,【宽度】为“[[Item.Ratio/100*88]]”。(图5-144)

注:公式中的“88”是进度条灰色背景矩形的宽度。

此时,我们已经能够看到商品列表的每一项内容都已经完美呈现。

4、调整中继器列表的外观。

在样式功能面板中,让商品列表【水平】【布局】【网格排布】,【每行项数量】为“4”个,并且商品项之间的【行】【间距】为“20”像素,【列】【间距】为“10”像素。(图5-145)

以上就是中继器实现列表的基础操作。

不过,在这个案例中,还有一些动态效果,我们也一起添加上。

当鼠标指针进入商品图片、名称的区域时,商品图片需要向上滑动10像素,并且在鼠标指针离开的时候回到原位。(图5-146)

这需要我们为组合添加交互,设置【鼠标移入时】【移动】商品图片“GoodsImage”【经过】【y】轴“-10”像素的距离,并带有【线性】【动画】,时长为“150”毫秒。(图5-147)

然后,将交互动作复制,粘贴到【鼠标移出时】的交互中,修改【y】轴的移动距离为“10”像素。

或者参考【鼠标移入时】的交互进行设置,只是【y】轴的移动距离由“-10”像素改为由“10”像素。(图5-148)

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第五章-交互应用(7)

喜欢 (1)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址