最详细的Axure动态面板使用教程
1、打开【Axure】软件,在index文件上新建一个375*667大小的背景矩形并绘制页面。
具体如图所示。
2、在banner的位置上新建一个【动态面板】,双击动态面板在其中新建state1、state2、state3、并依次单击重新命名成banner1、banenr2、banner3。具体如图所示。
3、在右侧的页面模块上双击【banner1】进入到banner1的内页中,并新建一个矩形填充【006600】的颜色。具体如图所示。
4、在右侧的页面模块上双击【banner2】进入到banner2的内页中,并新建一个矩形填充【CC0000】的颜色。具体如图所示。
5、在右侧的页面模块上双击【banner3】进入到banner3的内页中,并新建一个矩形填充【FF9900】的颜色。具体如图所示。
6、回到首页,选择动态面板给他命一个名字【banner】选择交互中的【载入时】选择设置面板状态,勾选【banner】动态面板,选择状态【next】勾选【向后循环】勾选【循环间隔1000毫秒】,具体如图所示。
7、回到首页,在banner动态面板上再次新建一个【动态面板】并重新命名为【轮播点】,具体如图所示。
8、双击【轮播点】动态面板,新建三个内页【轮播点1、轮播点2、轮播点3】具体如图所示。
9、点击轮播点1中绘制三个【圆形】,并把第一个圆形填充成点亮的颜色【666666】,具体如图所示。
10、点击轮播点2中绘制三个【圆形】,并把第二个圆形填充成点亮的颜色【666666】,点击轮播点3中绘制三个【圆形】,并把第三个圆形填充成点亮的颜色【666666】,具体如图所示。
11、回到首页,在右侧交互面板上选择【载入时】,回到首页,勾选【轮播点】动态面板,选择状态【next】勾选【向后循环】勾选【循环间隔1000毫秒】,具体如图所示。
来源:千锋UI设计
最详细的Axure动态面板使用教程的更多相关文章
- axure 动态面板制作图片轮播 (01图片轮播)
利用Axure的动态面板组件制作图片轮播: 首先现在操作区添加一个动态面板组件: 鼠标放在动态面板上,右键单击选择面板状态管理,给动态面板设置名称并添加两条状态然后点击确定. 双击动态面板,然后双击s ...
- Axure 动态面板的状态与尺寸
知识点: 1.动态面板的状态下相当动态面版的模式,当符合某种条件的话就选择对应的动态面板的状态 2.动态面板的尺寸可以根据内容自动调整大小 本节教程主要分为一下图片两种场景: 出现动态面板中的两种.一 ...
- axure 动态面板实现图片轮播效果(淘宝)
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料 axure7.0 方法/步骤 下载需要轮播的图片 将图片引入至axure中,将引入的第一张图片转为 ...
- Axure教程:如何使用动态面板?动态面板功能详解
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板 动态面板是a ...
- axure rp教程(四)动态面板滑动效果
转载自: http://www.iaxure.com/74.html 实现目标: 1. 点击登录滑出登录面板 2. 点击确定滑出动态面板 最终效果如下: 这种效果可以通过两种方法实现: 首先准备需 ...
- Axure Base 08 动态面板的用途
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于动态面板 动态面板是axure原 ...
- Axure Base 10 动态面板滑动效果
示例原型:http://pan.baidu.com/s/1mgjYahi 实现目标: 1. 点击登录滑出登录面板 2. 点击确定滑出动态面板 最终效果如下: 这种效果可以通过两种方法实现: 首先准 ...
- 动态面板——axure线框图部件库介绍
1.什么是Axure的动态面板 按照Axure官方网站的解释 :动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度.动态面板包含有多个状态(states),每个状 ...
- Axure 第一次接触动态面板
动态面板可以理解为有多维空间的一个容器,里面可以设置多个state,每个state里面可以放多个元件 先把对应的元件设置为动态面板并且隐藏: 本段教程主要包括三种应用场景: 1.邮箱不为空.密码为空时 ...
随机推荐
- 对于低版本IE,ajax的设置处理
!(function() { var timeout = 16000; //设置ajax请求的setting配置----start jQuery.support.cors = ...
- win10 时间很烦
1.刷2次策略.2.打开控制面板-管理工具-服务里,有个windows time的服务,应该是正在运行,手动(触发),右键停止.3.win+r,regedit,打开注册表,找到HKEY_LOCAL_M ...
- php挖掘数据编码问题
if(json_encode($jkkey) == 'null'){//判断不是utf8会返回空 $jkkey=mb_convert_encoding($jkkey,'utf-8','gbk'); } ...
- rect用法
//如果创建一个Rect对象rect(100, 50, 50, 100),那么rect会有以下几个功能: rect.area(); //返回rect的面积 5000 rect.size(); //返回 ...
- java面试题:网络通信
网络分层 Q:OSI网络七层模型. Http Q:http协议的状态码有哪些?含义是什么? 200,服务器已成功处理了请求. 302,重定向. 400,错误请求. 401,未授权,请求要求身份验证. ...
- 事务、cookie、session操作
事务 import os if __name__ == '__main__': os.environ.setdefault('DJANGO_SETTINGS_MODULE','BMS.settings ...
- unity填色绘画游戏Drawing Coloring Extra Edition
. 下载地址: https://item.taobao.com/item.htm?spm=0.7095261.0.0.2e611debLdF3mf&id=576153069662
- js中的循环
js中的循环是我们经常要用到的,现在进行一些归纳. 一.javascript种的循环. 1.循环对象 var o = { name: 'Jack', age: 20, city: 'Beijing' ...
- iOS 证书申请新步骤
2018iOS完整的证书申请和打包过程 - 简书https://www.jianshu.com/p/2b3c2693f4f2
- Django——模板语言相关内容
Django模板语言相关内容 Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} ...