微信键盘哪里是任意编辑框(微信列表如何左滑删除)

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(1)

动效见下图所示:

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(2)

一、元素介绍

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(3)

二、触发介绍

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

  • 快掷
  • 移动
  • 联动

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(4)

三、制作方法

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

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

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(5)

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(6)

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

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(7)

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(8)

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

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(9)

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

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(10)

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

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(11)

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

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(12)

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

这里我们选择X轴:

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(13)

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

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(14)

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

  • 参数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”元素左滑时,“标记未读”按钮跟着滑动的效果设置。

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

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

微信键盘哪里是任意编辑框(微信列表如何左滑删除)(15)

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

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

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页