Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)优质

扫码添加渲大师小管家,免费领取渲染插件、素材、模型、教程合集大礼包!

当用户需要输入文字时。单击输入框。手机键盘向上弹出;当用户输入完毕。焦点不在输入框时。手机键盘向下收起。这样的效果在Axure中怎么实现呢?下面小渲就来给大家演示下方法。

对于“Axure RP”还有不懂的地方。点击这里了解更多关于“Axure RP”课程>>

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

工具/软件

硬件型号:微软Surface Laptop Go

系统版本:Windows7

所需软件:Axure RP

方法/步骤

第1步

界面设计:

在工作区拖入 一个“图片部件”。双击图片。导入图片1.

再次拖入一个“图片部件”。双击图片。导入图片2(即:软键盘图片)。命名为“board”,并右击将其 隐藏。

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

第2步

拖入 多行文本框 部件。

设置文本框大小。放到适合位置。

并命名为 “文本框”

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

第3步

拖拽一个 矩形 部件。

填充为 灰色。

将其放在多行文本框的滚动条上。(目的是盖住滚动条。不让其显示。使界面更美观。)

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

第4步

交互设计:

选中“文本框”。双击“获取焦点时”事件。打开用例编辑器。

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

第5步

点击“显示”。勾选“board图片”;

设置动画:向上滑动 500毫秒 置于顶层

确定。

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

第6步

选中“文本框”。双击“失去焦点时”事件。打开用例编辑器。

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

第7步

点击“隐藏”。勾选“board图片”;

设置动画:向下滑动 500毫秒 ;

确定。

完毕!

Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)

以上关于“Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)”的内容小渲今天就介绍到这里。希望这篇文章能够帮助到小伙伴们解决问题。如果觉得教程不详细的话。可以在本站搜索相关的教程学习哦!

以上是由资深渲染大师 小渲 整理编辑的,如果觉得对你有帮助,可以收藏或分享给身边的人

本文标题:Axure怎么实现软键盘弹出和收起的交互效果(axure键盘输入框怎么设置)
本文地址:http://www.hszkedu.com/70279.html ,转载请注明来源:云渲染教程网
友情提示:本站内容均为网友发布,并不代表本站立场,如果本站的信息无意侵犯了您的版权,请联系我们及时处理,分享目的仅供大家学习与参考,不代表云渲染农场的立场!

发表评论