这一期我们来实现官网的第三个示例，先看一下效果。
官网示例
我们来分析一下这个动效的整个过程：
- 页面内容上下滚动；
- 单图浏览；
- 页面跳转，跳转时元素位移有时间差；
- 当前页面出现其他模块。
本期大部分的技巧之前两期都有介绍，接下来我们就拆分成三个实例来制作（为什么拆后面会说）。
实例一：
滚动加浏览
首先是实现页面内容上下滚动以及单图浏览，在滚动的同时让标题栏也有一个联动的收缩效果。
实例二：
跳转及元素出现时间差
实现页面跳转，同时让目标页面的元素出现有时间差。
实例三：
页面内出现其他模块
在当前页面出现其他模块。
开始
sketch作图
还是和往常一样，先在sketch里面画好图层并命名好，毕竟Principle不是专门的画图软件。
Tips:在Sketch里面做图时不需要把每个画板上的所有元素都画好，重复的图层和编组可以在Principle里面复制，避免混乱。
源文件地址
密码：n4ea
实例一
Step 1 编辑card编组
给对应的图片图层增加阴影，我是给四个头像图层增加阴影，纯粹为了好看，可以忽略这一步，不过有一点需要注意：
Tips：Principle是不能继承Sketch里面带Mask编组的任何阴影属性的，带有Mask的编组的阴影属性会被当成图像的一部分，转换成一张图片图层。
将Artboard 1中的card red、card yellow、card purple编组为card，编组垂直属性设置成Scroll。
调整card边界大小
根据实例可以看到card滚动的同时会带动标题栏高度的收缩，所以card编组的top边界应该为标题栏收缩后的bottom边界，所以我们需要调整card的大小。
Tips：Principle的编组里，直接在左上角的属性面板里面对编组的X、Y、Width、Height做调整，会带动变图内的元素一起改变位置。若想使编组内的元素保持位置不变，则需要直接在画板内部调整编组的大小。
底边留了10个单位的高度出来是为了拖到底部时卡片和底部有一个间距，这10个单位也是卡片之间的间距。
Step 2 编辑Driver
在card拖动时，text title是发生Y轴上的位移，而bg title则是Height发生了变化。
打开Artboard 1上的Driver，在0、40（bg title高度的一半）位置分别给text title添加Y属性变化节点，同时在这两个位置给bg title添加Height属性变化节点，并在节点上调整二者的属性。效果如下：
无Y轴效果
可以发现效果并不是我们想要的样子，这是因为：
Tips：当图层或编组的Width或Height发生变化时，其变化的参考点是图层或编组的中心点而非左上角，所以其对应的X或Y也会发生变化，因此若要固定一边进行变化，需要将对应的X或Y也编辑上。
给bg title添加Y属性变化节点，在0和60位置上都为0，看下实际效果：
正常效果
Step 3 制作单图浏览效果
在实例中可以看到，点击后的单图浏览效果，是出现遮罩同时图片进行放大居中，头像也会有一个渐隐渐现和位移的效果。
制作跳转
所以这里我们先要添加一个和画板等大的cover 1，置于所有图层之上，设置0%的Opacity，然后复制画板。
在Artboard 2上调整图层顺序，将pic r和head r置于cover 1上，cover 1设置70%的Opacity，改变pic r的大小，使其等比放大按宽度填充画板，移动head r，使其保持和pic r左上角的间距，设置0%的Opacity。
在Artboard 1上给pic r添加Tap交互链接到Artboard 2，同时在Artboard 2上给pic r添加Tap交互链接到Artboard 1，看下效果：
初步效果
会发现效果有点怪，图片消失的那一下有点闪，过度的并不自然，这是因为在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之上。
添加pic r 2
在Artboard 1给pic r 2设置0%的Opacity，通过Driver让pic r 2跟随card的滚动位移，使pic r和pic r 2完全重合。
在Artboard 2上将pic r 2属性设置成同pic r一样，删除pic r的Tap交互链接，改成pic r 2。
看下效果：
最终效果
这样就实现了比较自然的过渡效果。
实例二
Step 1 统一画板的元素
在实例二中，我们实现的是一个页面跳转的效果，主要的效果是一个元素的渐隐渐现以及位移顺序的时间差。因此我们首先要统一Artboard 1和Artboard 3中的元素数量。
统一元素数量
将Artboard 1中的card和title复制到Artboard 3，设置0%的Opacity，将Artboard 3中的icon add、content、icon back复制到Artboard 1，icon back设置0%的Opacity，icon add和content调整位置。
因为card和title在目标画板中不透明度都为0%，而且仔细观看实例中，动画有一个先后的顺序，所以在Artboard 3中card和title的图层顺序就无所谓了。
Step 2 建立跳转链接，调整动画先后顺序
在Artboard 1中选中head r，添加Tap交互链接到Artboard 3，在Artboard 3中选中icon back，添加Tap交互链接到Artboard 1，看下效果：
无时间差效果
为了实现实例中的先后效果，我们需要对两个交互链接分别进行编辑。
编辑交互链接
这里主要注意时候的时间差，即Artboard 1跳转Artboard 3时，card和title先消失，然后pic r和head r形状和位置变化，最后icon back出现，content和icon add先后出现。Artboard 3跳转Artboard 1时，content和icon add先后消失，然后pic r和head r形状和位置变化，最后card和title出现。看下效果：
缺失返回效果
会发现，如果按照这个步骤编辑，最后返回时的动画是有问题的。因为在Artboard 1上，pic r和head r是属于编组card的，而card在这个交互链接中是Opacity由0%变为100%，因此在最终的效果中我们看不到pic r和head r的形状和位置变化效果。
要解决这个问题，我们就要换个思路，即不是让card这个编组去进行不透明度的变化，而是让card内的元素自己去进行不透明度变化。
所以我们调整一下画板上元素的属性，在Artboard 3上，将card的Opacity改回100%，将card里面的card yellow和card purple的Opacity设为0%，并在Animate面板中调整先后顺序，让其和title的出现时间一致。这样就有了我们最终的效果：
最终效果
实例三
Step 1 制作滚动效果
在实例三中，我们也是首先要实现Artboard 3上面content滚动带动顶部pic r和head r变化的效果，这个同实例一中的原理一样，这里就不复述了，直接看一下实际效果：
content滚动效果
Step 2 制作底部弹窗效果
实例三中出现了一个底部弹窗，弹窗内的方块可以左右滑动，这个同样是通过给编组设置水平滚动然后调整编组位置和大小实现的，同时icon add会发生一个旋转和位移。这一步的动画原理之前都有讲过，所以这里就不上步骤图了。
我们先在Artboard 4中将方块的编组pc制作成水平滚动效果，同时给icon add添加45°的Angle，并调整位置。
统一Artboard 3和Artboard 4中的元素数量，注意图层顺序。
然后在两个画板上分别给icon add添加Tap交互链接到对应画板。
看下效果：
没有调整icon add效果
我们会发现，在返回的这一步中，icon add在Y轴上的动画看上去有延迟。我们去Animate找一找原因。
Animate原因
可以看到，在icon add Tap（Artboard 4 → Artboard 3）这一步交互中，icon add在Y轴上的时间属性和head r Tap（Artboard 1 → Artboard 3）这一步交互中的一样，这就是之前说的为什么三个实例要分开做的原因。
调整后
我们去icon add Tap（Artboard 4 → Artboard 3）这一步交互中把icon add的Y轴时间属性的动画曲线调整回来，发现在head r Tap（Artboard 1 → Artboard 3）这一步交互中，icon add的Y轴属性也一起改变了，看下效果：
调整后的效果
会发现在实例二的效果中，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的轮播效果。
非常感谢您的阅读，您的支持是我最大的动力！
网友评论