axure选中后横线切换_3、开关状态切换 —— Axure实用交互

写在开头:开关的制作在几乎所有原型设计中都会用到,所以美观自然的交互开关可以给你的原型设计加分不少。

本次开关设计主要用到的是逻辑为:选中状态的切换

首先,来看一下演示动画

开始原型设计

一、创建元件

首先需要打开Axure软件,并在画板上创建两个图形:一个为300*40的矩形,需要在“样式”一栏中修改它的元件半径为60,背景填充颜色为灰色,线段类型为无none,并命名为beijing;一个为45*45的圆形,填充颜色为深灰色,线段类型为无none,并命名为anniu。

创建完以后需要把两个元件居中对齐。

二、交互设计

(1)设置圆形anniu的交互动作(case 1)

① 当鼠标点击时,移动当前元件到绝对值X、Y

② X=[[anniu.x+beijing.width-anniu.width]],需要定义Fx的局部变量anniu以及beijing

上面函数的意思为:按钮的X坐标值+后面矩形背景的宽度-按钮的宽度,因为元件的X坐标是以左边为基准的。

③Y=[[target.y]],target不需要定义因为它的含义为“目标的” ;    [[target.y]] 意为:移动后的Y坐标和移动前的一致。

④ 动画为线性500ms

现在可以点击预览一下画面,然后你就会惊奇的发现还没有设置颜色变换。

所以我们还要设置anniu选中状态!因为选中状态可以切换颜色进行变化展示。

(2)改变选中交互设置

下面需要设置anniu、beijing的选中交互设置为改变填充颜色

如下图所示:

                          

接着设置鼠标单击anniu的交互动作为选中状态于anniu、beijing为true;

(3)设置选中状态及交互条件(case 2)

① 然后设置鼠标单击anniu的case 2 的条件为当anniu的选中状态为true的情况下

移动当前元件到绝对值,X=[[anniu.x+anniu.width-beijing.width]],同样也需要进行Fx的定义。

Y=[[target.y]], 动画为线性500ms。

② 设置选中状态于anniu、beijing为flase,这样可以达到周而复始循环开关的效果。

(4)设置case 1的条件

要实现循环开关,则需要给case 1进行条件约束,保证case 1和case 2不互相进行干扰。因为要是不给case 1限制的话,当鼠标点击按钮后,元件会移动到指定位置完成第一步操作。但是再次点击按钮后,元件会继续往前移动,一直进行case 1 的动作而不运行case 2 的动作。

所以需要在case 1前设立条件如果anniu的元件状态为flase,这样就可以循环满足条件实现原型设计。

整个交互用例设计如下图所示

因为交互用例中没有直接改变目标颜色的交互操作,所以如果你想要更改目标颜色,不妨试试使用选中状态、禁用状态、鼠标按下以及鼠标悬停这些设置,通过设置状态变化从而切换显示颜色。

至此,雷达效果讲演结束,期待与您的交流沟通!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/393809.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django框架——模型(数据库操作)

-- models.py-- ORM(object-relation mapping) 实现数据模型与数据库的解耦;# 对象,关系,映射;1.根 据对象的类型生成表结构;2.将对象、列表的操作,转换为sql语句;3.将sql查询到的结果转换为对象…

leetcode140. 单词拆分 II(回溯+记忆化)

给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符串中增加空格来构建一个句子,使得句子中所有的单词都在词典中。返回所有这些可能的句子。 说明: 分隔时可以重复使用字典中的单词。 你可以假设字典中没有重复的单词。 …

#loj 3058 [HNOI2019] 白兔之舞

单位根反演思博题 模数是乱给的记得整个任意模数ntt k为p-1的约数意味着一定存在k次单位根,设g是p的原根则\(w_{k}^{1}g^{\frac{k-1}{p}}\) 既然k次单位根存在自然考虑单位根反演了 设\(f(i)\)表示跳了i步并且停在了第二维为y的顶点的方案数 设\(st\)表示初始向量而…

标杆徐2018 Linux自动化运维实战,标杆徐2018 Linux自动化运维系列⑦: SaltStack自动化配置管理实战...

结合企业自动化集群场景讲解,轻松玩转SaltStack自动化配置管理工具第1章 SaltStack基础应用SaltStack安装SaltStack认证Saltstack远程执行SaltStack配置管理第2章 SaltStack数据系统SaltStack数据系统-Grains 客户端向服务端发送状态SaltStack数据系统-paiil 服务…

JS 对象引用问题

var a {n:1}; var b a; a {n:2}; a.x a ;console.log(a.x);console.log(b.x); var a {n:1}; var b a; a.x a {n:2}; console.log(a.x);console.log(b.x); 这两个问题主要理解两点就很简单了。 对象是引用类型,改变赋值只是改变指针的引用。运算符相当于改变…

工程代码_Egret开发笔记(二)基础工程代码阅读

代码目录结构在Egret Wing中打开上一节中我们创建的项目工程,查看代码目录结构,Forward在如下图中标记了各个目录的及关键文件的用途。代码阅读理解接下来我们从web入口一步一步阅读初始代码。首先打开index.html文件,我们看到index文件内容如…

知晓云助力小程序开发

小程序开发遇到瓶颈虽然腾讯提供了小程序解决方案,https://cloud.tencent.com/solution/la。但是对于普通开发者或者小企业的开发人员来说,购买域名,网站备案、部署SSL证书,安装会话服务器。业务逻辑上要使用数据库,缓…

