AxureRP7.0从入门到精通(连载32)

Axure书籍 小楼一夜听春语 14236℃ 0评论

2.6.  循环

在很多网站上,都能看到在某个位置上会有多张图片不停的循环播放。这种效果是幻灯片的自动播放效果,屌丝们叫它图片轮播。

在AxureRP7.0中这个效果变得简单到只需简单设置,然后在【载入时】触发事件的用例中添加一个动作即可实现。

案例:自动图片轮播

我们假设有六张图片进行循环播放。因为六张图片尺寸一致,操作时,我们放入一张图片元件调整好尺寸,其余五张只需进行复制。但是,这六张图片我们需要放置在动态面板的六个状态中,如果分别往六个状态中复制粘贴图片元件,显然是很麻烦的事情,这里我们使用元件管理面板中的“复制状态”功能,让操作变得更简便。

首先,我们先拖入一个图片元件,设置好合适的尺寸,这里是400*240。然后,将其转为动态面板,并将其命名为“slide”。这时在元件管理中,我们就能看到这个动态面板还有它的默认首个状态“State1”,刚刚的图片元件就包含在这个状态中。(图168)

(图168)

然后,在元件管理的元件列表中,我们点中“State1”,点击5次“复制状态”按钮,这样就完成了状态和图片的同时复制。(图169)

169

(图169)

      接下来,为每个图片元件指定不同的图片,在元件管理的元件列表中,双击两次图片元件即可打开文件选择窗口,选择本地的图片文件。

备注:这一步中图片元件的两次双击,第一次双击会打开动态面板状态,第二次双击打开文件选择窗口。

最后,我们回到页面中,点中动态面板,为它添加触发事件【载入时】中的用例动作为【设置面板状态】“slide”【选择状态为:】“Next”,同时,勾选“向后循环”和“循环间隔”的选项,并设置循环间隔为“2000”毫秒。(图170)

这时,就完成了幻灯片自动播放的效果,但是图片的切换是直接改变的,而没有滑动的效果。为了让图片切换有滑动的效果,我们还需要设置【进入动画】【向左滑动】“500”毫秒和【退出动画】【向左滑动】“500”毫秒。(图170)

170

(图170)

备注:1:

这个案例是向后循环播放幻灯片所以【选择状态为:】“Next”,如果需要向前循环播放,可以【选择状态为:】“Previous”。

备注2:

进入动画:指即将显示的状态切换进入时的动画效果;

退出动画:指当前已显示状态切换退出时的动画效果。

本章任务:牢记动态面板的多种特性,并完成本章内各个案例应用这些特性。


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

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

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

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


转载请注明:Axure原创教程网 » AxureRP7.0从入门到精通(连载32)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 支持支持!
    喵大仙人2015-09-21 13:44 回复
  2. 不错不错,终于学会了
    2015-09-22 11:05 回复
  3. 很不错
    MGW2015-09-22 13:16 回复
  4. 小楼老师 能转载您的文章吗
    大西瓜2015-09-24 10:31 回复
    • 小楼一夜听春语
      可以呀
      小楼一夜听春语2015-09-24 11:42 回复
      • 谢谢老师,我自己弄一个公众号,用来促进自己的学习,我会明确写明转载的网址和作者,谢谢老师啦!
        大西瓜2015-09-24 19:12 回复
  5. 屌丝我终于学会做图片轮播了。。。哈哈哈哈
    圆圆2015-11-03 18:52 回复
  6. 现在一加载页面就开始轮播图片,怎么实现加载后第一张图先显示一会儿,再开始轮播呢?
    2015-11-20 17:27 回复
    • 小楼一夜听春语
      载入时 先添加等待 2000毫秒
      小楼一夜听春语2015-11-25 09:06 回复
  7. 俺纯属路人,此次回帖紧紧是回报你的视频教程而已,也是为了让后来者学到更简单使用的技巧,否则当个潜水员多好,如果话说得有点不近人情 忘见谅。你的视频中那个完整版的图片轮播其实不完美: 一 下面的圆点和图片切换的状态不同步,每次都是状态改变后下面的圆点才切换,所以为了同步下面的圆点必须改成动态面板形式,取消‘状态改变’事件; 二 不需要设置移入移出范围,这个实在有点别扭,只需要把所有原件加入到一个最高层的动态面板中就能完美的解决鼠标移动到图片切换按钮时图片自动轮播功能被激活的问题。
    student2016-06-07 08:37 回复
    • 小楼一夜听春语
      图片轮播,我还想不到更完美的方式,如果你有好的解决方式可以做出来分享给大家。关于视频录制的很早了,那个时候不管是软件和个人的理解还都不够,但也是当时自己能拿出来最好的内容了。我觉得用上i5,也没必要觉得用过奔腾3有什么丢人,毕竟那时候科技的高度在那里呢!最后,感慨一句,你回报的方式够特别,不说别的,逼格满满的。
      小楼一夜听春语2016-06-07 23:28 回复
  8. Axure 8,循环间隔这个选项已经消失掉了
    亚比2016-09-28 09:31 回复
    • 小楼一夜听春语
      还在
      小楼一夜听春语2016-09-28 11:33 回复