目标：将视觉稿制作成真是使用的样子

多页面的交互的原理：

若A、B两个页面中有『同名图层』，且属性（X、Y、颜色等）参数不同，在页面跳转过程中，会自动对属性变化进行动画补充。

如下图：A页面 的红色块在左下角，B页面 的红色块在右上角，当页面设置了 Tap（按下） A 中的红色块 就跳转到 页面B 时，系统会自动补充一个动画变化参数。

选中任意一条黑色线，底部会显示动画变化的参数，下图中完整的意思是：当点击左侧页面中的红色块时，页面会跳转到右侧的页面，红色滑块从左下角移动到右上角。X轴移动时间为 0.5秒，Y轴移动时间为0.5秒。

实际效果就是这样

多页面交互除了『点击』以外，还有包括长按、自动等12种，今天主要讲 Tap（按下），其他的之后教程用到再讲。

今天要讲的案例效果出了多页面交互外， 顺便把上一章讲的单页面联动也复习一下，效果如下：

页面效果包括：

1、职位页面的列表滚动、作业列表切换及切换时导航的变化

2、底部栏点击切换页面，并伴随涟漪效果

3、职位页面，点击第一个列表，从右向左滑出职位详情页，并从职位详情页返回职位页面

正式开始

第一步，将视觉稿导入Principle

注：Principle提供了一键从Sketch导入PP的功能，除非你确保你有非常好的图层命名习惯，否则，一开始学的时候不要这么干。

建议：先将要用的内容从 Sketch 中导出，然后导入到 PP 当中。Sketch导出时，最好按模块导出（文末有的源文件下载，可以参考一下我的导出方法），如下图：

有一些模块是直接在PP中，通过PP提供的矩形、文字工具创建的，比如顶部栏：

第二步，完成单页面中的交互效果

交互效果一：上下滚动

职位页面中的『列表-1』已经超过画面的显示范围，为了看到画面之外的内容，我就需要使用单页面中的『Scroll』效果。

选中『列表-1』，然后将『列表-1』的高度（Height），缩小为 464，然后设置 Vertical（垂直）为 Scroll，如下图：

此时，你通过鼠标就可以操作右侧的提供的预览窗口进行上下滑动了。

交互效果二：列表左右切换

1、将『列表-1』复制得到『列表-1 2』，然后将『列表-1 2』改名为『列表-2』。

2、将『列表-1』、『列表-2』编组，得到『列表全部』（我自己改的名），此时『列表全部』的宽度为720。

3、将『列表全部』的宽度改为 360，并将 Horizontal（水平） 的参数改为『page』（页面）。

然后你就在左侧预览栏，通过鼠标，左右切换列表，想滑动 Banner 一样。

到这还不算完，我们还要做左右切换时，导航也要有变化。

交互效果三：列表左右切换时，导航变化

1、点击 Drivers（联动），唤出联动界面。

2、选中『顶部栏』-『导航切换』，点击联动界面中的『列表全部』对应的『+』，选择 CenterX：

这个设置的意思是：『导航切换』监听『列表全部』的 X 移动，当『列表全部』X轴变化时，『导航切换』的X轴也跟着改变。

3、设置『列表全部』X 轴变化到 360 时，『导航切换』 X 轴的参数变为 90（即：黄色条，从『产品经理』下，移动到『UI设计师』下）

4、设置『PM』字体透明变化，『列表全部』从 0 移动到 360 时，PM 透明度从 100% 变为 50%。（同理设置『UI』字体透明度从 50%，变为 100%。）

至此，『职位』中的单页面交互全部完成，你可以在左侧中的预览中，自己试一试效果。

第三步， 底部栏点击切换页面

1、点击『底部栏-公司』，选择『tap』然后将线拖拽到公司页面，一个跳转就设置完了。

2、然后将底部栏的其他按钮也进行连线，包括『职位』页面中，第一个列表点击跳转到『职位详情』页，然后点击『职位详情-返回』返回到『职位』页面。

插一个小知识点：

1、底部切换效果，直接用自带的闪现效果就行。

2、『公司』页面的排版有点反人类，千万别学。

至此，一个基本的交互效果就算完成了。

点击底部栏按钮时，icon 有一个向上的动画，这个原理就是一开始说到的，动画补充。PP 察觉到icon的高度发生了变化，所以补充了一个向上的动画。

PPS：有没有发现有什么地方不对。一开始我发的效果，点击底部栏是有涟漪效果的，而且『职位详情』页面是从右侧滑出的。

这个就当作业留给大家了。附件中我也把我的源文件放进去了，如果有疑惑可以参考下我的源文件。如果疑惑太多，我下期再仔细讲讲。

附件使用说明：

1、请用3.4版本以上的 Principle 打开

2、『BOSS直聘-简版.prd』这个文件我把所有效果都清除了，你可以直接用来练习使用

3、『BOSS直聘.prd』是我做的源文件，做的过程中有问题可以参考一下

如何通过手机操作你的交互效果：请在 App store下载 Principle，然后通过数据线连接即可。

好了，单页面、多页面交互都讲完了，之后会考虑做一些简单的 loading 和转场效果的教程，敬请期待~

系列文章：

1、让Principle成为生产力工具（一）

2、让Principle成为生产力工具（二）单页面中的联动

3、让Principle成为生产力工具（三）操作你的视觉稿 

学习 Principle 过程有问题，可以加我微信：tianlan1025