Principle套圆引导页动效教程

之前在dribbble看到Cuberto团队发了这么一个引导页动效，感觉非常有趣，不过当时在想他用principle是如何实现的呢？这款软件又不能3D翻转…

https://dribbble.com/shots/8935861-Onboarding-animation-Made-in-Principle

后来啊，被我摸索出来了。凭借principle障眼大法，基本还原了原作的交互效果(emmm...过渡貌似不如原作丝滑)，与其说这是一篇教程，不如说是一次UI动效的探索过程，分享给有缘人～

按照国际惯例，先上最终效果

难点

自然是按钮和背景的转场变换了

思路

按钮和背景的转场可以用两个圆通过缩放和拉伸变换得到

第1步 - 小白圆向右扩大

第2步 -大白圆向左压扁，大橙圆压扁同时与大白圆位置重合，橙色遮照防止大橙圆压扁时露出画板底色

第3步 -大橙圆向左拉宽，同时橙色遮照向左移出画板

第4步 -大橙圆缩小，同时移动到小白圆初始位置

这样就可以得到一次页面切换，再次切换只需要重复这个思路就可以了

Sketch视觉稿

sketch文件会分享给大家，画了几个体育icon，当然你也可以用自己的图形。打开源文件我们先查看一下图层，每个引导页包括：

1.skip跳过文案，文本图层导入principle会变成位图，无法进行文字颜色的变化（即使转曲也不行哦），所以这里只是参照，需要到principle画板中重新输入一下文本

2.页面内容图层组，其中包括主图形和文案，因为动效中这部分是整体位移变化，所以打组并加了扁平化命令principle flatten，导入principle后整个组会合成一张位图，图层可以更精简

3.页面按钮上的箭头

4.页面按钮

选中页面ABC三个画板，然后打开principle，点击导入，选择导入选中的画板

大圆画板是干嘛的，为什么不导入principle？

因为sketch的圆形导入principle后会变成一个最大圆角的正方形，在进行缩放变换的时候既要调宽高，还要调圆角，才能保证它始终是个圆，并且无法使其拉伸变成椭圆形；不过把圆cmd+c/cmd+v复制到principle中变成位图，就不会出现这种问题

Principle图层调整

上面提到导入后的个别图层需要调整

1.按照sketch中的参数重新输入一个Skip文本图层，导入的Skip层就可以删掉了

2.从sketch大圆画板中复制白圆粘到principle，调整位置和大小，替换掉页面A按钮图层

3.从sketch大圆画板中复制橙圆粘到principle，调整位置与白圆居中对齐

现在画板页面A变成了这个样子

好的，准备工作算是弄完了，接下来就是一顿操作见证奇迹～

1.选中画板[页面A]中的白圆，给他一个点击(Tap)事件并复制出画板[页面A 2]，修改画板[页面A 2]底色为白色并删掉其中的页面A箭头，[页面A]中的箭头拖入白圆，让白圆作为箭头的父级，[页面A 2]中的白圆大小改为2000x2000，并与橙圆顶对齐，然后将内容层向左拖出画板

2.点开[页面A]到[页面A 2]之间的动画连线，第一个填充变化，就是画板底色的变化曲线，改为无动画。其他的曲线时长改为0.2s，并将白圆的位置、宽高四条变化曲线改为线性(Linear)

3.给画板[页面A 2]一个自动(Auto)事件并复制出[页面A 3]，将[页面A 3]中白圆的宽高锁解开，宽度调为0，记录下他的水平位置x=142。将橙圆宽度也调为0，水平位置142

4.在画板[页面A 3]底部画一个橙色矩形，色值与橙圆一样，其他参数如图

5.点开[页面A 2]到[页面A 3]之间的动画连线，将橙圆的位置和宽度变化曲线变为线性，时长同样0.2s

6.给画板[页面A 3]一个自动(Auto)事件并复制出[页面A 4]，将橙遮照向左移出画板，橙圆宽度拉回2000，水平位置-1818

7.点开[页面A 3]到[页面A 4]之间的动画连线，橙遮照的曲线调为线性0.1s

8.给画板[页面A 4]一个自动(Auto)事件并复制出[页面A 5]，橙圆变为一开始白圆的状态(宽高91，水平位置142，垂直位置621)

9.点开[页面A 4]到[页面A 5]之间的动画连线，将橙圆的所有曲线调为线性0.2s

10.将[页面A 5]中的skip字体颜色改为蓝色#7540EE，把导入的画板[页面B]中的内容和箭头、以及sketch中的蓝圆复制过来，注意图层顺序，蓝圆调整宽高和位置覆盖在橙圆上面

11.现在画板[页面A 5]其实就是引导页的第二个页面，导入的[页面B]可以删掉了，[页面A 5]重命名为[页面B]，把页面B内容复制到[页面A 4]中，并向右移出画板，蓝圆也复制到[页面A 4]中，不透明度和比例调为0，[页面B]中的箭头拖入蓝圆作为子级

12.点开[页面A 5]到[页面B]之间的动画连线，文本、页面B内容和蓝圆的曲线时长都调为0.2s，并且起点移动到0.1s处，蓝圆的曲线为线性

做到这里预览一下效果，第1-2页的转场动效就做完了！

[页面B]要往下进行还差一个大白圆，复制一个白圆2放在底部，这时文本/页面B内容/蓝/白 2这四个图层就与画板[页面A]的图层对应上了

接下来就可以按[页面A]的12个步骤往下做了，相信聪明的你可以举一反三做出后两页转场，有几点需要注意一下

1.[页面B 2]画板底色是蓝色，[页面C 2]画板底色是橙色

2.[页面B 3]中的小橙圆和[页面C 3]中的小白圆已经没用了，删掉

3.Skip在[页面C 2]不透明度为0，在[页面C 5]不透明度回到100

4.给画板[页面C 5]一个自动(Auto)指向[页面A]，之间的动画曲线全部设为无动画，形成循环

如果哪里做的有问题，检查一下是不是图层命名和之前画板的图层冲突了，或者曲线没调好～

当然，如果你有不明白的地方或者有更好的实现方法，欢迎在评论区交流

感谢阅读

作者：咖喱l波特

转载请联系我