Axure RP9——【工具栏展开收起效果】

 

工具栏展开收起效果

TOOLBAR 

目录

工具栏展开收起效果

I.效果演示

II.实现步骤

---

I.效果演示

当点击按钮的时候，可以显示出工具栏的内容；再次点击可以收缩复原。

如下演示：

Axure RP9 ——工具栏展开收起效果

 

 

II.实现步骤

（1）工具栏展开效果

①按钮先向右移动一小段缓冲距离

②按钮向左移动到达指定位置；工具栏面板从中心向两端展开；工具栏组合移动到（0,0）的位置

③按钮通过旋转变成关闭样式

（2）工具栏关闭效果

①按钮先向左移动一段缓冲距离

②按钮向右移动到达指定位置，工具栏面板从两端向中心收起，工具栏组合移动到（-125,0）位置；

③按钮通过旋转变成添加样式

2.步骤

首先，需要清楚一点：完成此效果，是通过点击“按钮”来实现，点击展开，再点击收缩；

也需要通过设定情形：当工具栏面板不可见时；当工具栏面板可见时；

按钮的尺寸：（50,50）

工具栏的尺寸：（300,50）；

调整工具栏面板的大小和按钮一般大

 

（1）情形一：当工具栏面板不可见时

对按钮设置交互：

①先向右缓冲，再向左移动；

单击——移动（先向右缓冲一点距离），加上动作时间——等待200ms——移动（向左）——等待

注意：要加上等待时间；起隔断作用

②显示出工具栏面板

③移动 按钮 经过）（-125,0）的距离，线性200ms

计算：（300-50）/2=125;

④旋转-按钮，让它从变成

⑤设置尺寸：对工具栏面板

⑥移动——工具栏

到达（0,0），线性，500ms

预览：

                           

（2）情形二：当工具栏面板可见时

对按钮设置交互：要将工具栏收缩

其实就是刚刚动作的反动作；

注意：最后的时候，再设置隐藏即可