当前位置：网站首页 > 热门文章 > 正文

Protopie教程:微信列表如何左滑删除

bigegpt 2024-10-12 06:31 3 浏览

作为一个产品经理，对交互颇有兴趣，还记得最初做动画是使用Flash，现在慢慢的尝试了新的软件：Axure、Justinmind、Protopie；最后移动端更喜欢使用Protopie，所以和大家分享一些细微效果的教程。

动效见下图所示：

一、元素介绍

为了方便识别，我将元素分类，左侧列表与右侧场景中内容相对应。左侧元素列表中D元素，对应右侧场景中没有标注的部分，都属于D元素。

二、触发介绍

本例中用到了以下触发功能：

快掷
移动
联动

三、制作方法

本案例我们需要对JD这个元素进行制作左滑效果，并且在左滑的过程中，标记未读和删除2个按钮跟随出现。

我们先在左侧元素列表，点击选择JD元素，在右侧触发窗口中点击“添加触发”按钮，选择“快掷”。

选择“快掷”是为了模拟出手指在列表中快速滑过的效果。

完成选择后，我们在“快掷”的属性面板，选择滑动的方向：

设置完成，下一步，我们在动作面板中点击“+”按钮，选择“移动”选项。

选择“移动”选项是为了设置，当用户快速向左滑动时，指定元素移动的位置区域。

并且在元素属性面板将坐标值设置为：X轴-176.78 / Y轴132.29；详细设置如图所示：

这里有几个选项需要介绍一下：动画特效；这里可以设置滑动时的特效，选项很多如下图所示，我们这里选择“缓入缓出”&“Cubic”。

有兴趣的可以自己尝试切换下效果：

完成以上步骤，我们完成了对元素左滑动效的设置，各位可以按照相同的方法对元素进行右滑设置。

设置的区别在于X轴的坐标，如下图所示：

完成了滑动效果的设置，下一步我们需要对滑动后“标记未读”和“删除”2个按钮进行设置动效。

这里我们使用“联动”功能来完成：

这里大家可能会发现上图与文章开始的图片，2个按钮排列方式不同，因为文章开头的图片，是为了让大家更好的分辨元素，因为2个按钮在滑动时是在同一水平位置移动的，所以我们把按钮重叠摆放了。

首先我们创建“联动”设置：在触发动作面板，点击“添加触发”，然后选择“联动”。

下一步，我们设置联动效果的移动方向。

这里我们选择X轴：

设置完成后，我们点击“标记未读”按钮进行设置联动后的移动效果。

选择“标记未读”按钮后，点击联动面板下方的“+”按钮，选择“移动”参数，对联动的元素进行设置，如图：

在这里我们看到右下角设置参数为：

参数A：0 / 375 / 132.29
参数B：-176 / 200 / 132.29

这里和大家解释一下这些参数的意思：

第一组参数：0 / 375 / 132.29；这个比较好理解，标注了“标记未读”默认在面板中的位置。

第二组参数：-176 / 200 / 132.29；这组参数表示的意思如下：

-176：表示“标记未读”按钮，基于“JD”这个元素，向左移动的位置来确定的，在本例中“JD”元素向左滑动时，向左移动了176个像素，所以我们设置了-176这个值。
200：表示“标记未读”按钮移动后X轴最终停止的位置，200表示距离屏幕边距左侧200。
132.29：表示“标记未读”按钮移动后Y轴最终停止的位置。

完成以上步骤，我们完成了对“JD”元素左滑时，“标记未读”按钮跟着滑动的效果设置。

各位可以按照相同的方法对“删除”按钮进行设置。

最终设置后的参数如下图所示：

至此，我们可以在player中查看到实际的效果，也完成了我的第一篇分享，希望大家喜欢，欢迎交流。

本文由 @ioioi 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

列表删除元素

上一篇：Java ArrayList 插入和删除元素的时间复杂度?
下一篇：「每天3分钟学Python」删除List的元素，这个坑值得注意!

Protopie教程:微信列表如何左滑删除

一、元素介绍

二、触发介绍

三、制作方法

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解