Swift國內(nèi)社區(qū): SwiftMic
Swift版本: 4.1
簡介
UIView 封裝了 animate 方法，方便我們實(shí)現(xiàn)一些簡單常用的動畫效果。
開始
UIView animate簡單用法
private func testUIViewAnimation1() {
let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
self.view.addSubview(view)
// 初始顏色為紅色
view.backgroundColor = UIColor.red
// 初始透明度為 0
view.alpha = 0
// withDuration: 動畫持續(xù)時(shí)間
UIView.animate(withDuration: 1.0) {
// 最終顏色為黃色
view.backgroundColor = UIColor.yellow
// 最終透明度為 1.0
view.alpha = 1.0
}
}
實(shí)現(xiàn)的效果是 View 從完全透明逐漸變得不透明，同時(shí)顏色從紅色逐漸變?yōu)辄S色，動畫持續(xù)時(shí)間為 1 秒。
效果如圖
UIViewAnimation_1.gif
UIView animate options參數(shù)
UIView animate 提供 options 參數(shù)，是個枚舉類型。
- curveEaseIn: slow at beginning
- curveEaseInOut: slow at beginning and end
- curveEaseOut: slow at end
- curveLinear: Linear
private func testUIViewAnimation2() {
let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
view.backgroundColor = UIColor.red
self.view.addSubview(view)
// curveEaseIn: slow at beginning
// curveEaseInOut: slow at beginning and end
// curveEaseOut: slow at end
// curveLinear: 線性
let animateOptions = UIViewAnimationOptions.curveEaseIn
UIView.animate(withDuration: 2.0, delay: 0, options: animateOptions, animations: {
// UIView.setAnimationRepeatCount(5) // 設(shè)置動畫重復(fù)次數(shù)
view.backgroundColor = UIColor.yellow
view.center.x += 100
}, completion: nil)
}
實(shí)現(xiàn)的效果是 View 水平方向向右平移 100 個像素，同時(shí)顏色由紅色變?yōu)辄S色。
效果如圖
UIViewAnimation_2.gif
UIView animate 震蕩動畫
// UIView animate 震蕩動畫用法
private func testSpringAnimation() {
let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
view.backgroundColor = UIColor.red
self.view.addSubview(view)
// usingSpringWithDamping: 震蕩系數(shù)，越小代表越震蕩
// initialSpringVelocity: 初始速度，越大代表初始速度越快
UIView.animate(withDuration: 2.0, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 1.0, options: [], animations: {
view.center.x += 200
}, completion: { _ in
print("Spring animation complete")
})
}
UIView 也內(nèi)置了 Spring 震蕩動畫（類似于彈簧效果）。
- usingSpringWithDamping: 震蕩系數(shù)，越小代表越震蕩
- initialSpringVelocity: 初始速度，越大代表初始速度越快
// UIView animate 震蕩動畫用法
private func testSpringAnimation() {
let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
view.backgroundColor = UIColor.red
self.view.addSubview(view)
// usingSpringWithDamping: 震蕩系數(shù)，越小代表越震蕩
// initialSpringVelocity: 初始速度，越大代表初始速度越快
UIView.animate(withDuration: 2.0, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 1.0, options: [], animations: {
view.center.x += 200
}, completion: { _ in
print("Spring animation complete")
})
}
實(shí)現(xiàn)的效果是 View 水平方向向右平移 200 個像素，最后會有個彈簧的回彈效果。
效果如圖
UIViewAnimation_3.gif
關(guān)鍵幀動畫
關(guān)鍵幀動畫可以實(shí)現(xiàn)多個動畫拼接。
// 關(guān)鍵幀動畫用法
private func testKeyframe() {
let view = UIView(frame: CGRect(x: 20, y: 100, width: 100, height: 100))
view.backgroundColor = UIColor.red
self.view.addSubview(view)
UIView.animateKeyframes(withDuration: 4.0, delay: 0, options: [], animations: {
// withRelativeStartTime: 開始時(shí)間（相對于總動畫時(shí)間）
// relativeDuration: 動畫執(zhí)行時(shí)間（相對于總動畫時(shí)間）
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/4.0, animations: {
view.center.x += 100
})
UIView.addKeyframe(withRelativeStartTime: 1.0/4.0, relativeDuration: 1.2/4.0, animations: {
view.backgroundColor = UIColor.yellow
})
UIView.addKeyframe(withRelativeStartTime: 2.2/4.0, relativeDuration: 1.0, animations: {
view.center.y += 150
})
}, completion: { _ in
print("Key animation complete")
})
}
實(shí)現(xiàn)的效果是先水平方向向右平移 100 個像素（動畫時(shí)間：1秒），然后顏色從紅色變?yōu)辄S色（動畫時(shí)間：1.2秒），最后垂直方向向下平移 150 個像素（動畫時(shí)間：1秒），動畫完成后將輸出 Key animation complete 。
效果如圖
UIViewAnimation_4.gif
