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

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

我是大明同学。

下期见。

相关推荐
人机与认知实验室7 小时前
人-机交互是新文科与新理科融合的最佳窗口
交互
GISer_Jing1 天前
从CLI到GUI桌面应用——前端工程化进阶之路
前端·人工智能·aigc·交互
colin52101 天前
Axure 本地预览时加载慢的问题分析和处理方法
axure·谷歌字体样式·网页加载慢
KIHU快狐1 天前
KIHU快狐|国产鸿蒙系统立式一体机RK3588芯片多点触控交互查询终端
华为·交互·harmonyos
红黑色的圣西罗1 天前
Lua和C#交互探究记录
c#·lua·交互
NGBQ121382 天前
Adobe-Photoshop-2026-27.4.0.15-m0nkrus 全解析:专业图片处理软件深度指南
ui·adobe·photoshop
colin52102 天前
AxureRP11实例-手机号提交验证交互功能JH110002
axure·axurerp11·手机号验证
GISer_Jing2 天前
AI Agent交互模式深度解析:浏览器书签&插件进行AI对话
前端·人工智能·aigc·交互
colin52102 天前
AxurePR11实例-验证码倒计时交互功能JH110001
交互·axure·验证码产品交互
御形封灵2 天前
基于canvas的路网编辑交互
开发语言·javascript·交互