提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
如图所示,随着向上滑动,“全部播放”这个列表去到屏幕顶部的时候被固定住了。这个效果可以抽象成以下这个描述:页面中间的某一部分内容随着位移的改变,随后在某个位置固定下来。这也是本教程的思路,细想一下,其实和 AE 是相似的操作,只不过 Principle 更加简单或者说轻量化。这个教程教大家怎么使用 Principle 来制作这个效果。那 Flinto 能否制作该效果呢?在经过研究之后,我认为目前还做不到。
第一步:整理图层分组
首先我们对页面的布局要非常清楚。我设计的页面大概把它分为了三个部分。顶部的信息,中间的固定栏,底下的可以滑动的列表。
第二步:设置滚动组
在同时打开 Sketch 和 Principle 的情况下,点击 Principle 工具栏的 Import 按钮,把该页面导进去。之后在 Principle 里用形状工具创建一个和屏幕一样大的矩形,设置背景色为白色,置底。这个图层将被用来作为滚动组使用。
第三步:打锚点
1. 选中“全部播放”列表这个组件,点击 Drivers。此时位置为 0 。
2. 点击小加号,选择 Y ,此时 0 的位置会出现一个小蓝点。
3. 在 Drivers 区域拖动浮标,直到“全部播放”列表到达屏幕顶端,此时再点击小加号打点。
4. 继续拖动浮标,直到全部列表消失,再打点。
第四步:调整位置
在最后一个锚点的状态下,把“播放全部”列表的位置放回到屏幕顶部,细节稍微调整一下就可以了。接下来便完成了整个动效的制作。
最后
本教程非常简单,可以说通过这个动效的制作,既使得我们基本掌握了 Principle 的一个关键用法(Drivers功能),也能够给予大家一个制作动效的启发。希望本教程能够直接或间接地帮助到大家!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册