Swift

Swift Animation 显示层动画(一)

Posted by Calvin on 2017-06-19

位移动画

位移动画，顾名思义，在一定时间内视图移动到一定的位置。我们实现一下在登录页面设置登录按钮从左侧出现并移动到合适的位置。

1.初始化位置

// 第一阶段:初始化登录按钮
loginButton = UIButton(frame: CGRect(x: -394, y: 210, width: self.view.frame.width-20*2, height: 50))
loginButton!.backgroundColor = UIColor(colorLiteralRed: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登录", for: UIControlState.normal)
loginButton!.layer.cornerRadius = 3
self.view.addSubview(loginButton!)

2.在页面进入时移动按钮的位置

// 方法一:闭包
UIView.animate(withDuration: 1) { 
  self.loginButton!.frame = CGRect(x: 20, y: self.loginButton!.frame.origin.y, width: self.loginButton!.frame.width, height: self.loginButton!.frame.height)
}
// 方法二:方法形式
UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDuration(1)// 动画时间设置
loginButton!.frame = CGRect(x: 20, y: self.loginButton!.frame.origin.y, width: self.loginButton!.frame.width, height: self.loginButton!.frame.height)// 按钮位置变化
UIView.commitAnimations()// 提交动画// 方法二:方法形式
UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDuration(1)// 动画时间设置
loginButton!.frame = CGRect(x: 20, y: self.loginButton!.frame.origin.y, width: self.loginButton!.frame.width, height: self.loginButton!.frame.height)// 按钮位置变化
UIView.commitAnimations()// 提交动画

如图所示：

20170619149785461320448.gif

几何形状动画

几何形状动画：即让视图改变其视图形状。例如：我们实现让登录页面的登录按钮由两侧向中间收拢的效果。

1.初始化按钮

loginButton = UIButton(frame: CGRect(x: 20, y: 210, width: self.view.frame.width-20*2, height: 50))
loginButton!.backgroundColor = UIColor(colorLiteralRed: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登录", for: UIControlState.normal)
loginButton!.layer.cornerRadius = 3
self.view.addSubview(loginButton!)

2.改变按钮的宽为之前的0.7倍，高度为之前的1.2倍，动画时间2s

// 几何形状动画
UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDuration(2)// 动画时间
loginButton!.bounds = CGRect(x: 0, y: 0, width: loginButton!.frame.size.width*0.7, height: loginButton!.frame.size.height*1.2)
UIView.commitAnimations()// 动画提交

如图所示：

20170619149785916847478.gif

位置+形状动画

在登录页面，设置登录按钮的位置和形状大小的改变

1.初始化按钮

loginButton = UIButton(frame: CGRect(x: 20, y: 210, width: self.view.frame.width-20*2, height: 50))
loginButton!.backgroundColor = UIColor(colorLiteralRed: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登录", for: UIControlState.normal)
loginButton!.layer.cornerRadius = 3
self.view.addSubview(loginButton!)

2.进行形状和位置的改变

// 位置 + 形状动画
UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDuration(1)// 动画时间
loginButton!.bounds = CGRect(x: 0, y: 210, width: loginButton!.frame.size.width*0.7, height: loginButton!.frame.size.height*1.2)
UIView.commitAnimations()// 动画提交

效果如下：

20170619149786175784160.gif

淡入淡出动画

淡入淡出动画通过改变视图的透明度来实现。例如：实现登录按钮的背景由淡到深的变化。

1.初始化按钮并设置透明度为0

loginButton = UIButton(frame: CGRect(x: 20, y: 210, width: self.view.frame.width-20*2, height: 50))
loginButton!.backgroundColor = UIColor(colorLiteralRed: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登录", for: UIControlState.normal)
loginButton!.layer.cornerRadius = 3
loginButton!.alpha = 0// 透明度
self.view.addSubview(loginButton!)

2.实现透明度由0至1的变化，时间为1s

// 淡入淡出
UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDuration(2)// 动画时间
loginButton!.alpha = 1
UIView.commitAnimations()// 动画提交

效果如下:

20170619149786216851548.gif

颜色渐变动画

颜色渐变，顾名思义，就是指视图颜色在一定时间内逐渐变化的动画。例如：登录按钮颜色的变化

1.初始化按钮

loginButton = UIButton(frame: CGRect(x: 20, y: 210, width: self.view.frame.width-20*2, height: 50))
loginButton!.backgroundColor = UIColor(colorLiteralRed: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登录", for: UIControlState.normal)
loginButton!.layer.cornerRadius = 3
self.view.addSubview(loginButton!)

2.设置动画时间以及变化的颜色

UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDuration(2)// 动画时间
loginButton!.backgroundColor = UIColor.gray
UIView.commitAnimations()// 动画提交

效果如下：

20170619149787840835975.gif

缩放动画：基于 UIView 的 transform 属性

UIView 有一个非常重要的动画属性 transform，该属性继承于 CGAffineTransform,”CG”实际上是 CoreGraphics 框架的缩写。

现在实现一下缩放动画

1.初始化登录按钮

loginButton = UIButton(frame: CGRect(x: 20, y: 210, width: self.view.frame.width-20*2, height: 50))
loginButton!.backgroundColor = UIColor(colorLiteralRed: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登录", for: UIControlState.normal)
loginButton!.layer.cornerRadius = 3
self.view.addSubview(loginButton!)

2.设置动画时间和缩放比例

// 缩放，基于 UIView 的 transform 属性
UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDuration(2)// 动画时间
loginButton!.transform = CGAffineTransform(scaleX: 0.5, y: 1.2)// 缩放比，>1为扩大，<1为缩放
UIView.commitAnimations()// 动画提交

效果如下：

20170619149787878141732.gif

旋转动画：基于 UIView 的 transform 属性

实现登录按钮 45° 旋转

1.初始化登录按钮

loginButton = UIButton(frame: CGRect(x: 20, y: 210, width: self.view.frame.width-20*2, height: 50))
loginButton!.backgroundColor = UIColor(colorLiteralRed: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登录", for: UIControlState.normal)
loginButton!.layer.cornerRadius = 3
self.view.addSubview(loginButton!)

2.实现旋转效果

// 旋转动画，基于 UIView 的 transform 属性
UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDuration(1)// 动画时间
let angel:CGFloat = CGFloat(M_PI_4)
loginButton!.transform = CGAffineTransform(rotationAngle: angel)// rotationAngle 是以弧度为单位旋转的
UIView.commitAnimations()// 动画提交

效果如下：

20170619149787916448100.gif

位移动画：基于 UIView 的 transform 属性

1.初始化按钮

loginButton = UIButton(frame: CGRect(x: 20, y: 210, width: self.view.frame.width-20*2, height: 50))
loginButton!.backgroundColor = UIColor(colorLiteralRed: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登录", for: UIControlState.normal)
loginButton!.layer.cornerRadius = 3
self.view.addSubview(loginButton!)

2.实现位移

// 位移动画，基于 UIView 的 transform 属性
UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDuration(1)// 动画时间
loginButton!.transform = CGAffineTransform(translationX: -20, y: 100)// translation 在 X 和 Y 移动的大小
UIView.commitAnimations()// 动画提交

效果如下：

20170619149787940669710.gif

组合动画效果

基于以上几种初级动画效果，下面来一个大组合，使之实现更复杂和高级的效果。

整个动画过程为：点击登录按钮后，登录按钮一边旋转，一边缩放，同时向登录界面右上角移动，在移动的同时按钮的透明度也在逐渐减弱。最后整个登录按钮消失在登录界面的右上角。

整个动画涉及到的效果

  1. 旋转动画
  2. 位置动画
  3. 缩放动画
  4. 淡入淡出动画

现在就这个效果进行代码实现：

1.初始化按钮并添加点击事件

loginButton = UIButton(frame: CGRect(x: 20, y: 210, width: self.view.frame.width-20*2, height: 50))
loginButton!.backgroundColor = UIColor(colorLiteralRed: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登录", for: UIControlState.normal)
loginButton!.layer.cornerRadius = 3
loginButton!.addTarget(self, action: #selector(loginAction), for: UIControlEvents.touchUpInside)
self.view.addSubview(loginButton!)

2.实现点击事件的动画效果

UIView.beginAnimations(nil, context: nil)
UIView.setAnimationDuration(2)
let angel:CGFloat = CGFloat(M_PI)
loginButton!.transform = CGAffineTransform(rotationAngle: angel)
loginButton!.frame = CGRect(x: 400, y: 0, width: loginButton!.frame.width*0.1, height: loginButton!.frame.height*0.1)
loginButton!.alpha = 0
UIView.commitAnimations()

效果如下：

20170619149787966613737.gif

动画常用属性及回调方法

常用的 UIView 动画属性设置方法：

  1. setAnimationDelay
  2. setAnimationCurve
  3. setAnimationsEnabled
  4. setAnimationDuration
  5. setAnimationRepeatAutoreverses
  6. setAnimationRepeatCount

(1) 延迟加载方法
(2) 设置动画的加速和减速效果，传递的参数为枚举类型

UIViewAnimationCurve.easeInOut // 动画开始和结束时都呈现减速效果
UIViewAnimationCurve.easeIn // 动画开始时减速效果
UIViewAnimationCurve.easeOut // 动画结束时减速效果
UIViewAnimationCurve.linear // 整个动画周期内速度一致

(3) 设置动画效果是否可用
(4) 设置动画执行时间
(5) 设置动画是否有重复返回效果
(6) 设置动画重复执行的次数

动画回调方法：

(1) delegate 回调

UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDelegate(self)// 设置回调对象
UIView.setAnimationDuration(1)// 动画时间
loginButton!.transform = CGAffineTransform(scaleX: 0.7, y: 1.2)// 缩放比，>1为扩大，<1为缩放
UIView.commitAnimations()// 动画提交

代码第2行设置 self 回调对象。实现动画结束后的回调方法，所以重写 animationDidStop 方法。这里的 override 重写，而不是创建一个新的方法

// 1.delegate 回调
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
    print("animation stop!")
}

(2) 设置 setAnimationDidStopSelector 自定义回调方法

// 缩放，基于 UIView 的 transform 属性
UIView.beginAnimations(nil, context: nil)// 动画开始
UIView.setAnimationDelegate(self)// 设置回调对象
UIView.setAnimationDuration(1)// 动画时间
loginButton!.transform = CGAffineTransform(scaleX: 0.7, y: 1.2)// 缩放比，>1为扩大，<1为缩放
UIView.setAnimationDidStop(#selector(ViewController.animationEnd))
UIView.commitAnimations()// 动画提交

实现自定义回调

// 2.自定义回调
func animationEnd() {
   print("animationEnd")
}

本文所有代码：点击查看


FEATURED TAGS
Swift
FRIENDS