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

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

我是大明同学。

下期见。

相关推荐
天泽恒晟18 小时前
适老化到适我化—摄像头的选择
科技·信息可视化·生活·智能家居·交互
不会写DN20 小时前
如何在纯前端中通过手势交互来控制星球的转动
前端·交互
网域小星球21 小时前
C 语言从 0 入门(十五)|综合小项目:菜单交互与简易功能实现
c语言·开发语言·交互
梓贤Vigo2 天前
【Axure原型分享】动态更换颜色
axure
hu55667982 天前
Photoshop(PS)蓝底和红底照片的CMYK值色值是多少
ui·photoshop
lq12332102 天前
photoshop软件(好用的版本集合)
photoshop·图片处理
ai大模型中转api测评2 天前
告别文字堆砌:Gemini 交互 API 赋能垂直领域,开发者如何重构用户认知?
人工智能·重构·交互·api
chaofan9802 天前
从文字响应到动态沙盒:深度解析 Gemini 交互模拟 API 的技术实现与集成
人工智能·交互·api
空中海2 天前
2.5 手势识别与交互系统
flutter·交互·dart
人机与认知实验室3 天前
人机之间的有概念交互与无概念交互
交互