关闭

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

标签: ios
392人阅读 评论(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
查看评论

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

http://www.jianshu.com/p/2e2426e861d6 动画效果仿自国外网站readme.io的登录界面,超萌可爱的猫头鹰,具体效果如下图所示. 动画实现核心: 动画核心的是用到了iOS中UIView的transform属性,然后根据尺寸坐标...
  • mituan1234567
  • mituan1234567
  • 2015-09-30 14:29
  • 418

Swift - 一个纯代码实现的登录界面(带猫头鹰动画效果)

这个是一个可爱的登录框页面,动画效果仿自国外网站readme.io。在GitHub上有人写了个objective-C版本,这里我翻译成Swift版的分享给大家。 效果图如下: (1)当输入用户名时,猫头鹰的手是搭在登录框上 (2)当输入密码时,猫头鹰的手会遮住眼睛。这个...
  • yiyihuazi
  • yiyihuazi
  • 2017-06-17 22:10
  • 522

Android 超级萌的猫头鹰登录界面

最近在网上看到了一个比较不错的登录界面,效果如下图:   是不是很好玩;后来研究了一下,主要是通过自定义的View加上动画实现的,先看代码:   首先是自定义View:  public class OwlView extends View { ...
  • stephenzml
  • stephenzml
  • 2017-07-05 16:48
  • 213

1.Animation的使用 - 使用动画创建一个不同的登陆界面

Animation的使用 - 使用动画创建一个不同的登陆界面
  • qq350116542
  • qq350116542
  • 2015-12-27 17:38
  • 806

实现APP进入登录界面之前的动画效果

在我模仿一个APP的时候,我发现在进入登录界面之前有一个动画,在我看了这个demo之后,我知道了如何实现,就写下了这篇博文。
  • zjj7725
  • zjj7725
  • 2016-03-04 10:25
  • 1095

iOS 关于萌(蒙)层的添加,

自己封装的方法: +(void)showScoreInWindow:(NSString *)score showTimeValue:(CGFloat)time {     UIWindow *window = [UIApplication share...
  • TeemoOnDuty
  • TeemoOnDuty
  • 2015-11-09 19:44
  • 268

仿网易‘垃圾箱’动画效果

一说到动画,大家会说到CSS3动画,确实,本文带来一片简单的仿网易‘垃圾箱’动画效果,涉及到的知识点是transform、transition transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 transform: none|transfor...
  • spy19881201
  • spy19881201
  • 2014-08-19 21:37
  • 2063

Android实现登陆界面动画

先上效果图 静态的效果图无法完全展示效果。 上个gif图吧: 实现原理是利用安卓的AnimationDrawable资源。 在一个帧布局里有两个图层,下面的图层绘制一个椭圆,然后用Animation控制旋转,上面是一个viewpager,有两个页面,这两个页面个用Adapter填...
  • u012608587
  • u012608587
  • 2016-03-05 14:51
  • 2271

Android属性动画——实现炫酷的登录界面

这个星期还是比较忙,因为项目又要上线了,所以一个星期没有写博客了。今天是星期六,觉得总应该做点什么。今天我们聊聊我们常写的登录界面,这个界面我相信很多人都写过,而且也没什么难度,但是如果要实现比较不一般的效果,那就要花点心思了,先看看项目的效果吧: 我一直都不知道怎么在编辑框连设置图片大小,所以这...
  • qq_25193681
  • qq_25193681
  • 2016-07-23 16:57
  • 6042

货拉拉系统app开发

货拉拉app,货拉拉开发,货拉拉系统,货拉拉软件,货拉拉平台
  • jiangziya1035
  • jiangziya1035
  • 2017-07-30 18:22
  • 661
    个人资料
    • 访问:36770次
    • 积分:542
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:78篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论