Axure RP9——【推动和拉动效果】的实现

推动和拉动效果

 

---

目录

推动和拉动效果  PUSH AND PULL

I.简介

II.实例：

A.使用显示和隐藏来触发

B.使用切换面板状态来触发

---

 

I.简介

1.定义

（1）推动元件：

如果被推动元件坐标≥ 显示元件坐标（x方向或y方向）时，该元件会推动一定距离；（显示元件的高度或宽度）。

且被推动原件与显示元件推动方向范围有一定的相交。

（2）拉动元件：与推动相反。

2.所需实现效果：

并且可以推动下方的其他元件进行向后推移

II.实例：

A.使用显示和隐藏来触发

1.推动效果

（1）先创建两个表格，

一个是正常显示的，另一个是需要设置交互的，将其命名为【显示更多表格】；并设置隐藏

（2）设置一个标题【显示更多】，

设置交互：点击后，可以显示出表格2，并推动下方元件移动

（3）交互设置的注意：

①设置显示交互，动作：向下滑动

②需要设置其他元件向后推动：基线是以第二个表格的顶端的线为基准向下的；

（4）效果实现

    

2.拉动效果

实现逻辑是这样：点击显示更多后——文本变为，收起，再次点击，复原；且下方元件可以一起活动；

（1）首先需要情形设置：

①当文本等于【显示更多】时，进行下拉交互，显示出隐藏的内容，并且其他元件可以一起推动

②设置文本：要实现点击 显示更多后文本变为 收起 ；设置交互如下图

        

（2）第二种情形设定：

当文本等于 【收起】时：

①要设置隐藏 表格内容，并且设置下方元件，向上推动的效果

②点击后，复原显示更多 字样；

        

 

B.使用切换面板状态来触发

实现效果图如上：

1.动态面板设置：

将要通过显示按钮 展示的内容，转换为 【动态面板】

并添加2个状态，1个为有内容的，1个为无内容的；

默认为无内容的状态；并命名这个面板为：表格面板

2.设置交互

（1）情形设置：需要2种情形

设置文本：情形1——显示更多；情形2 ——收起

（2）动作设置：

情形1：

设置面板状态——目标：表格面板；先设置有内容；交互动作设置

设置后，进行设置文本，收起

     

情形2：

设置之后，预览即可。

不单单是这个场景，要举一反三，通过这个例子理清逻辑，去思考更多的 交互，搭配使用。