Axure RP9——【待办事项完成&删除效果】

 

待办事项完成&删除效果

 

目录

I.效果演示

II.实现步骤

（一）思路

（二）步骤

---

I.效果演示

 

AxureRP9——待办事项完成&删除效果

 

 

II.实现步骤

（一）思路

点击菜单栏，可以切换到对应页面。

【全部待办】下的list，可以向左向右滑动。

拖动时：

向右滑动：

某一距离后，出现完成按钮，且会自动滑动到已完成状态；

此时，全部待办事项的数目减少；已完成数目增加

向左滑动：

滑动到某一距离后，出现关闭按钮，为确保删除操作的安全，会再次进行确认，需点击删除按钮后，才会删除数据。

数目随之减少。

当出现关闭按钮后，想要复原，不进行删除动作，可点击关闭按钮页面任意位置，会复原到原位置。

 

（二）步骤

 

1.元件设置

按照需求，需先排好版。

页面尺寸：

 

全部待办：含有3个事项；

已完成：含有2个事项；

2.设置文本栏

因为数目会变化，最好将数字独立出来

并分别进行命名：个数-全部待办；个数-已完成

3.热区&显示条

功能1实现：点击全部待办会显示全部待办事项；点击已完成会切换到此状态；且显示条会随之变化。

（1）显示条：

当状态切换时，显示条会移动到对应的 位置。

（2）用热区来进行交互设置；

添加2个热区到文本区域；

设置交互：

对全部待办热区：

①单击时——设置面板状态———状态：全部待办—向右滑动，500ms；

②移动——显示条——到达，一个位置好，动画：线性，500ms

（可以根据自己的尺寸进行显示条位移设置即可，相信大家都可以理解的。）

     

对已完成热区：

①单击时——设置面板状态———状态：全部待办—向左滑动，500ms；

②移动——显示条——到达，一个位置好，动画：线性，500ms

     

完成这一步，已经实现了点击文本栏的时候，进度条以及主面板会随着一起移动的状态。

 

4.动态面板

 

（1）页面的“主面板”

2个状态：分别是：全部待办&已完成

（2）全部待办DP：

需要有事项清单在里面，设置待办1 动态面板。

（3）待办1DP：

需要进行页面设置；

底层为含有 完成按钮和关闭按钮的页面；

顶层为：list1；即待办1-清单的内容；

注：此处这样设置，是为了当我们拖动list1的时候，向右滑动时，可显示出底部的完成按钮；向左滑动，显示出关闭按钮

  

 

5.对主面板设置交互

（1）拖动时——移动——list1——跟随水平拖动；

目的：可以左右拖动

（2）拖动结束时：需要添加情形设置

当拖动list1移动到某个位置时，发生对应的交互。

 

【A——当全部待办事项——已完成 的过程】：

当list1移动到，向右位移x大于90的时候，发生交互：

①隐藏：

隐藏 完成按钮和删除按钮；动作：逐渐200ms；

②移动——list1——到达：（280,0）;线性，200ms

即移动到 主面板显示区域外；

③等待——200ms

设置延时，运行完以上操作后，再执行以下交互

④隐藏：

待办1——拉动元件（下方），线性500ms

⑤设置文本：

因为该list 从全部待办事项切换到已完成状态后，文本栏显示数目会随之变化。

（这个过程不难理解，有疑问的可参考之前的基础文章详细操作下。）

   

同理，已完成的数目变化一样。

好，以上就是 全部待办事项切换到 已完成 的过程。

 

【B.——当全部待办事项——删除 的过程：】

因为删除过程，需要进行下2次确认。

考虑到误点的话，点击关闭按钮的页面的任何地方可以复位List1。

删除时：再次点击  删除按钮 即可，删除list1，且数目会随之减少。。

 

①当list1向左位移大于100的距离后，都会到（-75,0）的位置，此位置刚好可以显示出 删除按钮。

移动——list1——到达（-75,0）

 

②对删除按钮设置交互：

点击时，此事项删除，且数目随之减少。

单击时——隐藏：待办1——拉动元件（下方），线性，500ms

设置文本：

 

③对按钮页面：

（因为考虑到有时候误点，点击页面空白区域可以复原清单位置。）

移动到原坐标就行。

 

【C——其他情况（除以上情况外）】

可以复原到拖动前位置；

 

以上操作完成后，预览即可。效果如I。

 

有不懂的可以留言滴滴我哦~