Axure怎么设计开关按钮效果?

百度经验   发布时间:2018-09-05 15:00:24   作者:goodbyte01   我要评论
Axure怎么设计开关按钮效果?Axure中想要设计一个开关的按钮,该怎么制作这个按钮呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下

Axure中想要绘制开关按钮,该怎么设计开关呢?下面我们就来看看详细的教程。

”开关“按键比较简单,如下图,新建一个”圆形“及一个”矩形“

设置”圆形“尺寸为28*28,命名为round;设置”矩形“尺寸为70*32,命名为block,填充色#999999,圆角半径35,字体颜色#FFFFFF,文字内容”OFF“,右对齐

另单独再设置”矩形:block“的选中时,填充色为#009900

按下图方式布局方式组合”圆形:round“和”矩形:block“,并命名此组合为”on-off“

布局、组合结束后,下来就是”开关“按键的交互动作。”组合:on-off“的”鼠标点击时“的交互动作:设置”当前控件“的选中状态为”切换(toggle)“方式

”圆形:round“的”选中时“的交互动作:移动”圆形:round“到指定位置(X,Y)

设置“元件:block”为局部变量LVAR1,所以X的值为[[LVAR1.right-This.width-3]]

Y的值为[[This.y]]

”圆形:round“的”取消选中时“的交互动作:移动”圆形:round“到指定位置(X,Y)

设置“元件:block”为局部变量LVAR1,所以X的值为[[LVAR1.left+3]]

Y的值依旧为[[This.y]]

矩形:block“的”选中时“的交互动作:设置”矩形:block“的值为”ON“:富文本格式设定为左对齐,文字粗体

”矩形:block“的”取消选中时“的交互动作:设置”矩形:block“的值为”OFF“:富文本格式设定为右对齐,文字粗体

至此,基本设置就结束了~很是简单,明了。这个是一个默认”关闭“的效果,默认”开启“效果原理类似,这里就不再累述了

以上就是axure设计开关按钮的教程,希望大家喜欢,请继续关注脚本之家。

相关推荐:

Axure PR 8怎么快速制作多个按钮?

Axure8怎么制作彩色个性化的按钮?

Axure RP Pro 7.0怎么制作图片轮播按钮效果?

相关文章

  • Axure RP 8怎么控制不同颜色元件移动?

    Axure RP 8怎么控制不同颜色元件移动?Axure RP 8中想要控制两个不同颜色的柱子,该怎么操作呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
    2017-05-08
  • Axure RP 8怎么控制矩形元件颠倒旋转?

    Axure RP 8怎么控制矩形元件颠倒旋转?Axure RP 8中想想要使用按钮控制一个矩形的旋转,该怎么制作呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
    2017-05-08
  • axure怎么制作图片自动播放的效果?

    axure怎么制作图片自动播放的效果?axure中想要制作一个图片自动播放的效果,该怎么设计呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
    2017-05-05
  • Axure RP 8怎么设置动态面板显示隐藏对象?

    Axure RP 8怎么设置动态面板显示隐藏对象?Axure RP 8中设计的网页想要隐藏元件,该怎么实现呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-04-28
  • AXURE怎么使用中继器实现样式重复但内容不同的效果?

    AXURE怎么使用中继器实现样式重复但内容不同的效果?一般网站中我们都会遇到用一个模块显示不同内容的情况,该怎么使用AXURE实现呢?下面我们就来看看详细的教程,需要的朋
    2017-04-25
  • axure怎么设计菜单横向隐藏与显示的效果?

    axure怎么隐藏菜单横向隐藏与显示的效果?今天想要和大家分享一些关于axure显示隐藏效果的实现方法,我们就以隐藏菜单为例,需要的朋友可以参考下
    2017-04-23
  • Axure怎么设计手机短信倒计时效果?

    Axure怎么设计手机短信倒计时效果?Axure中想要制作倒计时效果,该怎么制作呢?下面我们就来看看详细的教程,很简单,需要的朋友可以参考下
    2017-04-23
  • axure怎么用中继器制作微博联系人效果?

    axure怎么用中继器制作微博联系人效果?想要仿照微博的联系人样式制作一个这种效果,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-04-23
  • axure怎么给文字设置跑马灯效果?

    axure怎么给文字设置跑马灯效果?axure中想让文字实现跑马灯效果,该怎么实现呢》下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-04-23
  • axure怎么使用动态面板制作淘宝图片轮播效果?

    axure怎么使用动态面板制作淘宝图片轮播效果?我们经常看到淘宝中有图片轮播的效果,该怎么设计这种效果呢?下面我们就来看看通过axure实现的教程,需要的朋友可以参考下
    2017-04-23

最新评论