交作业：#优设每日作业#
这篇文章是关于Principle的冷知识，也是上篇文章Principle教程！轻松玩转路径动画的进阶版本，相比AE和Protopie而言，它的功能略显逊色，但上手门槛很低。
因为它的使用思路更像Keynote：
只要两个画板里的元素命名一致，属性变化就会自动产生神奇移动（补间动画）效果。直接的联动功能也能够做出相对复杂的交互动效。
文章较长，Gif图较多，加载会慢一些，建议PC端观看。
先来看下通过阅读完文章后都能用Principle做什么效果：
自动跳转属于基础功能我们并不陌生，在做莫呕血可循环交互效果时经常使用。
例如上一篇文章中的小狗尾巴摆动等等，下面的案例都是通过自动跳转完成的。
这个定位扩散波纹的灵感是受@大宝蛋 作品文章的启发，通常在打车定位时常出现的情感化动画。
先在Sketch里提前整理好图层命名后导入Principle（3个圆环由内到外分别命名为0、1、2、3）。
效果只需模拟现实生活中的水波纹「由内向外扩散」，也就是圆环「0」到「1」、「1」到「2」、「2」到「3」的位置，在扩散的途中透明度逐渐衰减，最外圈圆环直至透明消失。
第一步，当我们理解了位置关系后就要用到自动跳转事件，指向回当前画板，复制出一个一模一样的画板来。
（图1 圆环由内到外 命名数字递增）
（图2 添加自动跳转事件 复制出新画板）
（图3 调整最外圆环透明度 预览效果）
第二步，调整画板2里图层的命名：「1」修改为「0」、「2」修改为「1」，「3」修改为「2」；修改两个画板的最外层圆环的透明度为0；
在动画面板「Animate」中修改动画时长和动画曲线（建议为匀速）直至视觉舒适即可。
（图4 调整画板2命名 调整动画时长及曲线属性）
第三步，想要无限循环下去，就要再次运用到自动跳转事件，下面有两种方式可实现。
（1）给第二个画板添加自动跳转事件指向到第一个画板，在动画面板里全选动画时长，修改动画属性为无动画「NO Animation」，就能达到无限循环的效果。
（2）给第二个画板添加自动跳转事件，复制出新的画板。修改新画板里的圆环命名，改为之前画板从未出现的命名即可，再将新画板再次添加自动跳转事件指向到第一个画板，也能实现无限循环效果。
（图5 方法1 自动跳转回之前画板，跳转动画属性为「无动画」）
（图6 方法2 自动跳转复制新画板，调整新画板素材命名，再次自动跳转回画板1）
两个原理分别是：
1.通过动画曲线属性来实现「无动画」
2.调整素材为不同命名，使得丧失动画属性。
前者更加简洁明了，后者更通俗易懂，最终效果在这里例子中都是一样的。
总结：
1.两个画板内命名一致且属性不同的图层就会发生动画，利用这个特性通过自动跳转事件加修改图层命名从而可以快速达到想要的视觉效果；
2.想要使得动画无限循环起来，也需要自动跳转回第一个画板，方法有多种但重要的是理解其原理。
理解了基础波纹后，进阶一些只需要单独控制每一个圆环的扩散即可。
还是先将Sketch素材命名后导入Principle，设想一下要得到的效果，圆环逐一放大同时逐一衰减透明度，按照这个设想，我们先来完成单次动画，实现后再将它循环起来。
第一步，先选中命名「1」的圆环，点击Create Component 组件按钮，建立组件1。
第二步，在组件中给当前画板1添加自动跳转事件，复制出画板2； 将画板1内圆环比例进行缩放「Scale」调整到合适大小，然后降低不透明度「Opacity」到0%；接着调整画板1与画板2之间的动画时长到合适即可（例如0.5s）；
到这里第一个扩散至透明就完成了，返回实例看下效果。
（图7 创建组件 -- 调整比例&透明度 -- 调整时长）
第三步，给画板2添加自动跳转事件，得到画板3，将画板3内素材透明底「Opacity」调整到0%，调整画板2与画板3之间的动画时长到合适效果（例如0.5s）；
第四步，制作第二个圆环效果，选中命名「2」点击Create Component组件按钮，建立组件2.
后面具体细节与组件1基本一致，一系列自动跳转后一共得到3个画板，分别调整比例透明度等，不同处在于画板1与画板2之间动画时长的起始位置。
在组件1中第一个圆环触发动画起始位置从0s开始，组件2的圆环应晚于组件1中的圆环出现，所以将整体动画时长的起始时间往后拖（例如往后0.25左右，具体效果自己调整至满意即可）。
（图8 自动跳转得到画板3 -- 调整透明 -- 调整时长）
（图9 组件2 中 动画起始时间向后拖动，使得晚与 组件1 出现）
第五步，制作第三个圆环效果。方法与上面一致，区别还是在于组件内画板1与画板2之间的动画时长起始位置。
第三个圆环应晚于第二个出现，所以将画板1与画板2之间的动画时长起始位置拖至组件2触发事件之后（例如0.5s），返回实时预览效果，就可以得到单次的注意扩散效果。
那如何让它循环起来呢？
我们可以先保存个备份，因为下面会降到2个方法。
（图10 组件3 中 动画起始时间向后拖动，使得晚与 组件2 出现，返回实例预览效果）
这里大家会问「直接把刚才每个组件再用自动跳转，变成循环动画可以吗？类似上面的案例。」
例如1.8s为一个整体的循环。
需要将3个组件中的第三个面板都自动跳转回第一个面板，然后将调整后的动画时长属性调整为无动画「NO Animation」；
接着调整无动画属性的起始出发时间，这里需要分别计算每一个组件中的动画总时长，使得无动画的触发位置与当前组件中其他动画时长加起来的总和等于1.8s。
（图11 分别调整组件内 画板3 跳转回 画板1 后，无动画触发时间）
例如：
组件1，画板1到画板2总时长为0.5s，画板2到画板3动画总时长为0.5s，那画板3跳转回画板1中的无动画触发时间应调整为0.8s的位置，即1.8-0.5+0.5=0.8s
组件2，画板1到画板2总时长为0.5s，但开始时间延迟0.25s，画板2到画板3动画总时长为0.5s，那么画板3跳转回画板1中位置应该是0.55s，即1.8-0.5+0.25+0.5=0.55s；
组件3，画板1到画板2动画总时长为0.5s，但开始时间延迟0.5s，画板2到画板3动画总时长为0.5s
但我数学不好，不想算加减法，有没有更简单更无脑的操作？
有！这篇文章就是想让大家简化Principle的使用。
我们回到刚才单次动画完成效果。
只需要给最外层实例中的画板添加自动跳转事件，指向回自己松手复制得到画板2，现在两个画板的内容是一模一样的，展开动画面板「Animate」，会发现里面没有任何可供操作的东西。我们需要在画板1中任意画一个色块，复制这个色块到画板2，在画板2中调整色块的位置，调整后再看动画面板，就可以控制这个色块的动画时间属性了。
只需要调整色块位移时长，就能快速控制整体的循环时间。
调整完成后将画板2添加自动跳转事件复制出画板3，将画板3内组件与色块全部删除，最后将画板3自动跳转回画板1即可。
（图12 简易方法 不用计算时长、不用单独使组件循环）
这个方法比逐渐调整组件为循环的思路要简单，也方便后期快速调整整体循环时间。
总结：
进阶的扩散动画也是通过自动跳转事件配合组件功能来实现，理解原理后其实发现并不难，只需动手前先思考最终效果，通过软件现有能力结合基础知识得知护使用，大部分效果都是可以做到的。
纯靠自动跳转完成的动画还有这个小机器人旋转的小例子，这个例子是收到@孔晨Point_Vision文章的启发，用Principle来做没有什么技术含量，只需要自动跳转后调整图形的宽度和位置以及图层关系即可。
第一步，先将命名好的Sketch文件导入Principle，我们给当前画板1添加自动跳转事件，指向回自己松手复制得到画板2。
（图13 添加自动调整 得到画板2）
第二步，得到侧面。
在画板2中调整各个身体部件的位置、宽度和图层顺序，使得机器人视觉效果旋转到侧面，并且遮挡关系正确（例如旋转到侧面，一只天线耳朵在头的后面被遮挡，一只在头的前面也就是上面）；
接着调整动画时长和动画曲线，这里建议动画为匀速的线性「Linear」属性，后面旋转起来会更加流畅。
（图14 调整 画板2 内图层宽度&图层遮挡关系）
第三步，需要旋转到正背面。
这里我们选中画板1，按住option键拖动至画板2后面复制出画板3；
因为需要得到的视觉效果为正背面，我们只需要调整部分图层顺序的遮挡关系，再将画板2自动跳转到画板3，跳转动画时长和动画曲线这里依然调整为线性「Linear」。
（图15 按住⌥拖动复制出画板3 -- 调整图层顺序 -- 添加自动跳转）
（图16 调整动画属性为线性匀速 -- 调整动画时长）
第四步，需要得到另一个侧面。
跟上一步一样，我们可以选中画板2，按住option键拖动至画板3后面复制出画板4，调整图层遮挡关系及位置，并将画板3自动跳转到画板4，调整动画时长。
（图17 按住⌥拖动复制出画板4 -- 调整图层顺序 -- 添加自动跳转）
第五步，转回正面。
只需要将画板4自动跳转指向画板1，然后调整画板1内图层遮挡关系使得转回来时遮挡关系正确即可。
（图18 自动跳转回 画板1 -- 调整图层遮挡关系 -- 调整动画曲线及时长）
总结：
核心在于自动跳转后调整图层顺序使得遮挡关系正确。
在动画面板中熟悉均匀的线性「Linear」属性，多个画板自动跳转想使得其最连贯最简单的就是线性属性。
上一篇文章其实深度讲解了Principle旋转相关的知识，但除了简单的旋转遮罩外还能玩出新花样。
例如这个模拟设计师Gal Shir的作品，就是在上篇文章的基础上更进阶一些。
首先我们要先在Sketch里做好所需元素（足球圆形，足球纹理，厚度阴影，影子及所需圆环），命名后导入Principle。
第一步，做的是先把纹理图层放置在足球圆形的里面成为它的子集，再选中足球圆形图层，通过勾选「Clip Sublayers」裁剪子图层选项来达到蒙板效果。
（图19 使纹理成为“足球圆形”图层子集）
第二步，来制作旋转的「足球」。
这里需要先新建一个与画板一样大的正方形，然后将除圆环相关意外的全部图层都放置在这个正方形里面成为子集，再将新建的正方形透明度降低0（这样就能得到一个中心点在画板中间的文件夹）。
（图20 新建色块 -- 调整图层为子集 -- 降低色块颜色透明度）
第三步，给当前画板添加自动跳转事件，复制得到画板2。在画板2内调整刚刚建立好的正方形文件夹，角度为360度，调整时长为3s，属性为线性「Linear」匀速运动。
（图21 自动跳转 -- 旋转矩形360度 -- 跳转动画曲线/时长）
第四步，调整足球纹理使得旋转效果更加真实，在画板2中选中足球纹理图层，旋转180度，调整动画时长与曲线和刚才文件夹动画一致。
（图22 调整「足球纹理」角度 -- 调整动画时长 属性为线性）
第五步，通过圆环制作足球后拖尾效果。
具体方法和下面这篇文章中的手表表盘案例相似，可参考：
稍微不同的地方在于每个圆环都不需要旋转180度以上，默认长度是可见的（上篇文章默认初始是不可见完全从无到有生长出来）、调整出长度（旋转角度）的同时整体也旋转360度。
（图23 红色圆环为例 组件内部构造「具体可参考《Principle轻松玩转路径动画》」）
这一个简易的单次旋转就做完了。
如果想再增加细节：
可以将画板2中的厚度阴影旋转-360度，再给两个画板内影子图层都新建文件夹，调整文件夹中心点与足球圆形中心点一致，然后在画板2中也旋转-360度，同时调节厚度阴影与影子文件夹动画时长与曲线属性。
这样旋转起来「明暗交界线」始终保持固定位置。
（图24 给投影等图层增加动效细节「旋转-360度」 调整动画曲线与时长）
（图25 自动跳转回画板1 -- 调整动画为「无动画」）
想要循环起来，只需要将画板2自动跳转回画板1，调整跳转回的动画属性为无动画「NO Animation」。
总结：
自动跳转后旋转整体文件夹，但文件内素材可以通过二次旋转就回有意想不到的效果；二次旋转时，注意顺时针和逆时针的区别，得到的效果完全不同。文件夹裁剪自图层需灵活运用。
除了自动跳转外，裁剪子图层也是常用功能之一，但有些效果基础的裁剪子图层是实现不了的，需要借助图层自身的形状进行遮罩。
之前有朋友问这种音乐声波效果能否实现，我来告诉你可以实现，很简单。这个章节讲述的是遮罩，所以稍微开拓下思维，如何通过遮罩来得到这个基础的视觉效果？下面就带大家一步步实现。
第一步，先在Sketch内准备好所需素材。
（1）首先需要一个基础的CD碟片样式，然后我们来画声波效果。
可以先画一个长条，通过「旋转副本」功能得到如下样式，得到后合并为一个形状，调整颜色，可以命名为声波背景，留着备用。
（图26 Sketch内新建矩形 通过「旋转副本」制作声波背景）
（2）在Sketch内画出2个不同的音频波动后的面性形状。
（图27 Sketch内画出声波面形形状）
（3）新建两个与画板一样大的矩形，将刚才画好的两个形状分别通过布尔运算与矩形相减，得到镂空图层。将两个镂空图层颜色调整 与背景色一致，可分别命名为「遮罩1」、「遮罩2」。
（图28 Sketch中布尔运算与矩形相减得到镂空图层 -- 更改图层颜色）
第二步，导入Principle
第三步，给当前画板添加自动跳转事件，复制出画板2，调整画板2里两个镂空图层的旋转角度（一个顺时针一个逆时针）、CD的旋转角度（旋转角度可以大一些），调整动画时长与曲线（CD的动画属性记得调整为匀速线性」。
这样一个音频波动的效果就完成了。
（图29 添加自动跳转 -- 调整画板2内各素材角度 -- 调整动画曲线 时长）
总结：
实际在Principle里的操作很简单，只是单纯自动跳转后旋转，但前提是在Sketch里做足了图层的准备工作；该类型图层遮罩也有弊端，背景不是纯色会穿帮。
最近看到很多人发的作品都用到了这个异形底导，其实实际生活中的体验很少会用到这种类型底导，Principle可以很容易的快速制作出来。
第一步，还是先在Sketch中准备所需素材。
底板背景选中状态是镂空的圆，先在Sketch中做好。
重点来了，单独一个标准宽度的背景是不能达到我们切换时的效果，所以我们需要把两侧宽度增大。
（图30 Sketch中提前对异形底板做长度处理）
第二步，导入Principle
新建一个矩形，将异形背景放置在矩形内成为子集，然后将矩形颜色透明度调为0，勾选「Clip Sublyers」裁剪子图层选项。
（图31 新建矩形 -- 调整图层顺序 放置成为子集 -- 勾选裁剪子图层选项）
第三步，做点击事件跳转，点击到哪个Tab下，就将异形背景移动到那即可。
（图32 点击跳转后移动素材）
这里为了更有趣味性可以在动画属性里增加弹性，也可以调整Tab图标不同出现效果。
总结：
异形素材配合裁剪子图层功能可以得到很多创意玩法；
文章开篇横向声波滑动样式也是通过其原理制作。
常玩Principle的朋友，可能很早就看过一个源文件，是一个可交互的伪3D卡片效果。其主要原理就是通过联动控制遮挡层角度关系。
下面一张图带过，思维开拓就好。
对联动还不熟悉的朋友可以看看这篇文章：
（图33 通过联动控制遮挡达到3d效果）
总结：
与前面案例一样，都是通过顶层图片进行遮挡来实现视觉效果。
刚上手Principle的朋友在实际使用中经常会遇到一些问题，整理一些常用小技巧与大家分享。
有些案例中经常出现数字变化的效果，Principle能做么？
能做但是比较麻烦（能用AE的还是尽量用AE做，添加编号调整调整数字偏移就好）。
一般Principle能做两种数字变化效果，一种是递增，一种是滚动。
（1）滚动效果
第一步，可以在Principle内先打上一组数字，例如「0-9」，调整好数字大小后点Create Component组件按钮，建立组件。
第二步，在组件中，我们将文本进行编辑，每一组数字打回车直到你想要结束的数字，例如9。
(图34 添加自动调整 -- 移动位置 -- 调整动画属性及时长)
第三步，添加自动跳转事件复制出新画板，调整新画板内文本Y坐标，然后将两个画板都勾选上「Clip Sublayers」裁剪子图层选项。
通过控制动画时长可以模拟数字翻转，为了效果更加好看，可以在数字上层增加一个上下的遮罩渐变。
（2）递增效果
第一步，同理先在Principle内新建文本，调整好大小后创建组件。在组件内给当前画板添加自动跳转事件得到新的画板，在新画板内编辑文本的数字，使数字递增，重复操作直至想要结束的数字（建议不要0-9足够）。
第二步，在画板内任意画一个矩形，并复制给全部画板内。调整部分画板内矩形位置，使得两个相邻画板内位置不同。
第三步，调整每个画板之间动画时长（根据数字变化快慢需求调整动画时长），最后全部降低矩形颜色透明度为0即可。
（图35 通过自动跳转加色块位移实现数字递增）
总结：
1.数字从0到9的情况，数字不多时可以通过Principle做，但还是建议用AE制作后导出视频放入Principle里；
2.数字滚动效果可以直接用自动加位移，给组件画板增加「裁剪子图层」选项，数字递增效果可以通过自动跳转后新增色块，通过色块但位移控制递增时间控制。
（图36 给需添加拖动图层上层新建一个色块 -- 给色块增加拖拽属性）
在做某些效果，例如音量滑块时，最简易的方法就是给滑块图层添加拖拽属性，但增加玩拖拽属性后很容易滑动超出想要的范围。
解决技巧也很容易，就是在滑块图层上层新建一个矩形色块，给色块添加拖拽属性，打开联动面板，通过联动来控制滑块滑动范围，即便色块拖拽滑动超出范围也不会穿帮。
在我们使用联动动画时，水平或垂直任意一个方向给一个图层添加联动属性后，另一个方向在想添加相同属性联动时会发现属性是置灰状态。
我们只需要给想要控制的图层打一个组，给新建的组添加联动属性即可，调整宽高效果可以通过组的裁剪子图层来实现。
（图37 模型为网络来源）
（图38 通过联动 调整媒体时间）
Principle在4.0版本更新时增加来联动控制视频播放进度的功能，通过联动可以控制视频正放倒放或者旋转。（这里要感谢@Donorhe丶告知我这个功能是4.0版本上的～）
以上就是Principle障眼法揭秘的全部内容。
文章较长，大家挑自己认为有用的看。
案例都是些简单的小技巧实现的，所以文章的标题叫做「障眼法」，但实际工作中都是可以应急用到的。
有疑问或者有更好的方法欢迎随时在下方留言一起探讨，所讲的例子源文件都会附送。
想要来「优优交流群」和其他小伙伴一起学习分享吗？搜索 QQ 群：1105212050 进群暗号：优优的忠实观众
附件下载
| 文件名 | 文件大小 | 提取码 | 下载来源 |
|---|---|---|---|
| 源文件下载 | 17.30M | u4q2 点此复制 | 登录下载 |
非特殊说明，本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译，原作品版权归属原作者，转载请联系 @优优教程网 授权。
转载时请在文首注明，来源 UiiiUiii.com 及教程作者，并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
继续阅读与本文标签相同的文章：
发表评论 已发布 9 条