这篇文章来讲讲paging效果的进一步应用。

先来看看官网上的slack demo。（gif上传失败多次，放弃了）

http://floidio.github.io/prototypes/slack/

为方便，附上gif的网盘地址：

http://pan.baidu.com/s/1gdNpb5h

也附上另一个demo，基本的原理一致：

http://floidio.github.io/prototypes/if-by-ifttt/

时间比较紧，主要拆解一下Slack demo的原理。有了上一篇文章的基础，也能比较快的上手。

1.基本素材及排版就完成后，界面如下：

2.添加paging效果，基本动画完成；

3.对于paging特效，静态页面内的内容会跟随paging特效一同出现，但是对于跨页面的内容如何感知呢？这里需要用到一个动画：scroll move。在paging图层下，新建动画scorll move，进入动画页面；

4.手机层添加：move动画，把手机拖移到中间；scale动画，1x；运动曲线spring，tension 500，friction 50；

5.背景层添加：opacity动画，100%；

这时预览操作时可以发现，第一次滑动时的动画没有问题了，但是向左滑动时并没有效果，同时按照这种做法的第三页动画并不能正常的运作。

scroll move解决的是元件怎么感知页面的变动的问题，下一步应该解决的是原件怎么准确的感知页面的变化。

6.点击动画状态final的下拉箭头，添加条件如下：condition in constraints/switch continuously/edge horizontal/rage 0-1536，这个条件的意思为以水平距离约束，范围为0~1536px（一个屏幕的水平大小）；

7.添加新的final状态，添加其余元件的动画及final条件，由此可见，fioid的动画可以添加多个final状态，有点类似于flash中的关键帧；

8.演示，检查，应该是不会出现问题了。

与以上同理，IFFF的paging动画也类似，这里就不展开了。

paging多见于App的引导页，但是也有应用于App的使用中，在fliod中也可以实现，实现难度比上面的例子小，但是理解难度要比slack的例子要大。各位可以尝试，gif附上。

> http://pan.baidu.com/s/1hrqZl5a