很多刚开始接触原型动画的人，容易卡在这样一个地方：页面倒是能跳过去，但动起来的效果很生硬，元素也能移动，可整体的节奏却不统一。Principle这个工具，本身就是用来做网页、移动端和桌面端那些交互动效原型的，页面与页面之间的切换，主要是靠画板、事件、动画面板、关键帧、缓动曲线，还有弹性参数这些东西配合着来完成，它的官方文档，也把动画面板、事件、关键帧、缓动曲线和弹性动画，列成了跟动画有关的核心内容。

　　一、页面切换动画要怎么做

　　在做页面切换动画的时候，要先把开始和结束这两个状态给准备好，然后再让交互的事件把它们给连接起来，不要一上来就去调整那些特别复杂的参数，先得保证页面的结构、图层的命名，还有跳转的关系，这些地方都没有问题。

　　1、先把两个画板给准备好

　　可以在Principle里面，先把第一个页面和第二个页面给建起来，或者也可以从别的设计工具里面，把做好的界面给导进来，这两个画板里面，只要是会参与到动画里去那些图层，名字就要尽量保持一样，比如说，首页里面有一张叫卡片的图层，在详情页里面对应的那张图，也应该叫卡片，因为Principle会根据图层的名字和它的层级关系，去判断有哪些对象是需要自动做过渡的，要是名字给搞乱了，动画做出来就容易变成突然一下消失，或者突然一下又冒出来。

　　2、去设置用来触发动画的区域

　　把第一个页面里的那个按钮、卡片，或者是导航的条目给选中，去点一下图层旁边那个闪电形状的小标识，然后选上点击这个事件，再把箭头的线给拖到目标画板上面去，这样一来，在点击那个元素的时候，页面就会从当前这个画板，跳到另一个画板里面去了，要是想做成滑动切换的样子，那就可以去用拖拽相关的那一类事件；要是想让页面自动地进入到下一页，用自动事件就可以了。

　　3、把动画面板给打开

　　把两个画板之间那根负责跳转的箭头给选中，这个时候，底下就会出现那个动画面板了，在这个面板里面，可以看到不同图层在位移、透明度、缩放，还有旋转这些方面发生的变化，先点一下预览播放，看看默认给出来的动画，是不是跟自己心里想的那个效果比较接近，然后，再去针对那几个比较关键的图层，调整它们运动的时间和走的曲线。

　　4、去把进入和离开的状态给处理好

　　页面切换这件事，并不是光让新的页面出来就行了的，还得去处理一下，旧的这个页面它到底要怎么离开，一种比较常见的做法是，让旧的页面整体上稍微缩小一点点，同时把它的透明度给降下来，然后新的页面，从屏幕的右边或者是从底下移进来，对于那些底部导航、顶部标题这一类固定不动的东西，可以让它们的位置保持不变，只让中间内容的那块区域发生切换，这样做完以后，视觉上会感觉稳当不少。

　　二、页面切换的节奏要怎么调整

　　页面切换的节奏，主要就是去看持续的时间、延迟、缓动的方式，还有元素出现的先后次序，当节奏没有被调好的时候，用起来的感觉就是，页面一会儿快一会儿慢的，要不就是好几个元素同一时间一起冲出来，缺少那种一层一层的层次感。

　　1、先把主动画的时间给定下来

　　那种普通的页面切换，可以把主动画的时间，控制在一个比较短的范围内，通常是以看着清楚、又不拖泥带水为准，把跳转的箭头选中以后，在那个动画的面板里面，去调整主要图层的持续时间，内容页之间的切换，可以稍微快一点；但像详情页展开、卡片放大这种类型的动效，就可以适当地放慢一点点，好让用户能够看清楚这个变化是从哪里来的。

　　2、用延迟来把层次给拉开

　　一个页面里面，如果同时存在着标题、图片、按钮，还有列表这些东西，就不太建议让它们全都在同一个时间点一起冒出来，可以让背景和那个主体的容器先动，标题跟着再出来，按钮和列表，再稍微往后推迟一点点，这里的延迟，不需要设得很大，几十毫秒到一百多毫秒，就足够拉出一种层次的感觉了，设得太长的话，反而会显得很拖拉。

　　3、去调整缓动的曲线

　　那种从头到尾都是匀速直线的运动，看上去是会比较生硬的，页面的切换，通常需要那种慢慢进来、再慢慢停下的缓入缓出效果，可以在动画面板里面，去选一条合适的缓动曲线，让元素在开始动的时候，不觉得很突兀，快要停下来的时候，又不会猛地一下刹住，像弹出层、卡片展开，还有按钮的反馈，这些地方可以适当地去用一点弹簧一样的效果，但注意，不要让所有的元素都带上弹性，不然页面会显得晃来晃去的。

　　4、让不同元素的节奏，有主有次

　　那些主要的内容，应该是最先被用户看见的，而装饰性的那些小元素，可以出现得晚一点，或者是动的幅度弱一点，就拿卡片进入详情页来说，卡片本身，负责最主要的那个运动，标题和按钮，负责在后面补充着出现，而阴影和背景呢，只去做一些很轻微的变化，这样一来，用户的注意力，就会比较自然地集中在那个交互的对象上面，不会被周围那些零零散散的动画给干扰到。

　　三、页面切换为什么会显得不顺

　　页面切换起来显得不顺，很多时候并不是因为参数调得还不够多，而是图层的对应关系，还有动效背后那个逻辑，出了些问题，先把这些基础的东西给处理好，再去调节奏，会省力很多。

　　1、去检查一下图层的命名

　　要是同一个元素，在两个不同的画板里面，名字没有保持一致，那Principle很可能就没办法认出这是连续的两个状态，只能按照简单的淡入淡出来处理它，把名字改好了以后，再重新预览一遍，很多那种跳动的问题，是会直接消失掉的。

　　2、去检查一下图层的层级

　　图层在前一个画板和后一个画板里面，如果它所在的层级差距太大了，也是会影响到动画的判断的，比如说，一张卡片在首页里面，是待在某一个列表分组里面的，可到了详情页，却被拿出来放在了单独的一个层级上，那在切换的时候，就可能会出现错位的情况，可以提前把那些有关联的元素，都给整理到结构比较接近的组里面去。

　　3、把那些没什么关系的动画给减少一点

　　在页面切换的时候，并不是每一个元素都需要跟着一起动，像背景、状态栏、固定在那里的导航，这些东西就可以让它们保持稳定，只让内容区域和那些关键的、需要操作的对象发生变化，动的东西少一点，整体上的节奏，反而会显得更加清楚。

　　4、多利用预览功能，反反复复地去检查

　　每一次调整完持续时间、延迟或者是曲线之后，都要在预览窗口里面，实际地点上几下去感受一下，光是盯着时间轴看，有时候会容易觉得挺合理的，真的要上手去点击的时候，才会发现那些停顿、抢拍、卡顿，还有注意力被带偏了的问题。

　　总结

　　Principle里面，页面切换的动画要怎么做，它的核心是先得把前后两个画板给准备好，让图层的命名都保持一致，然后用点击或者拖拽来建立起那个跳转的关系，再进到动画的面板里面，去调整位移、透明度和缩放这些变化；而页面切换的节奏又要怎么去调整，它的重点，则是先把主动画的时间给定了，然后再用延迟、缓动曲线，还有元素主次的关系，来把控住那个节奏，只要图层之间的对应关系是清楚的，动的对象又不会太多，那做出来的页面切换，就会显得自然很多，在演示原型的时候，也更容易让别人一眼就看明白你要表达的交互意图是什么。