这一期我们来实现官网的第三个礻例先看一下效果。
我们来分析一下这个动效的整个过程：
- 电脑打开页面不是全屏跳转跳转时元素位移有时间差；
- 当前电脑打开页面鈈是全屏出现其他模块。
本期大部分的技巧之前两期都有介绍接下来我们就拆分成三个实例来制作（为什么拆后面会说）。
首先是实现電脑打开页面不是全屏内容上下滚动以及单图浏览在滚动的同时让标题栏也有一个联动的收缩效果。
实现电脑打开页面不是全屏跳转哃时让目标电脑打开页面不是全屏的元素出现有时间差。
在当前电脑打开页面不是全屏出现其他模块
还是和往常一样，先在sketch里面画好图層并命名好毕竟Principle不是专门的画图软件。
Tips:在Sketch里面做图时不需要把每个画板上的所有元素都画好重复的图层和编组可以在Principle里面复制，避免混乱
给对应的图片图层增加阴影，我是给四个头像图层增加阴影纯粹为了好看，可以忽略这一步不过有一点需要注意：
Tips：Principle是不能继承Sketch里面带Mask编组的任何阴影属性的，带有Mask的编组的阴影属性会被当成图像的一部分转换成一张图片图层。
根据实例可以看到card滚动的同时会帶动标题栏高度的收缩所以card编组的top边界应该为标题栏收缩后的bottom边界，所以我们需要调整card的大小
Tips：Principle的编组里，直接在左上角的属性面板裏面对编组的X、Y、Width、Height做调整会带动变图内的元素一起改变位置。若想使编组内的元素保持位置不变则需要直接在画板内部调整编组的夶小。
底边留了10个单位的高度出来是为了拖到底部时卡片和底部有一个间距这10个单位也是卡片之间的间距。
打开Artboard 1上的Driver在0、40（bg title高度的一半）位置分别给text title添加Y属性变化节点，同时在这两个位置给bg title添加Height属性变化节点并在节点上调整二者的属性。效果如下：
可以发现效果并不昰我们想要的样子这是因为：
Tips：当图层或编组的Width或Height发生变化时，其变化的参考点是图层或编组的中心点而非左上角所以其对应的X或Y也會发生变化，因此若要固定一边进行变化需要将对应的X或Y也编辑上。
给bg title添加Y属性变化节点在0和60位置上都为0，看下实际效果：
Step 3 制作单图瀏览效果
在实例中可以看到点击后的单图浏览效果，是出现遮罩同时图片进行放大居中头像也会有一个渐隐渐现和位移的效果。
所以這里我们先要添加一个和画板等大的cover 1置于所有图层之上，设置0%的Opacity然后复制画板。
会发现效果有点怪图片消失的那一下有点闪，过度嘚并不自然这是因为在Artboard 1上，pic r和head r是在cover图层顺序之下的
Tips：Principle中画板里面的图层的顺序调整是做不到动画过渡的，而且图层顺序的调整会在交互发生的那一瞬间就切换成目标画板的图层顺序
比如刚刚我们做的，在Artboard 2上点击pic r时这时候Artboard 2内的所有图层顺序都直接变成Artboard 1的图层顺序，pic r和head r嘚动画效果实际上是发生在cover 1下的所以实际效果看上去pic r会闪一下。
有一个办法可以解决这个问题就是我们建立一个和pic r相同属性的pic r 2，让pic r 2一矗置于cover 1之上
这样就实现了比较自然的过渡效果。
在实例二中我们实现的是一个电脑打开页面不是全屏跳转的效果，主要的效果是一个え素的渐隐渐现以及位移顺序的时间差因此我们首先要统一Artboard 1和Artboard 3中的元素数量。
因为card和title在目标画板中不透明度都为0%而且仔细观看实例中，动画有一个先后的顺序所以在Artboard 3中card和title的图层顺序就无所谓了。
Step 2 建立跳转链接调整动画先后顺序
为了实现实例中的先后效果，我们需要對两个交互链接分别进行编辑
r形状和位置变化，最后card和title出现看下效果：
会发现，如果按照这个步骤编辑最后返回时的动画是有问题嘚。因为在Artboard 1上pic r和head r是属于编组card的，而card在这个交互链接中是Opacity由0%变为100%因此在最终的效果中我们看不到pic r和head r的形状和位置变化效果。
要解决这个問题我们就要换个思路，即不是让card这个编组去进行不透明度的变化而是让card内的元素自己去进行不透明度变化。
在实例三中我们也是艏先要实现Artboard 3上面content滚动带动顶部pic r和head r变化的效果，这个同实例一中的原理一样这里就不复述了，直接看一下实际效果：
Step 2 制作底部弹窗效果
实唎三中出现了一个底部弹窗弹窗内的方块可以左右滑动，这个同样是通过给编组设置水平滚动然后调整编组位置和大小实现的同时icon add会發生一个旋转和位移。这一步的动画原理之前都有讲过所以这里就不上步骤图了。
我们先在Artboard 4中将方块的编组pc制作成水平滚动效果同时給icon add添加45°的Angle，并调整位置
然后在两个画板上分别给icon add添加Tap交互链接到对应画板。
我们会发现在返回的这一步中，icon add在Y轴上的动画看上去有延迟我们去Animate找一找原因。
会发现在实例二的效果中icon add在跳转电脑打开页面不是全屏时又是先出来的。这是因为：
Tips：Principle中当编辑Animate时，若目標画板的某个元素的某个属性变化曾经出现在别的画板链接到目标画板的交互时那在这次的交互中，该元素的那个属性变化会被继承苴两边会保持联动。
这样可能有点难理解我们来举个栗子。
假设Artboard 2是目标画板那么在Artboard 1到Artboard 2的交互A中，- -"是发生了X轴和Y轴上的位移如果这时候我们在Artboard 3上给- -"添加Tap交互B链接到Artboard 2上，那么- -"在Y轴上的属性变化会继承交互A中的Y轴属性变化如果在交互B中对- -“的Y轴属性变化进行编辑，则相应嘚交互A中的也会一起改变
这时候再回到之前实例一的交互中，演示的时候会发现图片消失的动画也出错了。
因此以后各位在做类似demo的時候如果一个画板牵扯的元素过多，且不同交互你需要的动画效果不一样是最好是分开两个画板去做，不然就会出现以上这种情况
切忌，Principle因为没有条件判断所以不适合做特别复杂且路径长的demo，如果只是为了演示可以将demo拆分。
本期就到此为止下一期教大家实现几個banner的轮播效果。
非常感谢您的阅读您的支持是我最大的动力！
