快好知 kuaihz

Axure RP 8 教程 – 用动态面板实现轮番图

本章主要介绍如何使用动态面板的多状态切换制作轮番图,而轮番图在首页消息和活动的推送以及APP引导页有广泛的运用。

案例简介:固定区域循环播放一组幻灯片,圆形分页标签随着播放不同的图片,而对应改变样式。

案例效果:

以下是轮番图的制作流程,请慢慢食用哦。

Axure RP 8 教程 – 用动态面板实现轮番

1.将动态面板拉到操作区中。

2.,双击动态面板,添加五个状态,并给动态面板名称命名为“轮番图”。

3.双击状态,以状态1为例,进入状态1编辑界面,将元件区的图片拖到动态面板框内,双击图片图标添加本地准备好的图片。

4.按照添加状态1图片的方式,为其他四个状态添加图片,一个状态一张,添加完毕五张图片,在大纲页面可以看到。

5.将元件库里的方框拖进来,改成圆形缩小。

6.在这个圆形的属性界面设置选中状态(设置填充颜色为灰色),勾选下方的“选中”(只有Tag1需要勾选“选中”,其他不需要),并且制定选择组“tag”,复制这个圆形,复制成五个之后,为这几个命名为“tag1”~“tag5”。

7.全部选中,一起命名为tag,目的是保证这五个有且仅有一个被选中。

8.为载入时设置用例,实现轮番效果(循环播放效果)。

9.为动态面板“轮番图”的状态切换设置用例。

为用例添加判断,判断面板状态轮番图”=状态1。

设置该条件下的动作应该为“选中”tag1为真。

10.其他用例按照和用例1相同的方式设置,只是每一个用例对应的状态和图形不一样,最后设置完毕应该为下图所示。

11.收工后预览效果如下图所示

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:轮番  轮番词条  面板  面板词条  实现  实现词条  教程  教程词条  动态  动态词条  
原型

 Axure原型设计:活动抽奖转盘

生活中在购物的时候经常会遇到一些可以抽奖的活动,很多时候都采用转盘抽奖的形式,抽中奖自然很开心啦,但是这个转盘原型是怎样做出来的呢,马上来看下吧!先来个完整图,...(展开)

原型

 Axure教程:用Axure实现...

雷迪丝and枕头们,欢迎来到星光大道……sorry,拿错题词卡了,重来(XX公司年会暨春节联欢晚会现场)女士们,先生们,接下来就是万众期待、摩拳擦掌、蠢蠢欲动、...(展开)

原型

 Axure教程:实现进度条、进度...

作者分享了制作进度条、进度环和滑动条的简单方法,希望能给大家带来一定的收获。画原型的目的之一是为了给开发人员看功能的实现效果,同时也可以打包制作成Demo给相关...(展开)