Section One
主要是通過改變view的size position 和 color
搭建基礎頁面
在開始的時候
overridefunc viewWillAppear(_ animated:Bool) {
super.viewWillAppear(animated)
heading.center.x -=view.bounds.width
username.center.x -=view.bounds.width
password.center.x -=view.bounds.width
}
爲了保證頭部和textField依次展現在頁面中 在viewDidAppear中添加如下代碼
UIView.animate(withDuration:0.5) {
self.heading.center.x += self.view.bounds.width
}
UIView.animate(withDuration:0.5, delay:0.3, options: [], animations: {
self.username.center.x += self.view.bounds.width
}, completion: nil)
UIView.animate(withDuration:0.5, delay:0.4, options: [], animations: {
self.password.center.x += self.view.bounds.width
}, completion: nil)
Position and size
bounds: Animate this property to reposition the view's content within the view's frame
frame: Animate this property to move and/or scale the view
center: Animate this property when you want to move the view to a new location on screen
Appearance
.backgroundColor:
.alpha. Change this property to create fade-in and fade-out effects
Transformation
.transform: Modify this property within an animation block to animate the rotation, scale, and or position of a view
Animation options 方法中options: []的選擇
Repeating
.repeat
.autoreverse 裏面包含了 repeat這個動作,this option repeatedly plays your animation forward, then in reverse.
比如上面的username, 如果用repeat, 就一直重複center改變的這個過程, 如果用的是autoreverse,username會先顯示出來,
然後在出來的基礎上在回去,這樣一直重複
Animation easing
.curveLinear 這個選項在動畫中沒有加速也沒有減速
.curveEaseIn 這個選項會在動畫開始的時候進行加速
.cureEaseOut 在動畫結束的時候進行減速
.curveEaseInOut 在動畫開始的時候進行加速, 在結束的時候進行減速
注意:
剛開始的時候如果把對view的處理 改變frame這些的處理 寫在viewDidLoad裏面, 是不會顯示出來的,因爲這個時候視圖還沒有加載完成, 所以應該把這些改變frame的這些放在viewDidAppear這個方法中 原因如下
在 ios 中 函數調用方法順序如下
init -初始化程序
viewDidLoad-加載視圖
viewWillAppear-UIViewController對象的視圖即將加入窗口時調用
viewDidAppear-UIViewController對象的視圖已經加入到窗口時調用
viewWillDidAppear-UIViewController對象的視圖即將消失, 被覆蓋或者是隱藏時調用
viewDidDisappear-UIViewController對象的視圖已經消失, 被覆蓋或是隱藏時調用
didReceiveMemoryWarning-內存不足的時候調用這個
登錄按鈕彈簧效果方法如下
animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:)
.usingSpringWithDamping:這個參數的取值爲0.0-1.0 來創造一個阻尼動畫, 越接近與0, 越靈活
彈簧的這個效果會影響動畫的屬性, 在這個例子中, 仔細觀察, 他會影響垂直位置和透明度 .
彈簧效果還有
CASpringAnimation
用法和參數的意義如下
//spring彈簧效果
/*
*mass 質量, 影響圖層運動時的彈簧慣性, 質量越大, 彈簧拉伸和壓縮的幅度越大
動畫的速度變慢, 並且波動幅度變大
stiffness 剛度係數 剛度係數越大, 形變產生的力就越大, 運動越快
damping 阻尼係數, 阻止彈簧伸縮的係數, 阻尼係數越大, 停止越快
initialVelocity: 初始速率, 動畫視圖的初始速度大小, 速率爲正數時, 速度方向與運動方向一致, 速率爲負數時, 速度方向與運動防線反向
settingDuration: 結算時間 返回彈簧動畫到停止時的估算時間, 根據當前的動畫參數估算, 通常彈簧的動畫時間使用結算時間比較準確
*/
label.frame = CGRect(x: 200, y: 100, width: 100, height: 40)
label.backgroundColor = UIColor.cyan
let spring = CASpringAnimation(keyPath: "position.x")
spring.damping = 5
spring.stiffness = 100
spring.mass = 1
spring.initialVelocity = -20
spring.fromValue = label.layer.position.x
spring.toValue = label.layer.position.x + 50
spring.duration = spring.settlingDuration
label.layer.add(spring, forKey: spring.keyPath)
view.addSubview(label)
Transitions
使用transitions動畫的情景如下
1.add a new view
2.removing a view
UIView.transition(with: animationContainerView,
duration: 0.33,
options: [.curveEaseOut, .transitionFlipFromBottom],
animations: {
self.animationContainerView.addSubview(newView)
},
completion: nil
)
.transitionFlipFromLeft
.transitionFlipFromRight
.transitionCurlUp
.transitionCurlDown
.transitionCrossDissolve
.transitionFlipFromTop
.transitionFlipFromBottom
3.hiding/showing a view
4.replacing a view with another view
代碼地址如下https://github.com/lzs2000/SectionOne_Animatable-properties