Axure PR 9 旋转效果 设计&交互


大家好,我是大明同学。

这期内容,我们将学习Axure中的旋转效果设计与交互技巧。

旋转

创建旋转效果所需的元件

1.打开一个新的 RP 文件并在画布上打开 Page 1。

2.在元件库中拖出一个按钮元件。

创建交互

创建按钮交互状态

1.选中按钮元件,在交互窗格点击新建交互,单击时,旋转 顺时针 经过 -90°线性 1000 毫秒。

预览交互

点击预览,每次点击按钮时,按钮会顺时针旋转90°

Axure 默认情况下,一般以元件的中心旋转,改变锚点可以改变旋转的中心。

预览交互

点击预览,每次点击按钮时,按钮会以左侧为中心顺时针旋转90° 。

接下来我们加上移动交互做一个圆球滚动的效果。

创建圆球效果所需的元件

1.在元件库中将圆形元件拖到画布中。

2.选中圆形元件,在样式窗格中将填充颜色设置为蓝色(#0052D9),添加线性和径向效果,线宽设为 0。

创建交互

创建圆球交互状态

1.选中圆球,在交互窗格中点击创建交互,载入时,启用情形判断

情形1:如果"[[This.x]]" <"[[Window.width-1500]]'意思是,圆形元件的X轴<窗口宽度并减去1500

旋转 当前(圆球)经过90° 线性 500毫秒。

等待 500毫秒 。

触发事件 当前(圆球)载入时。

2.点击画布空白区域,设置页面排列,向左侧排列。

预览交互

点击预览,圆球会向左旋转,到设置宽度停止旋转。

预览地址: https://15zwj7.axshare.com

好的,这期内容到这里就结束。

我是大明同学。

下期见。

相关推荐
人机与认知实验室10 小时前
如何创造出一种不同于程序语言的人与机器自然交互语言?
交互
人机与认知实验室10 小时前
有人-无人(人机)交互记忆、共享心智模型与AI准确率的边际提升
人工智能·交互
格调UI成品12 小时前
从混乱到秩序:探索管理系统如何彻底改变工作流程
信息可视化·交互
行云流水剑1 天前
【学习记录】深入解析 AI 交互中的五大核心概念:Prompt、Agent、MCP、Function Calling 与 Tools
人工智能·学习·交互
梓贤Vigo1 天前
【Axure高保真原型】图片列表添加和删除图片
axure
害羞的白菜1 天前
基于Axure+墨刀设计的电梯管理系统云台ERP的中保真原型图
数据分析·产品经理·axure·项目经理·墨刀
小赖同学啊1 天前
Axure 与 Cursor 集成实现方案
axure
小马哥编程1 天前
【iSAQB软件架构】软件架构中构建块的视图:黑箱、灰箱和白箱及其交互机制
microsoft·架构·系统架构·交互
陈奕昆2 天前
4.3 HarmonyOS NEXT AI驱动的交互创新:智能助手、实时语音与AR/MR开发实战
人工智能·交互·harmonyos
藏在歌词里2 天前
Axure-元件&流程图
ui·photoshop