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

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

我是大明同学。

下期见。

相关推荐
阿华的代码王国7 小时前
【Android】适配器与外部事件的交互
android·xml·java·前端·后端·交互
跨界混迹车辆网的Android工程师8 小时前
实现Android图片手势缩放功能的完整自定义View方案,结合了多种手势交互功能
android·交互
wearegogog1238 小时前
C语言中的输入输出函数:构建程序交互的基石
c语言·开发语言·交互
公众号【林东笔记】获取资料19 小时前
Adobe Photoshop 2024:软件安装包分享和详细安装教程
ui·adobe·photoshop
MARS_AI_3 天前
云蝠智能 VoiceAgent:重构物流售后场景的智能化引擎
人工智能·自然语言处理·重构·交互·信息与通信
梓贤Vigo5 天前
【Axure高保真原型】地图路线和定位
交互·产品经理·axure·原型
阿登林5 天前
数据可视化交互深入理解
信息可视化·交互
许泽宇的技术分享5 天前
「让AI大脑直连Windows桌面」:深度解析Windows-MCP,开启操作系统下一代智能交互
人工智能·windows·交互
二川bro6 天前
第八篇:交互入门:鼠标拾取物体
前端·交互·threejs
招风的黑耳7 天前
Axure 高阶设计:打造“以假乱真”的多图片上传组件
javascript·图片上传·axure