leetcode131. 分割回文串(回溯)

给定一个字符串 s&#xff0c;将 s 分割成一些子串&#xff0c;使每个子串都是回文串。 返回 s 所有可能的分割方案。 示例: 输入: “aab” 输出: [ [“aa”,“b”], [“a”,“a”,“b”] ] 代码 class Solution {List<List<String>> stringListnew ArrayList…

Cracer渗透-windows基础(系统目录,服务,端口,注册表)

系统目录C:\Windows\system32\config\SAM (保存系统密码) 无法正常修改&#xff0c;可以进入PE系统进行修改&#xff08;先备份在清空&#xff09;利用结束后&#xff0c;再将之前备份的恢复C:\Windows\System32\drivers\hosts&#xff08;域名解析文件&#xff09;hosts欺骗&a…

java--xml文件读取(SAX)

SAX解析原理&#xff1a; 使用Handler去逐个分析遇到的每一个节点 SAX方式解析步奏&#xff1a; 创建xml解析需要的handler&#xff08;parser.parse(file,handler)&#xff09; package com.imooc_xml.sax.handler;import java.util.ArrayList;import org.xml.sax.Attributes…

算法训练营 重编码_编码训练营之后该做什么-以及如何获得成功

算法训练营 重编码by Anthony Morris安东尼莫里斯(Anthony Morris) 编码训练营之后该做什么-以及如何获得成功 (What to do — and how to find success — after a coding bootcamp) It’s almost been two years since I graduated from the Lighthouse Labs Web Developmen…

leetcode860. 柠檬水找零(贪心)

在柠檬水摊上&#xff0c;每一杯柠檬水的售价为 5 美元。 顾客排队购买你的产品&#xff0c;&#xff08;按账单 bills 支付的顺序&#xff09;一次购买一杯。 每位顾客只买一杯柠檬水&#xff0c;然后向你付 5 美元、10 美元或 20 美元。你必须给每个顾客正确找零&#xff0…

linux防火墙开启某端口命令行,linux上防火墙 开启某个端口

linux下防火墙 开启某个端口直接在/etc/sysconfig/iptables中增加一行&#xff1a;-A RH-Firewall-1-INPUT -m state –state NEW -m tcp -p tcp –dport 8080 -j ACCEPT注意添加位置:-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 25 -j ACCEPT-A RH-Fi…

imp命令导入指定表_Sqoop 使用shell命令的各种参数的配置及使用方法

点击上方蓝色字体&#xff0c;选择“设为星标”回复”资源“获取更多资源本文作者&#xff1a;Sheep Sun本文链接&#xff1a;https://www.cnblogs.com/yangxusun9/p/12558683.html大数据技术与架构点击右侧关注&#xff0c;大数据开发领域最强公众号&#xff01;暴走大数据点击…

黑客频繁来袭 关注云计算的安全与保障

本文讲的是 : 黑客频繁来袭 关注云计算的安全与保障 , 【IT168 资讯】日前&#xff0c;虎嗅网遭受网络攻击的事件&#xff0c;引起业内关注。2月27日晚&#xff0c;虎嗅网中断访问&#xff0c;虎嗅网新浪官方微博随即发表声明&#xff0c;表示网站受到恶意攻击&#xff0c;随…

51nod 1100:斜率最大

题目链接 斜率最大点对横坐标必相邻 #include <bits/stdc.h> using namespace std; const int maxn 1e4 100;struct point {int x, y, pos;bool operator < (const point& rhs)const{return x<rhs.x;} } a[maxn]; double xielv(point a, point b) {return (a…

ik分词和jieba分词哪个好_Pubseg:一种单双字串的BiLSTM中文分词工具

中文分词是中文自然语言处理中的重要的步骤&#xff0c;有一个更高精度的中文分词模型会显著提升文档分类、情感预测、社交媒体处理等任务的效果[1]。Pubseg是基于BiLSTM中文分词工具&#xff0c;基于ICWS2005PKU语料训练集训练而成&#xff0c;其优点在于在ICWS2005-PKU语料下…

freecodecamp_freeCodeCamp.org隐私权政策:问题与解答

freecodecampWe take your privacy seriously. And we give you full control over your data.我们把你的隐私当回事。 而且&#xff0c;我们可以完全控制您的数据。 freeCodeCamp doesnt show you ads or sell your data to anyone. Our nonprofit is instead supported by t…

leetcode1029. 两地调度(贪心算法)

公司计划面试 2N 人。第 i 人飞往 A 市的费用为 costs[i][0]&#xff0c;飞往 B 市的费用为 costs[i][1]。 返回将每个人都飞到某座城市的最低费用&#xff0c;要求每个城市都有 N 人抵达。 示例&#xff1a; 输入&#xff1a;[[10,20],[30,200],[400,50],[30,20]] 输出&…

第一阶段冲刺4

1、我昨天的成就&#xff1a;看相关android开发视频&#xff0c;上网寻找如何实现app动画效果2、遇到什么困难&#xff1a;网上的用的很高级&#xff0c;看不懂别人如何实现的&#xff0c;搬过来实现不了。3、今天的任务&#xff1a;继续实现动画效果。 转载于:https://www.cnb…