Axure 教程 | 使用键盘进行移动对象
我们在PC端产品的时候，经常会使用到键盘操作，让某个对象产生位置的变化。比如在玩游戏时，通过键盘控制游戏人物的走动，上下左右进行移动。
那么我们今天就来看看，在用axure制作这类的产品原型时，制作的思路时如何的。先来看看案例的效果是如何的。
大家可以点击预览，自己操作一下，真实感受一下这个案例效果是如何的。https://9cj4eh.axshare.com
这个效果具体是怎样的呢：
使用一下按键，在不同方向产生位置的移动，W向上、A向左、S向下、D向右、Z回到起点
1、我们先看看需要什么元素。目前我们能看到的就是一个移动的对象
2、辅助用元素。因为我们的动作是键盘类的动作，并且有多个按键，所以必须要有一个部件来记录按下的按键是哪个，所以这里用了一个文本框来记录按键。
这就是我们准备的所有元素，看起来是比较简单的。
3、开始交互设置。我们在打开这个页面的时候，需要将焦点聚焦到“键盘焦点”的这个文本框中。
4、在聚焦到文本框之后，就可以进行按键的设置。在按键结束之后，我们要判断按键选择的是哪一个键，从而进行判断，设置移动对象往哪个方向移动。
在按键结束时，如果按键是“w”，则将文本框的文字输入为“w”，并且让移动对象往上移动一定的距离。这里我们的设定是每按一次，往上移动20（输入的数值为-20）。之后要将这个文本框清空，方便下次的输入。
交互设置时时这样的：
另外的方向键输入的情况与“w”是一样的思路，大家可以自己试试，设置完之后记得预览看看是否能够移动。
5、“z”键的设置。与方向键的设置一样，同样是在按键松开时，条件为文本框的文字为“z”时，将移动对象移动到原来的位置。这里原来的位置设定为（300，300），即将移动对象移动到（300，300）的位置。
这样设置就可以达到我们想要的效果。
这个做法除了我们前边说的，用来制作游戏类的产品之外，还可以做类似需要操作键盘控制的产品原型，比如计算器、打字练习等多种原型。大家如果有其他设置的方法，欢迎大家一起来交流。
Axure 教程 | 使用键盘进行移动对象相关推荐
- 【Axure视频教程】键盘控制元件移动
今天教大家在Axure里如何制作通过键盘的方向键控制元件移动的原型模板,包括上下左右4个方向,按下方向键,对应元件会朝指定方向移动,松开方向键停止移动,而且还会教大家如何设置移动的边界,让对应元件不会 ...
- Xamarin iOS教程之键盘的使用和设置
Xamarin iOS教程之键盘的使用和设置 Xamarin iOS使用键盘 在文本框和文本视图中可以看到,当用户在触摸这些视图后,就会弹出键盘.本节将主要讲解键盘的输入类型定义.显示键盘时改变输入视 ...
- 【Axure教程】能增删数据的柱状图
柱状图是可视化视图里一个非常重要的工具,在画原型图时,我们也经常用到柱状图.今天作者就教大家如何在Axure里制作一个能增删输入的柱状图模板,效果包括: 查看具体数据--鼠标移入柱状图时,改柱状图的背 ...
- Axure教程：一个通用的app注册/登录页
今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博.微信.QQ.支付宝登录页面,注册页面,用户协议和隐私条款.该原型使用简单,交互完善 ...
- 后端返回number类型数据_【JavaScript 教程】标准库—Number 对象
作者 | 阮一峰 1.概述 Number对象是数值对应的包装对象,可以作为构造函数使用,也可以作为工具函数使用. 作为构造函数时,它用于生成值为数值的对象. var n = new Number(1) ...
- Axure教程:如何使用动态面板？动态面板功能详解
写了几个Axure教程之后发现,可能教程的起点有些高了,过分的去讲效果的实现,而忽略了axure功能以及基础元件的使用,那么从这个教程开始,把这些逐渐的展开讲解. 关于Axure动态面板 动态面板是a ...
- 对象数组参数_【JavaScript 教程】标准库—Array 对象
作者 | 阮一峰 1.构造函数 Array是 JavaScript 的原生对象,同时也是一个构造函数,可以用它生成新的数组. var arr = new Array(2);arr.length // ...
- linq结果转换object_【JavaScript 教程】标准库—Object 对象
作者 | 阮一峰 1.概述 JavaScript 原生提供Object对象(注意起首的O是大写),本章介绍该对象原生的各种方法. JavaScript 的所有其他对象都继承自Object对象,即那些对 ...
- xbanner 动画特效设置android,Axure教程：如何实现爱彼迎App首页Banner的切换效果
原标题:Axure教程:如何实现爱彼迎App首页Banner的切换效果 本文分享一个用Axure实现爱彼迎App首页Banner切换效果的方法,供大家参考,欢迎一起交流. 作者最近闲暇时间试着将爱彼迎 ...
最新文章
- DL：基于sklearn的加利福尼亚房价数据集实现GD算法
- Excel：解决Excel表格每一行所有字段在一个单元格的情况
- HTML之Position用法
- linux超实用的管理命令
- linux企业版5安装卡乱码,linux下安装mysql5.5 乱码问题
- SpringBoot学习（三）
- 单元测试Error creating bean with name org.springframework.web.servlet.resource.Resource
- 【批处理命令】call命令
- Atitit xml转json总结 目录 1.1. XML和JSON之间没有直接映射；元素类型问题 1 1.2. Xml与json的对应关系 2 1.3. 范例 2 2. Jsonlib的问题，，不
- Hitfilm Express下载
- cisp-pts学习笔记-sql注入
- 局域网内两台电脑设置共享文件夹并访问
- 去银行当程序员是一种什么体验
- Java面试集合（四）
- python高逼格动态图_微信编辑哪里找高逼格 GIF 动图？
- express跨域配置
- datagridvie设置行高列宽_DataGridView控件如何让行高随内容的多少变化啊？
- 着千奇百怪地求爱方式
- Lucene6.6.0 案例与学习路线
- Spring Cloud入门 -- Ribbon服务消费者（Hoxton.SR5版）