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

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

我是大明同学。

下期见。

相关推荐
招风的黑耳3 小时前
基于 Axure 与 Element UI 风格的拖动列调整位置表格设计
axure·element·表格·拖动列
梓贤Vigo5 小时前
【Axure原型分享】卡片排序
交互·产品经理·axure·原型·中继器
招风的黑耳6 小时前
基于 Axure 与 Element UI 风格的拖动行排序表格设计
elementui·axure·表格·拖动
向宇it6 小时前
【unity游戏开发——网络】unity对接steam,并上传发布游戏版本——Steamworks.NET
游戏·unity·游戏引擎·.net·交互
XXYBMOOO1 天前
使用 HTML5 Canvas 实现可交互的数据瀑布流(隐藏式运维模式)
运维·交互·html5
helloworddm1 天前
C++与C#交互 回调封装为await
c++·c#·交互
独自归家的兔1 天前
通义千问3-VL-Plus - 界面交互(坐标改进)
数据库·microsoft·交互
独自归家的兔2 天前
通义千问3-VL-Plus - 界面交互(本地图片)
人工智能·交互
巴拉巴拉~~2 天前
Flutter 通用按钮组件 CommonButtonWidget:多样式 + 多状态 + 交互优化
javascript·flutter·交互
巴拉巴拉~~2 天前
Flutter 通用表单输入组件 CustomInputWidget:校验 + 样式 + 交互一键适配
javascript·flutter·交互