Axure 9教程----第三天

        Axure 9高级功能实现

目录

案例1:加法功能

 案例2:点赞数

                方法一:局部变量

                  方案二:全局变量

 案例三:动态面板----TAB栏切换

 案例四:动态面板----轮播图


案例1:加法功能

        (1)步骤:

                        在Default组件库中窗体下,选择三个文本框(单行)设置其样式

                        写入“+”和“=”

                        给“=”新建交互,在鼠标单机时设置文本,其中目标元件为result元件,新增俩个局部变量获取元件a和b的数据,插入局部变量让二者相加

        (2)预览: 

 案例2:点赞数

                方法一:局部变量

                (1)步骤:

                        在元件库找到拇指朝上并调整样式,再添加文本框(单行)

                        给拇指添加交互,当鼠标点击时,设置文本,目标元件为文本框,添加局部变量,值为局部变量+1。

                (2)预览:

                  方案二:全局变量

                                   (1)步骤:

                                              添加拇指向上并设置样式,添加交互,在鼠标点击时设置变量,添加全局变量nice,值为nice+1;

                                                为俩个文本框设置文本,值为nice;

                                 (2)预览:

 案例三:动态面板----TAB栏切换

                (1)步骤:

                                从元件库选择button按钮,分别命名为首页,第二页,第三页,第四页调整样式;从元件库选择动态面板,调整样式;

                                给动态面板添加状态,分别为首页,第二页,第三页,第四页;在每个状态下添加文本框(单行),内容为每个状态的名字,并调整样式;

                                 给四个button按钮分别创建交互,在鼠标点击下,设置面板状态,使面板状态与按钮的名字对应,并随便设置动画

               (2)预览:

 案例四:动态面板----轮播图

                (1)步骤:

                        在元件库选择动态面板,并设置四个状态,在每个状态下放入一张图片,调整样式使其美观;

                        在元件库选择左右单角符分别放在面板的左右,并调整样式;目的是让鼠标点击时进行切换图片;

                        在元件库选择椭圆,分别为1,2,3,4,并调整样式;目的是每个状态对应相同的数字,同时点击数字可以进行切换图片;

                        给动态面板创建交互,鼠标单击时,设置面板状态为下一个,并添加循环和动画;目的是让图片自动轮播

                        再创建交互,在动态面板状态改变时。添加四个用例,每个用例为动态面板的状态;并设置选择/选中,使每个用例对应的状态数与椭圆中的数字相对应;

                        选中四个椭圆,设置在选定下改变数字颜色和填充颜色;每个椭圆建立鼠标单击时交互和鼠标移出时交互;鼠标单击时设置面板状态,使面板状态的数字对应椭圆内                         的数字并设置动画;鼠标移出时设置面板状态,目标元件为动态面板,状态为下一个并设置循环和动画,目的是让鼠标离开后图片能自动轮播;

                        选中左右单角符,分别设置鼠标单击和鼠标移出;其他与上相同,注意在设置左单角符时,状态为上一个,动画为向右滑动;右单角符时状态为下一个,动画为向左                         滑动;

               (2)预设:gif超过5mb了.......

        


如有需要自行提取

链接:https://pan.baidu.com/s/1rfLuwTux0VoJBQvlyyoi4g 
提取码:cogv

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值