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

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

我是大明同学。

下期见。

相关推荐
充值内卷17 分钟前
把 Visio 和 Axure 塞进一个 1.5 MB 的 exe:Visioxure 的架构与取舍
架构·axure
半杯咖啡半行码2 小时前
QML与 Qt Quick入门实战:从零基础到 C++ 双向通信详解
java·qt·交互
充值内卷2 小时前
Visio、Axure、draw.io、ProcessOn、墨刀、Figma:六款工具哪个该干哪件事
axure·draw.io·processon
畅想视界ThinkView3 小时前
病区护士站触控终端选型指南:分诊叫号与护理交互终端怎么挑
前端·microsoft·交互
元岳数字人小元1 天前
告别云端依赖,数字人本地部署筑牢项目安全底座
人工智能·安全·架构·开源·人机交互·交互
喜欢吃豆1 天前
我开源了 Agent UI Lab 用交互实验理解 AG-UI A2UI 与 MCP Apps
ui·开源·大模型·交互
洋不写bug2 天前
HTTP(二):万字解析HTTP交互的请求、响应报文格式
网络协议·http·交互·postman·请求格式·响应格式·restful规范
磊磊cpp2 天前
CRC8 校验原理与实现详解(附可交互动画演示)
c++·交互
CappuccinoRose2 天前
拖拽交互体系
前端·javascript·css·html·交互·1024程序员节
stolentime3 天前
CF2277E Tree Guessing题解
c++·算法·贪心算法·交互·ad-hoc