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

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

我是大明同学。

下期见。

相关推荐
@PHARAOH5 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
蓝天智能11 小时前
QT QML交互原理:信号与槽机制
开发语言·qt·交互
三掌柜66616 小时前
突破AR视觉交互边界:Unity赋能Rokid AR眼镜实现高精度图像识别与实时跟踪
unity·ar·交互
猫头虎1 天前
Paper2Agent:将科研论文转化为可交互的AI智能体工具项目
人工智能·prompt·aigc·交互·pip·agi·ai-native
北城以北88881 天前
Vue-- Axios 交互(二)
javascript·vue.js·交互
MARS_AI_2 天前
云蝠智能VoiceAgent 9月升级概览:从功能交互到用户体验
人工智能·自然语言处理·交互·信息与通信·agi
Goona_2 天前
PyQt批量年龄计算工具:从身份证到指定日期的周岁处理
python·小程序·交互·pyqt
2401_878454532 天前
Vue 核心特性详解:计算属性、监听属性与事件交互实战指南
前端·vue.js·交互
游坦之3 天前
基于Java Swing的智能数据结构可视化系统 | 支持自然语言交互的AI算法助手
java·数据结构·交互
迎風吹頭髮3 天前
Linux内核架构浅谈2- Linux内核与硬件交互的底层逻辑:硬件抽象层的作用
linux·架构·交互