如图所示，随着向上滑动，“全部播放”这个列表去到屏幕顶部的时候被固定住了。这个效果可以抽象成以下这个描述：页面中间的某一部分内容随着位移的改变，随后在某个位置固定下来。这也是本教程的思路，细想一下，其实和 AE 是相似的操作，只不过 Principle 更加简单或者说轻量化。这个教程教大家怎么使用 Principle 来制作这个效果。那 Flinto 能否制作该效果呢？在经过研究之后，我认为目前还做不到。

第一步：整理图层分组

首先我们对页面的布局要非常清楚。我设计的页面大概把它分为了三个部分。顶部的信息，中间的固定栏，底下的可以滑动的列表。

第二步：设置滚动组

在同时打开 Sketch 和 Principle 的情况下，点击 Principle 工具栏的 Import 按钮，把该页面导进去。之后在 Principle 里用形状工具创建一个和屏幕一样大的矩形，设置背景色为白色，置底。这个图层将被用来作为滚动组使用。

第三步：打锚点

1. 选中“全部播放”列表这个组件，点击 Drivers。此时位置为 0 。

2. 点击小加号，选择 Y ，此时 0 的位置会出现一个小蓝点。

3. 在 Drivers 区域拖动浮标，直到“全部播放”列表到达屏幕顶端，此时再点击小加号打点。

4. 继续拖动浮标，直到全部列表消失，再打点。

第四步：调整位置

在最后一个锚点的状态下，把“播放全部”列表的位置放回到屏幕顶部，细节稍微调整一下就可以了。接下来便完成了整个动效的制作。

最后

本教程非常简单，可以说通过这个动效的制作，既使得我们基本掌握了 Principle 的一个关键用法（Drivers功能），也能够给予大家一个制作动效的启发。希望本教程能够直接或间接地帮助到大家！