为了让大家方便易学，本教程依旧是临摹原作者pixate的作品，难度也不会很大，只是比上一个难一些，但依旧方便上手，给大家提供原作者创作的原文件下载地址

第一界面

首先我们先做第一个界面，先把第一界面的图片放上去。（此时我们第一界面只有导航和一系列图片；如下图）

然后给这个第一界面设置滑动页面的效果，在第一个教程中已经有了详细的做法，在这里再说一次吧

就是先建立新的透明图层（为了方便识别，这个图层命名为“手机界面视觉范围”），这个透明图层要和手机界面一样大（比如图中的手机界面是iPhone 6，所以图层大小也要事iPhone 6大小）；

（在画板上方能看到有个iPhone 6的字样，说明是以iPhone 6为大小制作的手机界面）

（如何建立透明图层，刚开始是一个灰色的方框，在右面的属性“appearance”可以设置为透明）

因为我们想让系列图片设置为手势控制滑动，所以把图片都拖入“手机界面视觉界面”这个透明图层内，然后给手机界面添加“scroll”手势动效，这样第一界面就完成了滑动页面的效果，如下图，（如果你想导航和图片都设置为手势滑动的话那么可以都拖入“手机界面视觉界面”透明图层）

如果不明白可以去看看之前的教程了解下

第二界面

接下来设置第二界面的初始状态，将第二界面的初始状态的图片都放入（如下图）

为了方便寻找和便知，我给图片部分和文字部分分别建立了透明图层，具体大小如下

（滑动部分依旧是和手机界面一样大，与第一个界面的做法是相通的）

（图片部分所建立的透明图层是和图片那么大的，将图片、图中文字和new York....放入图片部分）

接下来给滑动部分实现滑动效果，即将“scroll”拖入“滑动部分”

其次给图片实现滑动缩放效果，即将“scale”拖入“detail－bg”然后给他设定数值（具体可以参考上一篇教程），这时候我们会发现缩放效果不是那么很完善，中间会留空，这时候将“move”拖入“detail－bg”设定以下的数值，意思是这个图片将跟随着“滑动部分”的滑动的变化将进行对应的缩放效果。

（其中continuously with rate意为连续比率，rate意为比率，到你给他设置为1，那么图片就会进行向上方向运动，设置为－1则会进行向下方向运动，在这里你们可以根据个人喜好进行设置。

那么有人问为什么1他就向上运动？－1就会向下运动？我的理解是和正负函数图有关系，我们都知道负轴都是向下的，而正轴是向上的。）

这样滑动效果就实现了，并且比上一个有所改善。

记住也要给“detail－text”添加“move”效果，目的是为了统一运动。

逐渐消失与逐渐模糊

再给大家讲一个有趣的效果，因为大家都掌握了图片将跟随着“滑动部分”的滑动的变化进行对应的缩放效果。那么在图片放大时能不能进行文字逐渐消失？答案是能。

首先给大家讲一下新的动效“fade”，意为“逐渐消逝”。我们只需给文字“detail－text”添加“fade”，并进行一些数值设置。

（数值中begin意为“起始”，而“end”意为“结束”，而“fade to”是“逐渐消失为。。”，所以以我的数值为参考的意思是““detail－text当滑动部分往下滑150pt时就会逐渐消失为透明度0%”）当然你们可以自行设置的，没必要与我的一模一样，只要看起来不错就OK。当然可以给“detail-stats”设置同样的效果。

接下来给图片进行图片模糊效果，首先先把模糊好的图片拖入界面内，并且放入“图片界面”内（如下图）

为了这个模糊图片能与之前的图片进行同样的效果，所以按照之前的“move”效果拖入这个模糊图片

然后设置以下数值，（模糊图片不见的原因是我给他设置了透明度0%，在右上方的区域中看到opacity的数值会发现已经被调成0%，至于右下方关于“fade”的设置是和上边我所提及的逐渐消失是一个道理。）

最后我们将最后一张图放入界面，如下图

我们先给他设置透明度0%，然后给他添加“fade”效果，并设置一下数值。

（with duration to final value意为“持续到最后值”，就是建立条件进行运行效果，好比“如果。。。。那么。。。”的条件）我设立的条件的是“hua_dong.contentY > 322”，“fade to”为“100”，duration为“0s”，delay为“0s”，意思是“当“hua dong”这个图层y轴长度满足大于322pt”时，“detail－bg－blurred－top”就会0秒延迟0秒延续实现从透明0%到透明度100%的效果，说白了就是没有延迟瞬间实现这个效果，（因为这个公式不支持中文，所以在这里我已经将之前的“滑动部分”改名为“hua dong”）

根据这样的条件在进行下一个数值设置，意思我就不翻译，相信你们能看懂。

这样第二界面的动效就完成了。终于到了最后一步了

为了方便些，我先进行好分类，建立一个与界面一样大的透明图层，名为“第二界面汇总”

页面切换

在制作之前先清理思路，先看第一界面，当我们点击超人图片时（红线标记处），那么第一界面就会消失，第二界面就会出现。

然后看第二界面，当我们点击“叉号按钮”，第一界面就会出现，第二界面就会消失。

所以我们先给“超人图片”和“叉号按钮”添加“tap”手势，目的是为了使它们可以点击。然后并进行一下设置。

就可完成简单的页面切换，如果想使效果做得更好可以下载源文件进行参考，里面包含效果图。