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

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

我是大明同学。

下期见。

相关推荐
小乖兽技术10 小时前
C#与C++交互开发系列(二十四):WinForms 应用中嵌入C++ 原生窗体
c++·c#·交互
henreash13 小时前
NLua和C#交互
开发语言·c#·交互
仰望天空—永强15 小时前
PS 2025【七月最新v26.5】PS铺软件安装|最新版|附带安装文件|详细安装说明|附PS插件
开发语言·图像处理·python·图形渲染·photoshop
哥本哈士奇18 小时前
Web前端交互利用Python跟大模型操作
前端·python·交互
天若有情67319 小时前
从一个“诡异“的C++程序理解状态机、防抖与系统交互
开发语言·c++·交互·面向对象·状态机
henreash19 小时前
xLua和C#交互
开发语言·c#·交互
太阳上的雨天1 天前
与 TRON (波场) 区块链进行交互的命令行工具 (CLI): tstroncli
typescript·区块链·交互·tron·trx·trc20
白云~️2 天前
js实现宫格布局图片放大交互动画
开发语言·javascript·交互
大曰编程3 天前
行为型模式-协作与交互机制
wpf·交互
贝格前端工场4 天前
旧系统UI焕新陷阱:保留业务习惯与引入新交互的平衡点把控
ui·交互