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

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

我是大明同学。

下期见。

相关推荐
q_30238195564 小时前
香橙派AI Pro 20T部署DeepSeek:打造本地离线语音助手,实现语音交互自由!
人工智能·交互
mingren_13144 小时前
c++和qml交互
c++·qt·交互
人机与认知实验室4 小时前
2026年,“交互”会出现新的定义
交互
wenzhangli71 天前
告别手撸架构图!AI+Ooder实现漂亮架构+动态交互+全栈可视化实战指南
人工智能·架构·交互
科技与数码1 天前
数字人公司世优科技以全栈技术解锁政务文旅展厅全场景智能交互
科技·交互·政务
MARS_AI_1 天前
融资加持下的云蝠智能:大模型语音Agent重构企业通信新生态
人工智能·自然语言处理·重构·交互·信息与通信·agi
沐墨染1 天前
大型数据分析组件前端实践:多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
William_cl1 天前
ASP.NET Core ViewData:弱类型数据交互的精髓与避坑指南
后端·asp.net·交互
小雨青年1 天前
鸿蒙 HarmonyOS 6 | ArkUI (06):表单交互 TextInput、Toggle、Slider 与 Picker 选择器
华为·交互·harmonyos
行者961 天前
Flutter适配OpenHarmony:手势交互的深度优化与实战应用
flutter·交互·harmonyos·鸿蒙