AxureRP8实战手册-案例12(动态面板:自动图片切换)

AxureRP8.0教程 小楼一夜听春语 17699℃ 0评论

 案例12.   动态面板:自动图片切换

案例来源:

淘宝-首页

 

案例效果:

  • 页面打开时:(图1-82)

1_82

案例描述:

固定区域循环播放一组图片(幻灯片效果),圆形分页标签随着播放不同的图片,而对应改变样式。

 

元件准备:

  • 页面中:(图1-83)

1_83

元件命名:

  • 动态面板(多状态添加图片):SlidePanel
  • 矩形(圆点分页标签):Tag1~Tag5

思路分析:

  • 利用动态面板可添加多个状态的特性,创建5个状态;(操作步骤1)
  • 将5张需要展示的图片放到各个状态里面;(操作步骤2~3)
  • 将圆点分页标签做成只能唯一被选中的效果,并设置第一个圆点默认被选中;(操作步骤4)
  • 页面打开后,开启图片循环播放的效果;(操作步骤5)
  • 每次切换到新的图片时,根据状态名称选中圆点分页标签,呈现橙色效果。(操作步骤6~10)

操作步骤:

1、拖入动态面板到画布,命名为“SlidePanel”,双击动态面板(或者在概要面板中鼠标双击动态面板名称),点击【+】图标,为动态面板添加5个状态;(图1-84)

1_84

2、双击进入状态“State1”,添加一张图片到画布左上顶点的位置;(图1-85)

1_85

3、参考上一步,将剩余四张图片分别放入到状态“State1”~“State5”中;(图1-86)

1_86

4、拖入一个矩形,设置为圆形,在元件属性中为其设置【选中】的样式,{设置选项组名称}为“Tag”,并调整为合适的大小;点中此元件,按<Ctrl+D>键复制成5个后,摆放在合适的位置上;因为这几个元件变小后不易操作,可以在概要面板中,为这几个命名为“Tag1”~“Tag5”;(图1-87)

1_87

5、点中动态面板“SlidePanel”,为其【载入时】事件添加用例,设置动作为【设置面板状态】“SlidePanel”为【Next】;同时,勾选【向后循环】与【循环间隔】的选项,并设置自动循环间隔的时长为“2000”毫秒;一般来说,页面打开时,不会直接切换到第二个状态,所以这里还要勾选【首个状态延时***毫秒后切换】;最后,设置下个状态进入与当前状态退出的动画均为【向左滑动】“500”毫秒;

  • 用例动作设置:(图1-88)

1_88

6、为动态面板“SlidePanel”的【状态切换时】事件添加用例1;为用例添加条件判断,判断【面板状态】“SlidePanel”【==】【面板状态】“State1”;

  • 条件判断设置:(图1-89)

1_89

7、继续上一步,添加符合该条件的动作,【选中】元件“Tag1”;

  • 用例动作设置:(图1-90)

1_90

8、再次双击事件的名称或双击点击【+】,参照用例1添加用例2的条件和动作;判断【面板状态】“SlidePanel”【==】【面板状态】“State2”;动作为【选中】元件“Tag2”;

  • 事件交互设置:(图1-91)

1_91

9、参照用例2,依次添加用例3~4;

 

10、因为,除去用例1~用例4的判断内容,就只剩下最后一种情形;所以,用例5无需进行条件内容的设置,直接设置动作为【选中】元件“Tag5”。

  • 事件交互设置:(图1-92)

1_92

特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


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

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

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

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例12(动态面板:自动图片切换)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(14)个小伙伴在吐槽
  1. 小楼老师,我感觉这个效果不是很理想啊,图片动画结束之后,那个圆点的选中效果才开始
    nikee2016-06-28 06:53 回复
  2. 不如做成动态面板自动滚播。双面板同时切换
    交互小牛2016-07-20 17:36 回复
  3. 老师真棒
    肖念灵2016-12-10 12:41 回复
  4. 好像没有设置单击tag时候自动跳到对应界面;单击之后就停止滚动了怎么破,怎么让它继续从下一个开始滚动?
    IanX2016-12-14 23:08 回复
    • 小楼一夜听春语
      之前怎么让他滚动的 忘记了?
      小楼一夜听春语2016-12-15 08:47 回复
      • 单击tag时候自动跳到对应界面也设置成功 但是就停止滚动了!? 同问小楼
        勤奋小学生2017-02-14 18:08 回复
        • 可以在tag上设置【鼠标移出时】用例-->设置面板状态-->按上面第5步操作即可
          2017-04-27 14:06 回复
          • 确实可以了,谢谢!!
            irene2017-09-26 14:32
  5. 这样弄确认有点小问题,首次进去以后,tag1是没有选中状态的。
    喵喵喵喵喵?2017-01-24 14:04 回复
    • 小楼一夜听春语
      仔细比对图1-83
      小楼一夜听春语2017-01-24 19:32 回复
  6. 滚动到第二页了第一页的点还亮着,点亮了之后就不会灭了,怎么办?
    北北2017-04-18 16:24 回复
    • 五个tag需先设置相同的【设置选项组名称】
      2017-04-27 14:11 回复
  7. 请问轮播开始后,Tag2选中了如何让Tag1恢复默认状态呢?
    Min2017-06-14 17:56 回复
    • 全选所有的tag标签 右键设置选项组 起个名字确定后就可以了
      二懒沈2017-10-24 10:58 回复