UIViewAnimation基础

设置UIView的属性:

• Position 位置

• Opacity 透明度
• Scale 比例
• Color 颜色

设置变化:

• Rotation 旋转

• Repeat 重复
• Easing 曲线
• spring 弹簧

---

动画方法

• 在一定时间内 View 的属性发生改变,动画结束后回调。

    classfunc animateWithDuration(duration:NSTimeInterval, animations: () ->Void, completion: ((Bool) ->Void)?)

---

• 在一定时间内 View 的属性发生改变。无回调。

    classfunc animateWithDuration(duration:NSTimeInterval, animations: () ->Void)

---

• 可以设置动画执行的方式

    classfunc animateWithDuration(duration:NSTimeInterval, delay:NSTimeInterval, options:UIViewAnimationOptions, animations: () ->Void, completion: ((Bool) ->Void)?)

• 参数说明:
  • duration : 动画经历时长
  • delay : 延迟时间,在该延迟时间后才执行动画
  • options : 系统提供了许多动画执行的方式,比如以下几个
    • Repeat : UIViewAnimationOptions 重复
    • CurveEaseInOut : UIViewAnimationOptions 由慢到快再到慢
    • CurveEaseIn : UIViewAnimationOptions 由慢到快
    • CurveEaseOut : UIViewAnimationOptions 由快到慢
    • CurveLinear : UIViewAnimationOptions 匀速
  • animation : UIView动画结束时的状态 ( 比如 ： UIView移动到另一点,变成某一种颜色,放大(缩小)后的比例,变化到某一透明度,视图旋转到某一角度)
  • completion : 动画结束时的回调(这里可以处理一些事件)

---

• 可设置弹跳效果的动画

    classfunc animateWithDuration(duration:NSTimeInterval, delay:NSTimeInterval, usingSpringWithDamping dampingRatio:CGFloat, initialSpringVelocity velocity:CGFloat, options:UIViewAnimationOptions, animations: () ->Void, completion: ((Bool) ->Void)?)

* 参数说明:
  * usingSpringWithDamping  : 阻尼（弹性系数）
  * initialSpringVelocity : 初始速率

---

小示例如下：

1.Position 位置

Position.gif

UIView.animate(withDuration: 1, animations:{
    self.greenView.center.x = self.view.bounds.width - self.greenView.center.x
    self.greenView.center.y = self.view.bounds.height - self.greenView.center.y   
})

UIView.animate(withDuration: 1, delay: 0.5, options: UIViewAnimationOptions.curveEaseInOut, animations: {
    self.redView.center.x = self.view.bounds.width - self.redView.center.x
    self.redView.center.y = self.redView.center.y - self.view.bounds.height
}, completion: nil)

2.Opacity 透明度

Opacity.gif

UIView.animate(withDuration: 1, animations: {
    self.OpacityView.alpha = 0.1
})

3.Scale 比例

Scale.gif

UIView.animate(withDuration: 1, animations: {
    self.scaleView.transform = CGAffineTransform(scaleX: 2.0, y: 2.0)
})

4.Color 颜色

Color.gif

UIView.animate(withDuration: 1, animations: {
    self.backgroundView.backgroundColor = UIColor.black
    self.textLabel.textColor = UIColor.yellow
})

5.Rotation 旋转

Rotation.gif

UIView.animate(withDuration: 1, animations: {
    self.iamgeView.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI))    
})

6.Repeat 重复

Repeat.gif

UIView.animate(withDuration: 1, animations: {
    self.blueView.center.x = self.view.bounds.width - self.blueView.center.x
})

UIView.animate(withDuration: 1, delay: 0, options: UIViewAnimationOptions.repeat, animations: {
    self.redView.center.x = self.view.bounds.width - self.redView.center.x
}, completion: nil)

UIView.animate(withDuration: 1, delay: 0, options: [UIViewAnimationOptions.repeat, UIViewAnimationOptions.autoreverse], animations: {
    self.greenView.center.x = self.view.bounds.width - self.greenView.center.x
}, completion: nil)

7.Easing 曲线

Easing.gif

UIView.animate(withDuration: 1, delay: 0, options: UIViewAnimationOptions.curveLinear, animations: {
    self.blueView.center.x = self.view.bounds.width - self.blueView.center.x
}, completion: nil)

UIView.animate(withDuration: 1, delay: 0, options: UIViewAnimationOptions.curveEaseIn, animations: {
    self.redView.center.x = self.view.bounds.width - self.redView.center.x
}, completion: nil)

UIView.animate(withDuration: 1, delay: 0, options: UIViewAnimationOptions.curveEaseOut, animations: {
    self.greenView.center.x = self.view.bounds.width - self.greenView.center.x
}, completion: nil)

UIView.animate(withDuration: 1, delay: 0, options: UIViewAnimationOptions.curveEaseInOut, animations: {
    self.yellowView.center.x = self.view.bounds.width - self.yellowView.center.x
}, completion: nil)

8.spring 弹簧

Spring.gif

UIView.animate(withDuration: 1, animations: {
    self.blueView.center.x = self.view.bounds.width - self.blueView.center.x
})

UIView.animate(withDuration: 3, delay: 0, usingSpringWithDamping: 0.1, initialSpringVelocity: 0, options: UIViewAnimationOptions.curveLinear, animations: {
    self.redView.center.x = self.view.bounds.width  - self.redView.center.x
}, completion: nil)

UIView.animate(withDuration: 3, delay: 0, usingSpringWithDamping: 0.1, initialSpringVelocity: 1, options: UIViewAnimationOptions.curveLinear, animations: {
    self.greenView.center.x = self.view.bounds.width - self.greenView.center.x
}, completion: nil)