关闭

萌货猫头鹰登录界面动画iOS实现分析

标签: ios
277人阅读 评论(0) 收藏 举报
分类:

动画效果仿自国外网站readme.io的登录界面,超萌可爱的猫头鹰,具体效果如下图所示.

11924285-269beafa11ace458

动画实现核心:

动画核心的是用到了iOS中UIView的transform属性,然后根据尺寸坐标对四张图片进行平移以及缩放.
具体的图层结构如图所示:

12924285-5a5697866c105d3c

注意点:

  • 图中只露出两个点的手臂,是不需要裁剪的,有部分是能遮挡粉色view的.所以可以将它们与头部图片放在一个view中.
  • 而动画中的手臂只露出粉色文本框以上的部分的方法,是将两个手臂图片添加到一个另外一个View中,然后设置这个View的属性为超过UIView的部分自动裁剪.

核心代码:

步骤1:

主要视图在storyBorad中创建
1.将两个小点手臂图片和头部图片放到一个view中.

13924285-4a1cf16afb521bcd

2.将那两个长的手臂放到一个view中,然后将这个view堆叠到1中的view上,位置要对应,手正好能蒙住眼睛,这个view的属性要设置为超出部分自动裁剪.view的颜色为透明.

14924285-a5c4047952ecbd3a

3.最后的视图效果是这样的.

15924285-eb1993212fe7ea31

步骤2:

考虑到代码的封装性,我们可以这整个View关联到一个UIView的类中.
1.对图中的4张图片拖线到刚刚新建的类中,建立4个UIImageView属性.对一整个view进行拖线

2.在awakeFromNib方法中对控件进行初始化
获得手臂图片相对于一整个view的位置,以及整个view的宽高

根据以上数据计算得出,在初始状态手臂的位置(注意:设置图片时手臂是蒙住眼睛的,初始状态手臂是看不到的,只有两个小点(hand))

添加四个属性

3.猫头鹰的状态有两种,蒙住眼以及不蒙眼的

1.蒙眼状态

2.不蒙眼

至此萌版猫头鹰登录动画就完成了.

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30140次
    • 积分:470
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:78篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论