关于App的一些迷思以及一些动画效果开源库的推荐
dwd4
9年前
<div> <h2>前言 </h2> <p>说来惭愧，iOS 8 都已经发布半年多了，而我最近才开始学习iOS 7的一些新特性，才开始去理解 iOS 7 所带来的一些界面交互的变化。 </p> <p>一切的源起还是来自 非死book 在去年发布的社交、新闻聚合阅读应用<a href="/misc/goto?guid=4959629538162992480" target="_blank">非死book Paper</a>，当然我们在这里讨论的不是该应用是否达到了当初非死book发布它时所定的目标，而是在于它那出色的交互设计，并从中学习到点东西。至于如何出色请见它的<a href="/misc/goto?guid=4959629807556813989" target="_blank">宣传视频</a>，同时可以强烈推荐移步到美区 App Store 的 <a href="/misc/goto?guid=4959629807678673475" target="_blank">Paper</a> 页面下载一个把玩下。（什么？没有美区账号！那就多看几遍的宣传视频吧！）让我们来扒扒这一应用后面的团队，该应用的UI设计师是 <a href="/misc/goto?guid=4959629807809370461" target="_blank">Mike Matas</a>，听到这个名字不要害怕，更不要紧张，因为我跟你一样对他一无所知，抱着好奇的心态接着往下扒吧。他是这样的一个人： </p> <blockquote> <p>15 岁高中辍学，加入了 The Omni Group。18 岁创立自己的第一个公司 Delicious Monster。2005 年 WWDC 设计作品 Delicious Library 摘得了最佳 Mac OS X 用户体验第一名和最佳 Mac OS X 产品第二名。19 岁加入苹果公司，設計了 iPhone 上的 Settings.app, Photos.app, Camera.app, Maps.app 以及电池图标，还有 Mac 上的 Photo Booth 和 Time Machine。2011年夏天创办他联合创办的 Push Pop Press 被 非死book 收购了。 </p> </blockquote> <p>然后，我们在来看看他创办的Push Pop Press做了哪些事？他跟美国前总统、2007年诺贝尔和平奖主<a href="/misc/goto?guid=4959629807926441318" target="_blank">阿尔·戈尔</a>合作一起开发了 <a href="https://itunes.apple.com/cn/app/al-gore-our-choice-plan-to/id432753658?l=en&mt=8" target="_blank">Our Choice</a> 这个号称“下一代电子书的典范”的环保类电子书App。Our Choice 有超过400张可互动的图和表，每一张在文字中的附图都能利用手指放大，有一些图表还可以用手指碰触其中的图案或横条，然后图中就会显示更详细的内容或解说。溢美之话不多说，照例放个<a href="/misc/goto?guid=4959629808176981526" target="_blank">Vimeo上的宣传视频</a>给大家看看，还有这篇<a href="/misc/goto?guid=4959629808301390568" target="_blank">《划时代的爱地球电子书--戈尔的Our Choice》</a>。如果你因为没有美区 App Store 账号而下载不到 <a href="/misc/goto?guid=4959629807678673475" target="_blank">Paper</a> 的话，那恭喜你，你可以在中国区的App Store下载到 <a href="https://itunes.apple.com/cn/app/al-gore-our-choice-plan-to/id432753658?l=en&mt=8" target="_blank">Our Choice</a>，RMB 30。如果你还没有被我的啰嗦所打败，或者你已经对我啰嗦的话语感到深恶痛绝，那你可以出门左拐到优酷看看在 Mike Matas 在 TED 上的<a href="/misc/goto?guid=4959629808463773201" target="_blank">《下一代的电子书》</a>演讲。 </p> <p>说了这么多废话之后，终于可以再回到正题了！如果你体验完了<a href="https://itunes.apple.com/cn/app/al-gore-our-choice-plan-to/id432753658?l=en&mt=8" target="_blank">Our Choice</a> 和 <a href="/misc/goto?guid=4959629807678673475" target="_blank">Paper </a>这两款 App后，你会发现他们的交互和动画几乎如出一辙。对，他们都是 <a href="/misc/goto?guid=4959629808617748558" target="_blank">Kimon Tsinteris</a> 开发的。那么问题又来了，<a href="/misc/goto?guid=4959629808617748558" target="_blank">Kimon Tsinteris</a> 这个又是谁呢？他是Push Pop Press 的联合创始人，曾在苹果担任高级工程师，并参与了 iPhone 和iPad 上的软件研发（iPhone的指南针及地图）。2011年，非死book收购了他的公司，此后他便和 <a href="/misc/goto?guid=4959629807809370461" target="_blank">Mike Matas</a> 加入了非死book负责非死book iOS版本的开发。<a href="/misc/goto?guid=4959629807809370461" target="_blank">Mike Matas</a> 和 <a href="/misc/goto?guid=4959629808617748558" target="_blank">Kimon Tsinteris</a> 他们都有一个共同的特点，那就是不满足于苹果自身动画框架的单调，他们认为： </p> <blockquote> <p>随着触屏设备的不断发展，用户需要更加逼真的动画形式。对于用户来说，如果触摸屏上的元素可以对其触摸动作作出反馈，那么它也应该对其触摸的速率作出反馈。这也将是移动设备上动画效果接下来的发展趋势。 </p> </blockquote> <p>他们创办的Push Pop Press 就一直致力于创造一个逼真的、充满物理效应的体验，伴随着被非死book收购后，他们这一理念也就自然而然的带到了他们所负责的产品身上，Paper 就是这样的一个产物。故事到此当然还没有结束，他们发布完Paper 之后，更进一步将其背后的<a href="/misc/goto?guid=4958834236861842094" target="_blank">动画引擎POP</a>开源了！它目前在Github上有着10250个Star。借助于POP这个动画引擎，iOS 开发者将至少有6类动画效果可以使用了，如果再把自定义功能加进去，那么在众多开发者的努力下人机交互动画将产生无限多的可能。而这正是Pop引擎背后的工程师所愿意看到的。让我们来看看 <a href="/misc/goto?guid=4959629808617748558" target="_blank">Kimon Tsinteris</a> 本人对这个开源库的介绍： </p> <blockquote> <p>今天我们开源了实现Paper应用平滑动画和转场效果的动画引擎Pop。使用动态动画(dynamic animations)而不是传统的静态动画(static animations)，Pop使常见的滑动(scrolling)、弹跳(bouncing)、折叠(unfolding)等效果充满了活力，也使 Paper给人一种耳目一新的感觉。 </p> </blockquote> <blockquote> <p>手势交互的革新迎来了新的一轮软件设计的浪潮。人们可以用手指直接操作屏幕上的元素，（而不像以前，需要一支笔），这就降低了交互的间接性（反着说，就是交互更直接），于是，人们又提出更进一步的要求：既然触屏可以得到处理，那么不同速度的滑屏操作也应该得到处理。 </p> </blockquote> <blockquote> <p>当我在2010年联合创办Push Pop Press公司的时候，我们的目标就是要创造一种可行的、基于物理效果(physics-everywhere)的体验。我们在寻求一种可以使人们非常愉悦、轻松的使用整个应用的解决方案，就像我们使用UIScrollView那样的顺滑。 </p> </blockquote> <p>所以从上面的这些我们可以看到，他们倡导的是随着触屏设备的不断发展，在我们的项目中应该充分的利用触屏设备的手势交互功能，App应该对用户的手势做一些相应地反应，这些反应可以包括滑动的速度、滑动的方向、重力感应、用户晃动手机的方向等等，通过这些反应来提供给用户一种愉悦、轻松的体验。 </p> <p>在 iOS 7 之前，我们看到的大量的App都是通过iOS系统提供的Core Animation framework所支持的传统的静态动画来实现一些简单的线性动画(linear)、淡入效果(ease-in)和淡出效果(ease-out)。 </p> <div href="https://simg.open-open.com/show/919f7a7796098bccbe5d2e7846d5dea2.png"> <img src="https://simg.open-open.com/show/919f7a7796098bccbe5d2e7846d5dea2.png" width="668" height="205" /> <br /> <div> iOS系统支持提供的基础的静态动画 </div> </div> <p>常规的App界面操作大体是这样的：用户点击界面上的按钮，界面通过利用上述的静态动画做出相应的反应，比如最常见的 NavigationController中界面切换的“左进右出”动画、模态视图的“下进下出”动画。这些静态动画大部分没有利用到触屏设备的手势交互功能。那些不满足现状的开发者们想做出精彩的动态动画效果大都花了九牛二虎之力，印象最深的就是看到一些应用将模态视图的“下进下出”动画硬生生的改成的了NavigationController的“左进右出”展示动画，然后就经常遇到视图控制器混乱的问题，这样的代码也不利于维护和修改。当然在iOS 7之前苹果引入了一些方法和类来解决一些问题，如UIPageViewController类、UICollectionViewController 类，以及addChildViewController:、removeFromParentViewController、 transitionFromViewController:toViewController: duration:options:animations: completion:等方法。但是，这些还是类的使用还是有着很大的局限性。尤其是addChildViewController:、 removeFromParentViewController、 transitionFromViewController:toViewController: duration:options:animations: completion: 这几个方法的重用性几乎为0。 </p> <p>一切的转变发生在 iOS 7，iOS 7最大的变化就是从 iOS 6 的拟物化换成扁平化。同时，加入了大量的动态效果。这里贴几张图来看看：图一是在墙纸选取界面多了一个动态墙纸选项，如果你选择了动态墙纸，在主页面当你左右晃动手机时，墙纸也会跟着动。图二是在应用中，你现在可以通过右滑手势返回到上一级界面，随着你的滑动，界面会跟着移动。图三是Messages的弹簧效果。从这些我们可以直观的看到，从iOS 7开始，苹果也开始鼓励使用动态动画。 </p> <div href="https://simg.open-open.com/show/32751e4c4e1d610054a38a746451b6a4.jpg"> <img src="https://simg.open-open.com/show/32751e4c4e1d610054a38a746451b6a4.jpg" width="640" height="1136" /> <br /> <div> 图一：动态墙纸设置 </div> </div> <p><br /> </p> <p><br /> </p> <div href="https://simg.open-open.com/show/0cccb0b7d5841b8c95d85785dafaf114.jpg"> <img src="https://simg.open-open.com/show/0cccb0b7d5841b8c95d85785dafaf114.jpg" width="640" height="1136" /> <br /> <div> 图二：右滑返回上一级界面 </div> </div> <p><br /> </p> <div href="https://simg.open-open.com/show/24975d1eb6600612971059afddb6ef70.gif"> <img src="https://simg.open-open.com/show/24975d1eb6600612971059afddb6ef70.gif" width="192" height="340" /> <br /> <div> 图三：消息应用 </div> </div> <p>既然有直观的，那肯定就会用户不直观的东西。那就是 iOS 7 的SDK（Software Development Kit，软件开发工具包）。 </p> <p>通过 iOS 7 的SDK（真的是罪过，现在都已经是iOS 8了，我还在研究iOS 7）我们可以看到这几个东西： </p> <p>1、UIKit Dynamics （UIKit动力学） </p> <p>UIKit Dynamics是UIKit中一套完整的物理引擎。它可以让我们在程序中对界面元素添加一些行为从而达到诸如重力、弹簧等现实中的动作行为。你只需在引擎中注册界面元素，并指定好物理行为，其他的事就交给物理引擎去完成了。 </p> <p>2、Motion Effects </p> <p>Motion Effects 可以创建很酷的视差效果，就像我们上面提到的首屏动态壁纸。它基于Apple提供的重力加速器提供的数据计算分析，使我们的界面元素根据移动设备的倾斜方向做出相应的反应。 </p> <p>3、Custom View Controller Transitions（自定义视图控制器转场） </p> <p>它是给出了一套完整的自定义View Controller之间切换效果的方案，你可以通过它简单、方便的自定义各种界面切换效果。可以轻松的就改变NavigationController中界面切换的“左进右出”动画和模态视图的“下进下出”动画。 </p> <p>这就是iOS 7上关于交互的重大改变，现在你可以通过有效的利用这些特性开发出独一无二的动画，玩出各种各样的特效，也让人机交互动画产生无限多的可能。 </p> <p>本文的目的不是介绍和讲解这些新特性，所以在此不做任何介绍。 </p> <h2>正文 </h2> <p>尽管 iOS 7 带来了如此伟大的特性（请允许我用“伟大”来形容），但是遗憾是，在日常常用的App中你并不容易看到这些变化，大部分应用还是采用着老式的静态动画，即使iOS 8都已经推出了大半年，即使在网络上可以轻松的找到这些新特性的教程，即使你可以看到国外大量的采用这些新特性的应用并带来了全新的交互体验。。。。。。 </p> <p>我觉得可能有以下几个原因： </p> <p>1、国内很多常用的应用都还支持着iOS 6，甚至是iOS 5，所以导致他们没有办法很快的用上最新的特性； </p> <p>2、很多公司觉得没必要在市场反响很好、有着大量用户的产品上做这些实验设计，即使他们做这些设计易如反掌； </p> <p>3、设计师、产品经理、工程师对于系统的一些新特性没有及时的了解、学习跟交流，所以会出现不知道系统可以实现这些效果，即使是知道了这些特性，但是如何应用，如何设计动画又是个头疼的问题。 </p> <p>对于第2点显然我们没有什么能够做的，但对于第1点跟第3点我觉得我们还是可以做点力所能及的事的。 </p> <p>首先，对于第1点就是多鼓励身边的人将他们的手机系统升级到最新的系统，这不仅仅是为了能让开发者可以更加放心地、更加容易地开发出优秀的App, 同时，由于系统的更新往往伴随着旧系统一些bug、漏洞的修复，所以也可以让用户更加安全、放心的使用手机，毕竟手机现在在我们日常生活中得地位是如此的重要。 </p> <p>其次，对于第二点，就是我们今天的重点了（现在才到重点！你应该有种把我杀了的冲动吧！）。由于最近在负责一个新项目，在交互、动画的效果和实现上尝试了很多，看了很多Github上的开源库，虽然还不能简单、轻松的理解和实现那些效果，但还是觉得收获满满。古人云“独乐乐，不如众乐乐”，所以在此把看到的觉得不错的、有意思的效果列出来供大家学习参考，由于本文不是技术文章，所以只看效果、只给Github链接地址，不讨论具体实现方式等等。 </p> <h4>1、转场动画 </h4> <p><a href="/misc/goto?guid=4959549011060904693" target="_blank">VCTransitionsLibrary</a> </p> <div href="https://simg.open-open.com/show/df530f659dae044fa0fcfb9ebd913fbb.png"> <img src="https://simg.open-open.com/show/df530f659dae044fa0fcfb9ebd913fbb.png" width="170" height="302" /> <br /> </div> <div href="https://simg.open-open.com/show/e62211f79c9c0559684100e09faea6c1.png"> <img src="https://simg.open-open.com/show/e62211f79c9c0559684100e09faea6c1.png" width="170" height="302" /> <br /> </div> <div href="https://simg.open-open.com/show/d2b88d5a855ef45f75ffe4ab23e7ce83.png"> <img src="https://simg.open-open.com/show/d2b88d5a855ef45f75ffe4ab23e7ce83.png" width="170" height="302" /> <br /> </div> <p><a href="/misc/goto?guid=4959629808950402534" target="_blank">AnimatedTransitionGallery</a> </p> <p><br /> </p> <div href="https://simg.open-open.com/show/32a3cd0480fb47043af09fc2895eb902.gif"> <img src="https://simg.open-open.com/show/32a3cd0480fb47043af09fc2895eb902.gif" width="200" height="356" /> <br /> </div> <p><a href="/misc/goto?guid=4959629809069136285" target="_blank">ZFDragableModalTransition</a> </p> <div href="https://simg.open-open.com/show/eef3f0c1a296f152a380f2a1189b5d52.gif"> <img src="https://simg.open-open.com/show/eef3f0c1a296f152a380f2a1189b5d52.gif" width="431" height="850" /> <br /> </div> <p><a href="/misc/goto?guid=4959629809190102584" target="_blank">GTAppMenuController</a> </p> <div href="https://simg.open-open.com/show/94c2619701f6cd146c93aa92cc67d7a9.gif"> <img src="https://simg.open-open.com/show/94c2619701f6cd146c93aa92cc67d7a9.gif" width="320" height="563" /> <br /> </div> <p><a href="/misc/goto?guid=4959629809316601492" target="_blank">ICGTransitionAnimation</a> </p> <div href="https://simg.open-open.com/show/e0b20ec3f3a78e710bcfe3259cdaa279.gif"> <img src="https://simg.open-open.com/show/e0b20ec3f3a78e710bcfe3259cdaa279.gif" width="473" height="715" /> <br /> </div> <p><a href="/misc/goto?guid=4959629809437634564" target="_blank">CBHazeTransitionViewController</a> </p> <div href="https://simg.open-open.com/show/4224d1dc634308a92a2b9acbf2852dc9.gif"> <img src="https://simg.open-open.com/show/4224d1dc634308a92a2b9acbf2852dc9.gif" width="319" height="565" /> <br /> </div> <p><a href="/misc/goto?guid=4958968203015992832" target="_blank">CSStickyHeaderFlowLayout</a> </p> <div href="https://simg.open-open.com/show/f2c63e93e0dfd38bce39c90be4ef7cc6.gif"> <img src="https://simg.open-open.com/show/f2c63e93e0dfd38bce39c90be4ef7cc6.gif" width="320" height="568" /> <br /> </div> <div href="https://simg.open-open.com/show/0d7fd3b09f246db6b9cb53a16b5e0a76.gif"> <img src="https://simg.open-open.com/show/0d7fd3b09f246db6b9cb53a16b5e0a76.gif" width="320" height="568" /> <br /> </div> <div href="https://simg.open-open.com/show/7ea4b4d576905817d01317049f470136.gif"> <img src="https://simg.open-open.com/show/7ea4b4d576905817d01317049f470136.gif" width="320" height="568" /> <br /> </div> <p><a href="/misc/goto?guid=4959629809610475029" target="_blank">PinterestAnimator</a> </p> <div href="https://simg.open-open.com/show/433bd31c895a40984e48e181cbf95fc1.gif"> <img src="https://simg.open-open.com/show/433bd31c895a40984e48e181cbf95fc1.gif" width="378" height="798" /> <br /> </div> <div href="https://simg.open-open.com/show/0adfe69416335560f8b71dbf97e09e1d.gif"> <img src="https://simg.open-open.com/show/0adfe69416335560f8b71dbf97e09e1d.gif" width="316" height="565" /> <br /> </div> <h4>2、输入框<br /> </h4> <p><a href="/misc/goto?guid=4959629809743691615" target="_blank">RPFloatingPlaceholders</a> </p> <div href="https://simg.open-open.com/show/0163963f28e8c95236b5c4f77890309b.gif"> <img src="https://simg.open-open.com/show/0163963f28e8c95236b5c4f77890309b.gif" width="487" height="313" /> <br /> </div> <p><a href="/misc/goto?guid=4958870674686053963" target="_blank">JVFloatLabeledTextField</a> </p> <div href="https://simg.open-open.com/show/1aa3460749938cfc2c4572273a509953.gif"> <img src="https://simg.open-open.com/show/1aa3460749938cfc2c4572273a509953.gif" width="700" height="525.0" /> <br /> </div> <p><a href="/misc/goto?guid=4958975508846517341" target="_blank">LTBouncyPlaceholder</a> </p> <div href="https://simg.open-open.com/show/2e7fef84b99f79ab17098bd2bbce04de.gif"> <img src="https://simg.open-open.com/show/2e7fef84b99f79ab17098bd2bbce04de.gif" width="644" height="1162" /> <br /> </div> <h4>3、加载动画 </h4> <p><a href="/misc/goto?guid=4959629810105230065" target="_blank">PWProgressView</a> </p> <div href="https://simg.open-open.com/show/6a1414c87874b7622b4fdcb8080832ef.gif"> <img src="https://simg.open-open.com/show/6a1414c87874b7622b4fdcb8080832ef.gif" /> <br /> </div> <p><a href="/misc/goto?guid=4959629810221026421" target="_blank">UAProgressView</a> </p> <p><a href="/misc/goto?guid=4959629810351768219" target="_blank">RJImageLoader</a> </p> <p><br /> </p> <div href="https://simg.open-open.com/show/269d04ddc770815d126a6fe13da3547d.gif"> <img src="https://simg.open-open.com/show/269d04ddc770815d126a6fe13da3547d.gif" width="400" height="284" /> <br /> </div> <p><a href="/misc/goto?guid=4958858120136050271" target="_blank">PQFCustomLoaders</a> </p> <div href="https://simg.open-open.com/show/fd9f31684e09bcca6959eecca9c5ccaa.gif"> <img src="https://simg.open-open.com/show/fd9f31684e09bcca6959eecca9c5ccaa.gif" width="316" height="562" /> <br /> </div> <h4>4、下拉动画<br /> </h4> <p><a href="/misc/goto?guid=4959629810516092100" target="_blank">UzysAnimatedGifPullToRefresh</a> </p> <div href="https://simg.open-open.com/show/de4f22fb7575679860a8a6b34cc163fb.gif"> <img src="https://simg.open-open.com/show/de4f22fb7575679860a8a6b34cc163fb.gif" width="320" height="300" /> <br /> </div> <p><a href="/misc/goto?guid=4959629810644939121" target="_blank">Pull-to-Refresh.Rentals-iOS</a> </p> <div href="https://simg.open-open.com/show/614dd39dd11646d05a35c8d77fe25956.gif"> <img src="https://simg.open-open.com/show/614dd39dd11646d05a35c8d77fe25956.gif" width="700" height="525.0" /> <br /> </div> <p><a href="/misc/goto?guid=4958968151447036880" target="_blank">CBStoreHouseRefreshControl</a> </p> <div href="https://simg.open-open.com/show/837d0028497e03af37dafdd181960914.gif"> <img src="https://simg.open-open.com/show/837d0028497e03af37dafdd181960914.gif" width="370" height="229" /> <br /> </div> <p><br /> </p> <div href="https://simg.open-open.com/show/02ac926142cd228027efaf58176b12eb.gif"> <img src="https://simg.open-open.com/show/02ac926142cd228027efaf58176b12eb.gif" width="370" height="229" /> <br /> </div> <h4>5、UITableCell </h4> <p><a href="/misc/goto?guid=4958870674769810120" target="_blank">SWTableViewCell</a> </p> <div href="https://simg.open-open.com/show/bfe2ac9faa8c462a07bd9c72ebe88d0b.gif"> <img src="https://simg.open-open.com/show/bfe2ac9faa8c462a07bd9c72ebe88d0b.gif" width="634" height="178" /> <br /> </div> <p><a href="/misc/goto?guid=4958968159730531484" target="_blank">MGSwipeTableCell</a> </p> <div href="https://simg.open-open.com/show/1b1f3e40b9879389e6f5e3c146a7e8e3.gif"> <img src="https://simg.open-open.com/show/1b1f3e40b9879389e6f5e3c146a7e8e3.gif" width="478" height="176" /> <br /> </div> <div href="https://simg.open-open.com/show/e592d28342d4fef03eaa257c0886a414.gif"> <img src="https://simg.open-open.com/show/e592d28342d4fef03eaa257c0886a414.gif" width="478" height="176" /> <br /> </div> <div href="https://simg.open-open.com/show/8f81af39de89152f77536931daf9022d.gif"> <img src="https://simg.open-open.com/show/8f81af39de89152f77536931daf9022d.gif" width="478" height="176" /> <br /> </div> <div href="https://simg.open-open.com/show/83d536017ee96179b9418d3fac128e51.gif"> <img src="https://simg.open-open.com/show/83d536017ee96179b9418d3fac128e51.gif" width="478" height="176" /> <br /> </div> <div href="https://simg.open-open.com/show/a10b6ef716c357b0a6179060776b75cf.gif"> <img src="https://simg.open-open.com/show/a10b6ef716c357b0a6179060776b75cf.gif" width="478" height="176" /> <br /> </div> <h4>6、视图展示<br /> </h4> <p><a href="/misc/goto?guid=4959629810924321217" target="_blank">MGSpotyViewController</a> </p> <div href="https://simg.open-open.com/show/10786c9400af3faac2db2349b26e379e.gif"> <img src="https://simg.open-open.com/show/10786c9400af3faac2db2349b26e379e.gif" width="300" height="535" /> <br /> </div> <p><a href="/misc/goto?guid=4959629811042873639" target="_blank">RKCardView</a> </p> <div href="https://simg.open-open.com/show/938be0499bb385fab7cd6ef9ccf8a045.png"> <img src="https://simg.open-open.com/show/938be0499bb385fab7cd6ef9ccf8a045.png" width="700" height="558.5999999999999" /> <br /> </div> <div href="https://simg.open-open.com/show/268bcba3db2794af018eacfcb553d9df.jpg"> <img src="https://simg.open-open.com/show/268bcba3db2794af018eacfcb553d9df.jpg" width="360" height="640" /> <br /> </div> <p><a href="/misc/goto?guid=4959629811166299322" target="_blank">HAPaperViewController</a> </p> <div href="https://simg.open-open.com/show/51ee63c9e7d261e9031c20b16cdbc071.gif"> <img src="https://simg.open-open.com/show/51ee63c9e7d261e9031c20b16cdbc071.gif" width="382" height="806" /> <br /> </div> <p><a href="/misc/goto?guid=4959629811296648199" target="_blank">AMLoginViewController</a>（背景模糊、加视频） </p> <div href="https://simg.open-open.com/show/44b033e8716267742f3a8ad9ab8d59dc.png"> <img src="https://simg.open-open.com/show/44b033e8716267742f3a8ad9ab8d59dc.png" width="640" height="1136" /> <br /> </div> <div href="https://simg.open-open.com/show/dada9598d2b13b65a0e55fefe4c6d956.png"> <img src="https://simg.open-open.com/show/dada9598d2b13b65a0e55fefe4c6d956.png" width="640" height="1136" /> <br /> </div> <p><a href="/misc/goto?guid=4959629811422254709" target="_blank">VideoCover-iOS-Demo</a>（背景加视频） </p> <div href="https://simg.open-open.com/show/f0965f1a562984beb1f8405076fe15e8.png"> <img src="https://simg.open-open.com/show/f0965f1a562984beb1f8405076fe15e8.png" /> <br /> </div> <p><a href="/misc/goto?guid=4959629811553455914" target="_blank">DVOBouncer</a> </p> <div href="https://simg.open-open.com/show/5450456e0499c42f42e9f595879219e8.gif"> <img src="https://simg.open-open.com/show/5450456e0499c42f42e9f595879219e8.gif" width="280" height="419" /> <br /> </div> <p><a href="/misc/goto?guid=4959629537893170245" target="_blank">UIView-Shake</a> </p> <div href="https://simg.open-open.com/show/e8701b0fb3b0b210415d37520c2797a7.gif"> <img src="https://simg.open-open.com/show/e8701b0fb3b0b210415d37520c2797a7.gif" width="178" height="373" /> <br /> </div> <p><a href="/misc/goto?guid=4959555822483460442" target="_blank">AMWaveTransition</a> </p> <div href="https://simg.open-open.com/show/e8659a0ae32c6d518b596bb7cdce09e0.gif"> <img src="https://simg.open-open.com/show/e8659a0ae32c6d518b596bb7cdce09e0.gif" width="250" height="517" /> <br /> </div> <p><a href="/misc/goto?guid=4959629811771486218" target="_blank">URBMediaFocusViewController</a> </p> <div href="https://simg.open-open.com/show/d4bdb18bdef2add18c7617258cff6c00.gif"> <img src="https://simg.open-open.com/show/d4bdb18bdef2add18c7617258cff6c00.gif" /> <br /> </div> <p><a href="/misc/goto?guid=4959555340042052176" target="_blank">推terBirdAnimation</a> 和 <a href="/misc/goto?guid=4958838687844809147" target="_blank">CBZSplashView</a> 效果一样 </p> <div href="https://simg.open-open.com/show/85bb9550c02f1ba3fdec9a3401c8f146.gif"> <img src="https://simg.open-open.com/show/85bb9550c02f1ba3fdec9a3401c8f146.gif" width="390" height="810" /> <br /> </div> <p><a href="/misc/goto?guid=4958968164904612218" target="_blank">RKNotificationHub</a> </p> <div href="https://simg.open-open.com/show/aa2dcd41a3d1a02f8b89d35d652e252c.gif"> <img src="https://simg.open-open.com/show/aa2dcd41a3d1a02f8b89d35d652e252c.gif" width="700" height="486.6141732283465" /> <br /> </div> <p><a href="/misc/goto?guid=4959629812044693952" target="_blank">SOZOChromoplast</a> </p> <div href="https://simg.open-open.com/show/dead84319ce533acc50e8e1a8519cd06.gif"> <img src="https://simg.open-open.com/show/dead84319ce533acc50e8e1a8519cd06.gif" width="318" height="566" /> <br /> </div> <p><a href="/misc/goto?guid=4958860456732427166" target="_blank">VVBlurPresentation</a> </p> <div href="https://simg.open-open.com/show/9500cbad31f0b90113bd4aeea1b147ed.gif"> <img src="https://simg.open-open.com/show/9500cbad31f0b90113bd4aeea1b147ed.gif" width="366" height="662" /> <br /> </div> <p><a href="/misc/goto?guid=4958968186771757740" target="_blank">TinderSimpleSwipeCards</a> </p> <div href="https://simg.open-open.com/show/393c9ce5254f609f5984dae92085fd0e.gif"> <img src="https://simg.open-open.com/show/393c9ce5254f609f5984dae92085fd0e.gif" width="317" height="564" /> <br /> </div> <p><a href="/misc/goto?guid=4959629812279504677" target="_blank">ZLSwipeableView</a> </p> <div href="https://simg.open-open.com/show/d393590bccabba3a9afbe8202b5d42f5.gif"> <img src="https://simg.open-open.com/show/d393590bccabba3a9afbe8202b5d42f5.gif" width="320" height="569" /> <br /> </div> <p><a href="/misc/goto?guid=4959629812402491200" target="_blank">RGCardViewLayout</a> </p> <div href="https://simg.open-open.com/show/2d1c9988d5578842fc531137fc5ecfca.gif"> <img src="https://simg.open-open.com/show/2d1c9988d5578842fc531137fc5ecfca.gif" width="248" height="440" /> <br /> </div> <p><a href="/misc/goto?guid=4959629812524146889" target="_blank">AFBlurSegue</a> </p> <div href="https://simg.open-open.com/show/c84e6ddecac7e6a7551f90625aad7989.gif"> <img src="https://simg.open-open.com/show/c84e6ddecac7e6a7551f90625aad7989.gif" width="477" height="848" /> <br /> </div> <p><a href="/misc/goto?guid=4959629812647887057" target="_blank">BRFlabbyTable</a> </p> <div href="http://static.open-open.com/lib/uploadImg/20160111/20160111221037_925.png"> <img src="http://static.open-open.com/lib/uploadImg/20160111/20160111221037_925.png" /> <br /> </div> <div href="https://simg.open-open.com/show/d561bfc3eae719a134e229c228a01713.png"> <img src="https://simg.open-open.com/show/d561bfc3eae719a134e229c228a01713.png" width="320" height="604" /> <br /> </div> <p><a href="/misc/goto?guid=4959629812772001234" target="_blank">VPRubberMenu</a> </p> <div href="https://simg.open-open.com/show/3fafe4b8baee6e71d67d3882ed9781ce.gif"> <img src="https://simg.open-open.com/show/3fafe4b8baee6e71d67d3882ed9781ce.gif" width="316" height="588" /> <br /> </div> <p><a href="/misc/goto?guid=4959629812900969641" target="_blank">YFCardTransitions</a> </p> <div href="https://simg.open-open.com/show/5e83f9e377fc382b17129034e7c9cb6f.gif"> <img src="https://simg.open-open.com/show/5e83f9e377fc382b17129034e7c9cb6f.gif" width="320" height="568" /> <br /> </div> <p><a href="/misc/goto?guid=4959629813024867196" target="_blank">TGLStackedViewController</a> </p> <div href="https://simg.open-open.com/show/68e6bb7830b6ea3380ef3605a714a621.gif"> <img src="https://simg.open-open.com/show/68e6bb7830b6ea3380ef3605a714a621.gif" width="320" height="570" /> <br /> </div> <p><a href="/misc/goto?guid=4959629813146729998" target="_blank">CXCardView</a> </p> <div href="https://simg.open-open.com/show/aa1a5bb7a30b3ae95fd45c8acbb9e50b.gif"> <img src="https://simg.open-open.com/show/aa1a5bb7a30b3ae95fd45c8acbb9e50b.gif" width="320" height="429" /> <br /> </div> <div href="https://simg.open-open.com/show/dd843c6a17018b4d2b86856f06033e31.gif"> <img src="https://simg.open-open.com/show/dd843c6a17018b4d2b86856f06033e31.gif" width="320" height="429" /> <br /> </div> <h4>7、UILabel<br /> </h4> <p><a href="/misc/goto?guid=4959629813272736159" target="_blank">LazyFadeInView</a> </p> <p><a href="/misc/goto?guid=4959555821623049754" target="_blank">RQShineLabel</a> </p> <div href="https://simg.open-open.com/show/29875ecda9dde56eb9273d9fa6aff3f6.gif"> <img src="https://simg.open-open.com/show/29875ecda9dde56eb9273d9fa6aff3f6.gif" width="466" height="320" /> <br /> </div> <p><br /> </p> <p><a href="/misc/goto?guid=4958860520655958229" target="_blank">LTMorphingLabel</a> </p> <div href="https://simg.open-open.com/show/9bf7ea9311be2634671928f7bd4988b5.gif"> <img src="https://simg.open-open.com/show/9bf7ea9311be2634671928f7bd4988b5.gif" width="600" height="140" /> <br /> </div> <div href="https://simg.open-open.com/show/2e5c8805c3893d47ef08b0b92e89326a.gif"> <img src="https://simg.open-open.com/show/2e5c8805c3893d47ef08b0b92e89326a.gif" width="600" height="140" /> <br /> </div> <div href="https://simg.open-open.com/show/a92e5a058c21fa1ddac5a8827ed9e6af.gif"> <img src="https://simg.open-open.com/show/a92e5a058c21fa1ddac5a8827ed9e6af.gif" width="600" height="140" /> <br /> </div> <div href="https://simg.open-open.com/show/e6e119d1ba10bd945cb4f3270cc589b0.gif"> <img src="https://simg.open-open.com/show/e6e119d1ba10bd945cb4f3270cc589b0.gif" width="600" height="140" /> <br /> </div> <div href="https://simg.open-open.com/show/386ff6c5caf7562cc505b043742c325f.gif"> <img src="https://simg.open-open.com/show/386ff6c5caf7562cc505b043742c325f.gif" width="600" height="140" /> <br /> </div> <h4>8、UIButton<br /> </h4> <p><a href="/misc/goto?guid=4959616326830442655" target="_blank">ZFRippleButton</a> </p> <div href="https://simg.open-open.com/show/5bdeaad6484c30f014b83cc211b5a603.gif"> <img src="https://simg.open-open.com/show/5bdeaad6484c30f014b83cc211b5a603.gif" width="162" height="84" /> <br /> </div> <div href="https://simg.open-open.com/show/455e811bc160f6643e54c86527d3c261.gif"> <img src="https://simg.open-open.com/show/455e811bc160f6643e54c86527d3c261.gif" width="146" height="108" /> <br /> </div> <p><a href="/misc/goto?guid=4959629813546052816" target="_blank">BFPaperCheckbox</a> </p> <div href="https://simg.open-open.com/show/a0403b6924259db580f0e2baf4d1042b.gif"> <img src="https://simg.open-open.com/show/a0403b6924259db580f0e2baf4d1042b.gif" width="477" height="849" /> <br /> </div> <p><a href="/misc/goto?guid=4959629813670995326" target="_blank">YLLongTapShare</a> </p> <div href="https://simg.open-open.com/show/074438e7c75034df2dcf37ba1057803e.gif"> <img src="https://simg.open-open.com/show/074438e7c75034df2dcf37ba1057803e.gif" width="700" height="525.0" /> <br /> </div> <p><a href="/misc/goto?guid=4959629813798960920" target="_blank">VBFPopFlatButton</a> </p> <div href="https://simg.open-open.com/show/29f1ea6e09a330792b74b4fabd891420.gif"> <img src="https://simg.open-open.com/show/29f1ea6e09a330792b74b4fabd891420.gif" width="700" height="525.0" /> <br /> </div> <h4>9、UINavigationBar </h4> <p><a href="/misc/goto?guid=4959629813920030237" target="_blank">TLYShyNavBar</a> </p> <p><br /> </p> <div href="https://simg.open-open.com/show/30e7c824278f828cee3cfd5ae9f14f93.gif"> <img src="https://simg.open-open.com/show/30e7c824278f828cee3cfd5ae9f14f93.gif" width="320" height="190" /> <br /> </div> <p><a href="/misc/goto?guid=4958968159982680024" target="_blank">LTNavigationBar</a> </p> <div href="https://simg.open-open.com/show/00f7382b8c57d9d0f01ccf7fc5fbc0d0.gif"> <img src="https://simg.open-open.com/show/00f7382b8c57d9d0f01ccf7fc5fbc0d0.gif" width="371" height="562" /> <br /> </div> <div href="https://simg.open-open.com/show/cad4c733646906988574256f808b2ad7.gif"> <img src="https://simg.open-open.com/show/cad4c733646906988574256f808b2ad7.gif" width="371" height="562" /> <br /> </div> <p><a href="/misc/goto?guid=4958868594123182207" target="_blank">BLKFlexibleHeightBar</a> </p> <div href="https://simg.open-open.com/show/54683f7cdf8a87fd83cfe0e9e8f902cb.gif"> <img src="https://simg.open-open.com/show/54683f7cdf8a87fd83cfe0e9e8f902cb.gif" width="750" height="1334" /> <br /> </div> <div href="https://simg.open-open.com/show/015356402ff841a4ac7fcf91ad812f39.gif"> <img src="https://simg.open-open.com/show/015356402ff841a4ac7fcf91ad812f39.gif" width="750" height="1334" /> <br /> </div> <p><a href="/misc/goto?guid=4959629814137993345" target="_blank">BMYScrollableNavigationBar</a> </p> <div href="https://simg.open-open.com/show/3a343a229e3d8422d4eee3a112ba57c3.gif"> <img src="https://simg.open-open.com/show/3a343a229e3d8422d4eee3a112ba57c3.gif" width="360" height="238" /> <br /> </div> <p><br /> </p> <h2>最后 </h2> <p>如果你看到了这里，那么我真的太感谢你了！谢谢！ </p> <p><br /> </p> <h2>附录： </h2> <p>1、<a href="/misc/goto?guid=4959629814261614597" target="_blank">非死book开放动画引擎Pop，你也可以打造和Paper一样酷的应用了 </a> </p> <p>2、<a href="/misc/goto?guid=4959629814391511845" target="_blank">Introducing Pop, the animation engine behind Paper</a> </p> <p>3、<a href="/misc/goto?guid=4959629814521068092" target="_blank">非死book Paper背后的动画引擎Pop介绍（译文）</a> </p> </div> 来自：