借助APP转场，来学习H5 的特殊转场效果！

这篇文章收录了一些APP应用特殊转场和一些H5特殊动态转场，通过这些较为夸张的转场设计，它能一定程度的打开你的设计思路和眼界，。

本书并非专业UI类设计丛书，所以内容以展示和辅助为主，本帖所收录的动态案例均来自互联网和作者长期收集，案例归纳与内容编写由作者原创，但案例并非本书作者设计。好了，下面咱们就来看看转场案例吧：

模拟纸张的特殊转场

纸张是我们记录信息的重要媒介，所以很多设计师会从纸张上寻找转场方式，如果类似效果运用到位，不但可以丰富内容，还能让死板的转场变得生动有趣，下面我们来看一些动态案例：

打开书的转场模拟方式

折叠纸张的转场模拟方式

ipad翻页模拟也是经典的纸张转场方式

类似翻页模拟的H5案例

模拟空间的特殊转场

对空间的模拟转场可以说是最为常见的模拟转场方式，通过对空间位置的改变，或是2D，或是3D的空间移动变化来达到转场的效果，像是2016年H5内容内比较流程的“一镜到底”就是这类转场效果，下面本书找到了一些转场效果，供大家参考学习：

一个2D的空间转场演示

“神奇移动”转场演示

“神奇移动”类转场演示由苹果公司发起，在后来被广泛应用在各种移动应用当中，这种空间转场动画效果直接简单，视觉张力强，目前被很多移动应用和H5采用。

“神器移动”转场演示

微信原生广告的“神奇移动”效果在2016年奥运会期间被开放，当时就引起了不小的关注，大家会发现，虽然只是一个非常简单的开启方式的改变，但是这种的空间转场就给人营造出了非常有趣的体验。

模拟穿插的特殊转场

这也是一种非常常见的特殊转场，将当前场景与之后要转入的场景进行内容交叉，从而获得特别的视觉体验，下面来看看本书收录的案例：

酷似百叶窗的特殊转场

用过交互来实现的穿插转场

通过讲述内容来实现的穿插转场

元素位移的穿插转场方式

另一种元素位移的穿插转场方式

模拟视差的特殊转场

视差滚动转场也是非常出效果的特殊转场方式，在minisite时期就已经被大范围应用了，而在H5内页有过不少相应案例，通过交互来实现动画的推进。

黑白风格的视差滚动转场

其它的黑白风格的视差滚动转场

不同介质的特殊转场

在这里，我们主要讲的是不同属性媒介的特殊转场，像是从梦境转移到现实，从2D转移到3D，从平面转移到立体，这类转场方式比较多变，需要发挥设计者的想象力，下面我们找到了一些案例：

通过黑场，画面从图文转场到了真人动画

从纸张转场到动画，采用了渐隐渐现

从动画转场到真人场景，采用了利用交互引导转场

—————————

本书作者补充资料：

转场动态是一个非常大的门类，本书只是列举了其中的一些案例和效果，随着技术的进步和设计方法的开发，未来还会出现更多有趣和实用的转场设计，而通过本篇文章，你应该也已经发现了，所有的转场设计的原型都是真实世界中的某些不起眼的内容，好的转场设计是真实世界某些行为和动作的抽象。

在本书网站，你还能找到更多学习资料，可以将网站转发给更需要它的朋友们！

进入资讯站社群，看H5分享

- 加微信：zixunzhanxiaomi -

微博: @H5资讯站 QQ群: 465521360 微信: zixunzhanxiaomi