一、animate方法
它位于UIView類中
UIView.animate(withDuration: ,
delay: ,
usingSpringWithDamping: ,
initialSpringVelocity: ,
options: ,
animations: <() -> Void>,
completion:() -> Void)
它是每一個(gè)動畫的基礎(chǔ)
二、動畫定義
動畫是用快速顯示一系列靜態(tài)圖片(幀)來模擬動作和圖形轉(zhuǎn)換的過程。
動畫是物體移動或者尺寸變化的“幻影”
首幀[第一幀]--->第二幀--->第三幀--->尾幀
三、如何生成這么多的幀數(shù)?
只需在UIView.animate中指定首幀和尾幀,其他的系統(tǒng)會幫我們自動計(jì)算。
四、如何改變動畫尺寸呢?
transform函數(shù)集 > 縮放、旋轉(zhuǎn)和移動視圖
@ 縮放:
//一開始不顯示
RatingStackView.transform = CGAffineTransform(scaleX: 0, y: 0)
@ 移動:
RatingStackView.transform = CGAffineTransform(translationX: 0, y: 500)
override func viewDidAppear(_ animated: Bool) {
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: [], animations: {)
self.RatingStackView.transform = CGAffineTransform(translationX: 0, y: 0)
}, completion: nil)
}
@ 動畫組合:
let startPos = CGAffineTransform(translationX: 0, y: 500)
let startScale = CGAffineTransform(scaleX: 0, y: 0)
RatingStackView.transform = startScale.concatenating(startPos)
override func viewDidAppear(_ animated: Bool) {
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: [], animations: {
let endPos = CGAffineTransform(translationX: 0, y: 0)
let endScale = CGAffineTransform.identity
self.RatingStackView.transform = endPos.concatenating(endScale)
}, completion: nil)
}
注意:
這里動畫的 首幀設(shè)置 和 尾幀設(shè)置 需要按照AB BA的方式排列
不能以ABAB的方式排列,否則只會執(zhí)行B的動畫
五、設(shè)置動畫啟動時(shí)機(jī)和時(shí)長
選擇在當(dāng)視圖每一次顯示完畢的時(shí)候,即在viewDidAppear加入:
override func viewDidAppear(_ animated: Bool) {
UIView.animate(withDuration: 0.3) {
//顯示視圖原來的樣子
self.RatingStackView.transform = CGAffineTransform.identity
}
}
六、補(bǔ)充動畫效果
Damping:達(dá)到尾幀之前的震蕩擺動效果和時(shí)間
initialSpringVelocity:初識速度
自iOS7開始有的,可把動畫方法替換成
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: [], animations: {
self.RatingStackView.transform = CGAffineTransform.identity
}, completion: nil)
補(bǔ)充KVC
| Key Path | Type | Value |
|---|---|---|
| layer.cornerRadius | Number | 20 |