此次与大家分享一个超级简单的app启动页的翻页动效，图片资源大家可以随意在网上下载进行操作，首先给大家看下动态效果：
启动页动态效果在制作动态效果前，我们先来分析一下这个效果：
在app启动页中，有3个页面，页面左右滑动时，有个淡入淡出的效果查看上一页或下一页，同时下方的当前页显示条也会跟随变化显示当前页是3个页面中的哪一页。
流程步骤：
一、首先倒入素材。
sketch设计图如下：
sketch素材打开principle软件，导入sketch源文件，点击工具栏上的import按钮，即可导入已经打开的sketch源文件。也可以点击文件－－导入sketch文件。
导入sketch 源文件导入后，界面显示如下图：
导入界面源文件为1倍图，导入可以选择1倍／2倍／3倍图，本次实例导入的是1倍图375x667。
绿色框表示为当前所在页面，左侧图层为sketch文件的源图层。当然我们现在在动效预览区域看到的都是静态的图片，无任何效果，接下来我们开始制作动态效果。
二、制作页面水平翻页效果
因为此动效是在水平方向进行运动，所以在左侧检查器区域，水平选项中选择翻页动态效果，即可在动效预览区域左右滑动实现翻页的效果。
翻页三个页面在水平方向进行翻页的动效已经设置完成，但在预览区域进行滑动时，仍然看不到翻页的效果。这是为什么呢？是因为此时事件触发的范围已经包含了三张图片的所有内容，想要达到翻页效果就必须将范围设置成默认一屏的宽度，这样才能进行翻页。
事件触发范围因此，我们需要将图中的宽度范围缩小到一屏的宽度－375.我们可以手动拖拽右侧的锚点进行更改，也可以在左侧检查器区域的宽度位置，输入数字来更改。
更改范围大小好，现在再到预览区域查看动效，已经有了左右滑动进行翻页的效果了。
但是，翻页后，图文下面的当前页显示条还没有变化，接下来我们就把当前页显示条的动效制作出来。
三、制作页面显示条的动态效果
当前页显示条是如何运动的呢？
是在显示当前面时，当前页面显示条为彩色，其他两个显示条为灰色。
如何做到这个效果呢？
我在sketch源文件中制作了两个组，一个组是灰色显示条，另一个组是彩色显示条。彩色条图层在灰色条图层上方，滑动至当前页时，彩色条隐藏其他两个页面的显示条，灰色条保持不变。
好的，现在来制作这个效果。
将不透明度设置为0%设置后效果如下：
页面效果可看到第2、3页面的彩色显示条已经隐藏。
在预览区域查看效果，发现在左右滑动时，显示条无论在第几个页面，显示条均显示为第一个页面，这是因为在滑动页面时，我们没有进行更改联动效果。
制作页面显示条的联动效果
principle的强大之处是在于它的自动补间的功能，我们只需将最初和最终显示效果制作出来，中间的效果，principle会自动为我们进行动态补间。
这时我们会用到联动效果设置页面。
联动按钮首先表达一下这个动效的联动规则，我们可以看到联动界面中有个滚动轴，顶部数字表示像素范围，当我们想要移动到第二个页面时，就要将滚动轴移动到375的位置，移动到第三个页面是，滚动轴移动到750的位置。
第二个页面显示时，同时页面下方的显示条也相应显示为第二页。也就是说，我们要将第一页面的显示条进行隐藏，将其不透明度设置为0%。第二页的显示条进行显示，将其不透明度设置为100%。
联动操作将滚动条移动至750的位置，按照同样的方法设置第三个页面的显示条。
效果在上图的效果中，我们看到基本的翻页样式我们已经完成，但是有些细节方面还需要在进行细化，比如在两个页面之间的切换效果比较生硬，我们可以优化到淡入淡出的显示效果，使整个效果显得更加顺畅自然。
四、优化细节
两个页面之间的切换效果比较生硬，我们可以优化到淡入淡出的显示效果。怎么做到淡入淡出呢？我们可以调节不透明度来达到这个效果。
第一页转换到第二页时，选中页面1，设置滚动轴在0时，不透明度100%，滚动轴在375时，不透明度0%；页面2，设置滚动轴在0时，不透明度0%，滚动轴在375时，不透明度100%；页面3，设置滚动轴在375时，不透明度0%，滚动轴在750时，不透明度100%。这样principle进行自动补间后，页面动态效果就非常自然柔和了。
最终动效好了，这个动效示例就先介绍到这里，后续会不断增加新的教程，与大家共同学习。