今天在做动效示意的时候发现使用分Principle制作「滑动后，继续拉动切换下一分类」的交互效果其实并不简单。网上搜索的也仅是翻页、滑动组件这种单一的形式。「滑动长页面」+「拉动底部」切换下一个分类，两种交互同时存在的教程比较少。

这里分享&记录我是如何实现「京东的拉动切换下一场」，「叮咚的上拉切换下一分类」也是相同原理，这里主要讲京东的案例。

两个交互源文件都会分享给大家，文末获取源文件&使用方法。

一. 目录

1. 前期准备过程

2. 关键步骤：如何滑动到底部，才触发拉动切换下一场？

3. 滑动&拉动切换组件使用教程

二. 前期准备过程

1）绘制关键的tab和内容，为了方便以后使用，在制作交互组件时以方块替代文字/样式组件。

2）建立组件，调整组件大小和位置。将tab和内容分别打组，调整组可见区域大小，并都选择「水平滚动」。

（PS：记得给所有方块做好命名）

做到第2步就是这样的效果了，是不是觉得很简单，胜利在望？别急，才刚开始。

（PS：principle是自带阻尼效果的，所以不用做很多动作也能跟大厂线上的效果极其相似。）

3）添加滑动到顶/底部的文字，这一步可以很简单，也可以复杂一些。

    a. 简单的就是在所有内容方块下添加文字。并使用白色遮罩，分割方块和文字，避免滑动的时候，露出文字内容。

    b. 复杂的就是利用内容移动间距控制文字的渐显渐隐。刚画的白色遮罩和文字都可以保留。

点击Drivers调出窗口➡️选择需要渐显的文字➡️点击加号➡️添加目标Opacity。

在适合的位置打上关键帧，调整不透明度，一般渐隐是从0-100%，所以距离0近的关键帧不透明度为0%，另一个100%。

同样的方法制作另一边，效果如下

4）最重要的一步，拖动到底部，触发「拉动切换下一场」交互效果。可能接触过principle的人会自然的觉得，给「内容1」添加拖动结束跳转下一页即可，如果真的这么做，结果就是这样的，还没等你滑动到底部，拖动跳转已经触发了。

三. 关键步骤：滑动到底部，才触发拉动切换下一场

本篇文章的关键就在此：1. 保证滑动到可以看到底部/顶部文字；2. 滑动到底部才触发跳转链接

这里关键使用的就两点：距离触发&触发对象替换

先说触发对象替换，刚刚已经试过了，如果直接使用拉动跳转，那么只能操作一次拉动，principle并不能识别用户是拖动还是滑动（不知道能不能改priciple代码，定义拖动&滑动）。在principle无法识别时，就需要有个对象帮助它区分。这个东西就是「万能方块」。

再来说说距离触发，刚其实已经有提到，可以通过调节Drivers，控制物体在特定位置显现与消失。

聪明的小伙伴可能已经懂了。没错就是通过调节Drivers，控制物体在用户滑动到底/顶部时，显现「万能滑块」，用户拉动万能滑块触发拉动跳转交互，具体操作如下：

    a. 给「内容1」添加「万能方块」，方块大小根据用户正常滑动热区定，尽量避开常用热区，保留一点点交叠。

    b. 给「万能方块」添加根据「内容1」移动距离显示的关键帧，滑动到底部出现「万能方块」，但目前的万能方块并不支持拖动，所以我们还需要给「万能方块」添加「滚动」效果，方法同第2步。

    c. 这里是希望「万能滑块」被拖拽时，「内容1」也能跟着做相同距离的移动，所以这里就要反向联动，方法上面也有讲过，直接看图解和效果吧。

    d. 因为之前文字是跟着「内容1」里面的内容联动的，所以这里需要调整一下，复制文字，分别跟着「万能方块」「内容1」联动，这样就能够看到文字的渐显了。

    e. 然后就是给「万能方块」添加拉动跳转，并调整「万能方块」的颜色为透明（PS：颜色透明是可以操作的，整体透明是不可操作的）

到此，就都做完了，看一下最终效果吧

四. 滑动&拉动切换组件使用3步教程

这里还是以京东为例

1）导入UI画好的高保证原型切图，调整图片/方块大小，使其保持一致，这一步主要是保证方块和组件大小的匹配，所以调整哪个都行，整体布局不变就好。

2）调整移动距离数值/「万能方块滚动」的高度和宽度，确保触发流畅。这里需要根据大家自己放置的切片量调整，可以参考之前做组件的思路设置数值。

下载链接：https://mp.weixin.qq.com/s/pO9smrUYK1_5MaMfn0X1EQ

五. 总结

今天的经验分享就到这里了，第一次纯自己探索出方法，做动效组件并分享给大家，如果觉得有用就点个赞吧。

可能有的小宝贝喜欢直接拿别人的动效给开发讲需要什么样的效果，但是我觉得还是做过尝试后进入开发才更能提高效率和开发工作积极性。走查的时候放上「优化方案.gif」，也是很拉风的呢。