给登录页面加动画

效果图

login3.gif

主要思路

1.创建视图上的各个控件(标题,用户名,密码输入框,登录按钮,四个白云)

2.在viewDidLoad方法里,对视图上的控件的样式进行调整,比如圆角。对以后会出现在视图上的控件,进行设置,比如,点击登录时的小菊花提示,可以先设置透明度为0,当需要显示的时候再设置为1.

3.在viewWillAppear方法里,改变控件的位置或大小,透明度,给予控件一个动画的初始位置或初始大小,初始透明度。比如当前的标题在正中间,程序启动时希望他从左往右进入视图,所以给他的初始位置应该在视图的左侧。白云可以是慢慢显示出来的,所以透明度一开始设置为0.

4.在viewDidAppear方法里,让控件动起来。

使用动画的方法

UIView.animate(withDuration: 0.5) {
            self.heading.center.x += self.view.bounds.width 
}

普通动画(标题orange login),在0.5秒时间,heading沿x轴移动。

UIView.animate(withDuration: 0.5, delay: 0.3, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.0, options: [], animations: {
            self.username.center.x += self.view.bounds.width
}, completion: nil)

带有弹性的动画(登录按钮,输入框),0.3秒之后,在0.5秒时间里,username沿x轴移动。usingSpringWithDamping阻力(范围0-1),阻力越小,振幅越大,initialSpringVelocity初始速度,速度越大,移动越快。

UIView.transition(with: view, duration: 0.33, options: [.transitionFlipFromBottom], animations: {
            self.status.isHidden = true
        }, completion: nil)

过渡动画(登录状态显示),视图经过0.33秒,向下翻转,并隐藏。options:可以设置过渡的样式,是翻页,还是翻转。

完整代码https://github.com/chenruiming/OrangeLogin

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,003评论 3 119
  • layout: docs-default CORS 大部分IdentityServer的endpoint被Java...
    灭蒙鸟阅读 1,160评论 0 0
  • 前几天从网上看了这样一句话“静止便是死亡,只有运动才能敲开永生的大门”,这是来自文学家泰戈尔说的一句话。 有的人喜...
    SummerRunner阅读 282评论 2 4
  • 偶见一两树洁白的梨花,心里怆然一阵清凉与寂静,如此灿烂的春日始终还有一处黯然生长。老式的公交车发出沧桑的粗喘,老人...
    桃子满满阅读 225评论 0 2
  • 时间又到了11点,这时已洗漱完毕,可以舒服地坐在床上码字了,虽然会有那么一点交作业的焦虑感,但结束了一天的工作,此...
    踏雪taxue阅读 201评论 0 0