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

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

我是大明同学。

下期见。

相关推荐
前端Hardy2 小时前
HTML&CSS :下雪了
前端·javascript·css·html·交互
步、步、为营14 小时前
Avalonia+ReactiveUI跨平台路由:打造丝滑UI交互的奇幻冒险
ui·c#·.net·交互
梓贤Vigo21 小时前
【Axure高保真原型】商场流量大屏可视化分析案例
交互·产品经理·axure·原型·可视化
AxureMost21 小时前
【Axure 模版素材】Arco Design组件库 - AxureMost
产品经理·axure
Rany-21 小时前
智慧水务管网在线监测平台(Axure高保真原型)
大数据·经验分享·axure
shelby_loo1 天前
免费获得Photoshop等设计软件的机会
ui·adobe·photoshop
沉默的煎蛋5 天前
前后端交互过程
java·开发语言·ide·vscode·eclipse·状态模式·交互
duvbxff6 天前
新能源科技亲民化路径何在?交互式展厅提供新解吗?
科技·交互
轻口味7 天前
【HarmonyOS NAPI 深度探索7】N-API 数据处理:与 JavaScript 数据的交互
javascript·c++·交互·harmonyos·napi·harmonyos-next