先来看一下成品，理清功能和逻辑之后，其实并不复杂。

1. 内容布局

2. 交互式动画

1. 列出并复制更改

2.下拉刷新时文字及小脸显示与隐藏的变化

3.天线和无线电波动画

4.小脸表情动画

1. 内容布局

您也可以下载附件跳过布局并直接开始制作交互效果。

新建一个Fill，然后按+g创建一个名为list的组，这个列表就是需要下拉的内容，列表高度可以自由设置，取决于你列表的内容量，不过最好设置在最上面。

为该栏创建一个新的背景，并将其命名为组顶部。

然后在组中创建两个圆角矩形作为天线，x 分别为 14 和 -14。然后选中这两个圆角矩形，创建一个组并将其命名为天线，并将它们放置在合适的位置。

然后创建两个圆角矩形作为无线电波圆圈，，，-，-，创建一个组并命名为无线电波，，，，并将它们放置在适当的位置（圆角矩形的中心在天线顶部）

接下来是小电视的脸部。直接创建一个，然后在里面创建两个圆角矩形作为眼睛。x位置分别是10和-10，z位置分别是20和-20。嘴巴在中间创建完之后复制进去。很简单。

暂时忽略笑脸组，然后使用以下设置创建文本：

然后同时选中小脸和文字，创建一个组，命名为，并将它们放置在合适的位置。

在组外新建一个文本，并设置如下

至此界面内容设置完毕

2. 交互式动画

1. 列出并复制更改

第一个集合列表 y 0, y -200

选择list，点击y，选择交互方式，可以看到列表y出现在屏幕上，此时可以在模拟器中上下拖动列表。

接下来我们需要将列表下拉超过一定距离，释放之后，列表会在 60px 处暂停 2 秒，以模拟数据更新。

首先在界面上按回车，找到它，把它连到端口上，修改最后一行参数为60和jump to，然后按住jump to y看看，这就是我们需要的暂停效果。

我们需要判断列表下拉>60px，松开后跳转到y哔站下拉，2秒后取消，我先跟大家说这个不是完全正确的，但是先一步一步来吧。

→ 比（快捷键 +>）→ (+s) →

为了让界面简洁干净，我使用了信号发射器和接收器，用来代替连接线。快捷键w=信号发射器，+w=信号接收器。

我们去模拟器上看一下效果，列表拖拽到60px就会触发跳转y，之后就不能再拖拽了，显然这是不对的。而且完成后仔细看下拉刷新，下拉>60px然后放手是不会触发2s刷新的，需要继续下拉>140然后放手才会触发。因为B站的下拉刷新在60px-之间有一个天线伸出的过程，当天线完全伸出后（也就是列表下拉>）放手才会触发2s刷新，在>140之前，放手只会触发跳转至y0.5s。

搞清楚逻辑之后我们不断的修改完善，首先解决下拉释放后才能触发判断的逻辑。

down+not模拟释放列表，释放列表后，列表缩回，当列表y等于60px时，满足判断逻辑，触发跳转到y。

您可以尝试将其改回。

然后设置暂停时间

松开手之后触发跳跃y，并触发0.5s的延迟关闭跳跃y。

显然是保留判断0.5s的停顿（140）

当输入1时，输出左边第二个参数，当输入0时，输出左边第一个参数，这里用到了开关信号0-1哔站下拉，当列表下拉>140后松开，开启并输出1，这样列表就能暂停2s，如果小于140，则不满足判断条件，默认暂停0.5s。

手动释放信号发射器非常有用。

接下来我们添加栏目变化以及下拉刷新时的下拉提示文字

首先，我们需要跟随列表的移动，因此我们只需匹配位移即可。

提示文字的位移稍微有点不一样，因为并不是一路跟着列表走，而是在列表下拉的时候才开始动，之后就不动了。所以不能直接连接and，而是加上cilp，这个cilp是把100-140的振幅转化成0-1。如果还是不明白，可以试试把cilp去掉，再拉下列表看看。

更改文本要简单得多。只需在列表下拉到大于 140 的大小时进行切换即可。

天线下拉时的展开效果和天线摆动的动画有关，所以后面会做。

到此为止，下拉过程中的变化已经完成。接下来，在松开手之后进行一些变化。

2. 手指下拉、释放后文字变化及小脸的显示与隐藏

上部显示释放后，如果列表 y 大于 10px，则该组正在更新，如果列表 y 小于 10px，则该组被隐藏。

下面的部分是，松手之后，如果列表 y 大于，则文本变为“正在更新”，并显示一张小脸。

松开手指后，若列表y等于60px，则1.8s后文字变为“更新完成”关键词搜索引擎工具【64xl.com做下拉框网站】，详细解析 patch 制作：从内容布局到交互动效，小脸隐藏。

看一下目前的结果，如果你的结果跟我的有一点点不一样，或者有些效果达不到，那就检查一下是否有逻辑错误或者参数错误，一步一步检查，不要心急。

3.天线和无线电波动画

3-1 无线电波扩散动画

无线电波的扩散是两两一组的，中间有明显的停顿。

循环动画的核心是连接逻辑：

→→尺寸→ 尺寸

→→剪辑→→

具体参数：in3、out、end分别为300、150，end为0.4、.4。

循环信号从0到1变化，为0时，无线电波圈宽高为0，不透明度为1；为0.4时，不透明度为0；为1时，宽度为300，高度为150。

另一个圆的动画参数相同，相加可以使两个圆的动画错开。

现在扩散间隔太长了，所以需要增加判断，然后

→ 比→等待→

控制动画的开始和结束。动画将在列表下拉时开始播放 > 140

3-2 天线摆动动画

然后动画开始并结束

但是天线两次摆动之间需要有一个停顿，而这个不能通过判断是否大于140来解决，需要一个计数器。

这里解释一下逻辑，列表下拉到>140之后，天线开始循环动画，通过判断天线的摆动角度，每摆动到0度就计数一次，用于计数，因为初始值为1，所以当计数输出等于3时，循环动画就停止了，此时因为jump口接在了前面的无线电波循环动画中的wait，所以暂停0.4s后重新设置计数，这样天线和无线电波的动画就可以匹配了。

至此，天线和无线电波下拉时的动画就完成了，但是天线下拉时还有一个过渡效果需要进一步完善。

我们回到上一点，当列表下拉时，天线从 60px 开始慢慢竖起，直到完全展开，所以 60，结束 140。

然后返回天线环动画并将天线转换的左、右接收器连接到第二个数据端口。

之前解释过的函数，这里我们通过列表下拉距离来确定不同参数的输出，这样就能实现下拉时的转场以及下拉大于140时的摆动动画。

4.小脸表情动画

前者是in-out，后者也是in-out，其余参数如上所示。

右侧的连接是相当标准的动画逻辑，→动画曲线→过渡→属性。

左边是动画循环播放的逻辑，当循环信号 = 1 时，动画开始播放（眯眼），0.1s 后动画倒放（睁眼），这里的 0.4s 是每次循环的间隔。

然后是动画开始和停止的控制

解释一下，当列表下拉到大于或等于 0 的值并且用户放手时，输出信号为 1 并且循环动画开始。

当列表等于60时，松开手，循环动画延迟2秒后停止。

最后，完成下拉刷新动画

最后，我发现制作的时候还是很难用文字复述自己的想法和思路，所以有步骤没讲清楚的地方还请见谅。有些连接不明白的话，可以试着断开连接，然后一步步试效果，就像电路排错一样。我刚开始学的时候也是下载了官方的demo，一点一点摸索出来的。当然，比起使用，逻辑思维更重要。