如何更高效地展示产品的功能结构，信息展示，更好地传递产品的sense，像用户一样真实体验产品，高保真这时候需要登场了。最近在用principle制作高保真原型，配合sketch使用，可畏双剑合璧，高效好用，特此强烈推荐。同时会陆续整理相关的教程。
今天，就从打开app的第一步看到的欢迎页入手，来和大家一起看看如何用priciple制作欢迎页的翻页切换效果。这个部分同样适用于banner位轮播效果哦！那么就开始用8步制作高保准的app欢迎页吧。
1.将相关的素材在sketch中整理好，打开principle，点击import，将素材导入。以下是我导入的素材(图片素材来自dribble)：
2.在页面画板中添加一个矩形，点击左上角矩形按钮，调整矩形大小为750*1334，将其颜色填充为紫色。再复制两个等大矩形，分别填充为黄色和蓝色，调整其位置均为（0，0）。
3.分别将scroll1,scroll2,scroll3合并为一个组。然后选择Horizontal的效果为page。这个时候，有一个关键点，我们需要拖动组的边界线至画板红框标注的位置（宽为750，与scroll1等高）。到这里，就实现了基础的翻页效果了，但离我们实际想要的翻页变化效果还有几小步哦。
4.页面的滑动切换自然少不了原点的指示，现在我们就来添加3个滑动指示原点吧。依旧选择在画板上添加矩形，principle没有提供其他图形的添加选择，在这里我们通过调整矩形的圆角度数来实现矩形的添加。调整其大小并将其填充为白色，透明度调整为30%。
5.接下来，需要再添加一个标识原点，填充色为100%白色，命名为r_selected，将其覆盖在r1上。
6.接下来，我们将使用到principle的Driver工具来实现滑动翻页变化的效果。点击位于上方的Drivers按钮展开Drivers控制面板，点击左侧画板控制器中的purple背景，这个时候你会看到purple出现在Drivers的面板上，点击其旁边的锚点然后选择Opacity,拖动控制线至x=750的位置，这时候我们点击锚点，0-750的锚点间会被线连接起来，说明对于purple这个元件，透明度的变化联系已经被建立，我们在750处的锚点处，将其透明度调成0%。同样的操作在yellow这个元件上重复一遍，这次，将锚点线建立在750-1500的位置上，x=750时，Opacity=100%, x=1500时，Opacity=0%。
7.最后一步，我们来控制标识原点r_selected的效果（随着页面切换，标识点指示当前位置）。我们选中r_selected，选择其锚点变换值为x轴位置。拖动控制线至750位置时，将r_selcted的x位置调整成r2的x轴位置（80）。再拖动控制线至1500，将r_selcted的x位置调整成r3的x轴位置（160）。
8.Finally, app 常见的欢迎页切换效果就搞定了。
我制作了动效gif上传至了网盘，大家有兴趣的阔以去下载哦。有问题可以随时私我。欢迎指教！
gif链接: https://pan.baidu.com/s/1bpNxfeZ 密码: baum
