iOS如何实现一个类似readme.io的动效登录界面 我们为什么需要动效!

    首先引入一个问题----我们为什么需要动效设计?

    我觉得cocoachina的一篇文章很好的阐述了这个问题的答案,包括加强体验舒适度,减弱不可避免的不适感等等!附链接:我们为什么需要动效设计

    本文所展示的动效登录界面就是参照文章中列出的readme.io网站的登录界面所编写的~

    本文效果Demo已经上传到github,点击去下载。

    最终效果展示:


iOS如何实现一个类似readme.io的动效登录界面 我们为什么需要动效!_第1张图片
AnimationLogingView


第一步:界面搭建

    界面搭建上并没有什么出奇的地方,通过storyboard进行界面拖拽,唯一值得一提的地方就是猫头鹰的两个圆形手和两个捂住眼睛的手都是imageView,其中捂住眼睛的手是事先放置在输入账户密码的界面后面被遮住。

    界面逻辑透视如图:


iOS如何实现一个类似readme.io的动效登录界面 我们为什么需要动效!_第2张图片

    具体UI搭建可以参照Demo中的逻辑去做即可。


第二步:动画效果实现

    关键代码:

iOS如何实现一个类似readme.io的动效登录界面 我们为什么需要动效!_第3张图片
动画代码

    这段代码实现的效果是在0.5s的时间内同时将隐藏在输入框界面后的捂眼手上移到指定位置,以及将本来趴在框上的手,一边向指定位置移动一边缩小一直到完全消失。

    由于两个手的颜色是相同的,移动轨迹上又是重叠的,所以实际效果会使人产生一种错觉,这个手是在慢慢变化的。


你可能感兴趣的:(iOS如何实现一个类似readme.io的动效登录界面 我们为什么需要动效!)