卡片式弹出窗口

原文链接:The Card Interface For Signing Up

Apple公司在WWDC 2016前后带来了10个重大更新,其中重中之重可谓是iOS 10的更新了。iOS 10被称作iOS 7之后迎来的最大升级,在所有的革新中,无论在通知中心的UI修改,还是各处的3D Touch弹出层,都能看到卡片式设计的影子。笔者不是设计师,但是以一个iOS开发者的角度来看,iOS的扁平化设计风格,逐渐正在往在Google I/O 2014提出的卡片式设计靠拢。(关于更多的卡片式设计资料可查看这里)。

01

img_0.jpg

处此大势之下,我也跟风来搞一波。首先先感谢原型图的作者Sarah,虽然我不是Dribbble的Pro用户,无法在您的作品上留言,但之后我会及时的联系你。以下就是原型图的效果了:

img_1.gif

动画分析

观察全部特效,我们发现了以下步骤

  • 弹出卡片弹出窗口
  • 自定义UITextField填写进度动画
  • 卡片缩小至消失
  • 弹出logo动画片尾

其中我们忽略掉一个效果,就是在原型图中,触摸键移动到NEXT按钮上的动效。因为在手机上,我们不可能持续在屏幕上滑动手指,而是采