下来刷新，还要加载数据，Principle也可以做到。
Principle 教程系列最终章，教大家做一个『下拉触发 Loading 加载数据』的效果。
以后有好玩的效果，随缘更新。
效果如下
首先看下我昨晚这个效果之后， 在 Principle 的内容呈现：
这个内容有个有意思的地方：除左右两个图以外，中间的图（第 2—8 张）除了 Loading 那个小球上下位置不同，其他东西都是一样的。
而这第 2—8 张就是为了那个小球上下跳动的效果存在的。
注：所以我不怎么推荐用Principle做过于精细的交互效果。
教程正式开始
其中有些效果在之前的文章已经讲过，就不再赘述。
一、下拉联动
当列表下拉时，『空白块』同时下滑，为了让下滑效果更舒服，我调的参数是：列表下拉 100，空白块向下移动 70。
原本『空白块』应该在顶部栏背后，为了效果更清晰，我把他放最上层了。
另外在列表滑动时，小球是不动的。
二、下拉进入预备加载状态
这里用到一个效果：Scroll Released（滚动释放），即下拉放开的时候，触发效果。
第二个页面从第一个页面复制而来，复制完成后，调整内容的位置。
1、列表里的块向下移动一定的距离。（不是整个组，而是组里的块。蓝色是滑动组的位置，块相对组向下移动的了一些距离）
2、将空白块和小球滑动指定的位置。
3、点击第一个页面的闪电按钮，激活『Scroll Released』效果连接到第二个页面。（然后效果就出来了）
三、小球 跳动的动画
将第二个页面复制6个。然后调整小球的位置，如下图一样，一个在上，一个在下。
继续，给面板加 Auto（自动）效果，这个效果的作用是，跳转到该页面后，会自动跳转到下一个页面去。
对了这里应为小球有上下的变化，为了让他更像是跳动的效果，需要调整他的动效曲线。
我用的曲线：左边是小球从小到上时的曲线（从快到慢）；右边是小球从上到下的曲线（从慢到快）；
还原我们现实生活中物体的运动轨迹。
四、加载出新的模块
将最后一个Loading效果模块，再复制一个页面，然后在下面的列表中复制一个卡片，将原来的『白色块』删除，将新复制出来的卡片命名为『白色块』（图中选中的两个块同名），然后调整位置。
小绿球呢？
其实小绿球还在图中，不过，他的透明度已经变为了 0 。
同样的补齐 Auto 效果。
OK，到此整个效果就做完了。
如果做的过程中遇到什么问题，你可以加我微信：tianlan1025
Principle教程系列到此结束，接下来会认真的写一些产品设计相关的内容。
以上
系列文章：
