上節課學到的是點擊一下換一張圖片,這節課需要做的是點擊一下按鈕,然后圖片自己自動的切換,不停的切換實際效果就是gif圖片的效果,再點擊一下,停止動態效果。
課程筆記文集地址:Udemy課程:The Complete iOS 9 Developer Course - Build 18 Apps
這節課繼續使用 Lecture 66 Programatically Manipulating UIImages 的工程和代碼。
1.NSTimer
NSTimer是一個非常強大的工具,以后用到的地方還是很多的。
scheduledTimerWithTimeInterval
方法讓你以某個間隔時間,不停的執行某個方法:
timer = NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector:#selector(ViewController.doAnimation), userInfo: nil, repeats: true)
以間隔0.1秒的時間重復執行doAnimation這個方法,這個方法就是上一節中點擊里的代碼:
func doAnimation() {
if counter == 2 {
counter = 0
} else {
counter += 1
}
imageView.image = UIImage(named: "m\\(counter).png")
}
所以,有了NSTimer,需要的效果就已經完成啦~
2.停止動態效果
這樣點擊按鈕后,gif效果出來了,只是沒法停下來,那么,停止NSTimer的方法是什么呢?
是invalidate()
。
還需要一個布爾類型的變量,控制點擊是停止還是開始NSTimer。
class ViewController: UIViewController {
@IBOutlet weak var buttonOutlet: UIButton!
@IBOutlet weak var imageView: UIImageView!
var timer = NSTimer()
var counter = 0
var isMoving = false
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
@IBAction func moving(sender: UIButton) {
isMoving = !isMoving
if isMoving {
timer = NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector:#selector(ViewController.doAnimation), userInfo: nil, repeats: true)
} else {
timer.invalidate()
}
}
func doAnimation() {
if counter == 2 {
counter = 0
} else {
counter += 1
}
imageView.image = UIImage(named: "m\\(counter).png")
}
}
3.Button的文案變化
要是點擊一下,按鈕的文案變了,讓用戶知道下次點擊是停止還是開始就好了。那么就需要用到Button的setTitle方法。
func configureButton() {
if isMoving {
buttonOutlet.setTitle("停止", forState: UIControlState.Normal)
} else {
buttonOutlet.setTitle("開始", forState: UIControlState.Normal)
}
}
在每次點擊時調用此方法:
@IBAction func moving(sender: UIButton) {
isMoving = !isMoving
if isMoving {
timer = NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector:#selector(ViewController.doAnimation), userInfo: nil, repeats: true)
configureButton()
} else {
timer.invalidate()
configureButton()
}
}
4.出場動畫
編寫出場動畫,我們需要用到兩個方法,之后的幾個出場動畫?也都是在這兩個方法中實現的:
override func viewDidLayoutSubviews() {
}
關于這個方法的官方解釋:
Called to notify the view controller that its view has just laid out its subviews.
When the bounds change for a view controller'??s view, the view adjusts the positions of its subviews and then the system calls this method. However, this method being called does not indicate that the individual layouts of the view'??s subviews have been adjusted. Each subview is responsible for adjusting its own layout.
Your view controller can override this method to make changes after the view lays out its subviews. The default implementation of this method does nothing.
好長,沒看懂。。。咋辦?其實我的理解就是,
override func viewDidAppear(animated: Bool) {
}
關于這個方法的官方解釋:
Notifies the view controller that its view was added to a view hierarchy.
You can override this method to perform additional tasks associated with presenting the view. If you override this method, you must call super at some point in your implementation.
Note:
If a view controller is presented by a view controller inside of a popover, this method is not invoked on the presenting view controller after the presented controller is dismissed
這個方法在我理解就是,當前view controller每次出現時,都會調用這個方法。
好了,有了這兩個方法,我們就可以在這兩個方法中寫代碼了,以實現各種出場動畫效果。
5.出場動畫:從左移入
在打開App的時候,圖片從屏幕的左邊移動到屏幕的中央,實現這么一個出場動畫效果。
override func viewDidLayoutSubviews() {
imageView.center = CGPointMake(imageView.center.x-400, imageView.center.y)
}
override func viewDidAppear(animated: Bool) {
UIView.animateWithDuration(1) {
self.imageView.center = CGPointMake(self.imageView.center.x+400, self.imageView.center.y)
}
}
6.出場動畫:漸進出現
一開始是透明的,然后圖片慢慢從透明到模糊到完全不透明不模糊。
override func viewDidLayoutSubviews() {
imageView.alpha = 0
}
override func viewDidAppear(animated: Bool) {
UIView.animateWithDuration(1) {
self.imageView.alpha = 1
}
}
7.出場動畫:由小變大
一開始的圖片框架是非常小的,慢慢地變大,最后變成正常尺寸。
override func viewDidLayoutSubviews() {
imageView.frame = CGRectMake(100, 20, 0, 0)
}
override func viewDidAppear(animated: Bool) {
UIView.animateWithDuration(1) {
self.imageView.frame = CGRectMake(100, 20, 100, 200)
}
}
遺留問題:
當我想保留出場動畫的情況下繼續使用1--3的代碼時,點擊開始按鈕后,圖片消失不見了。
我感覺可能是viewDidLayoutSubviews()
或者viewDidAppear(animated: Bool)
中某一個方法和點擊事情中的方法沖突了。不過這只是猜想。
先留下這么個問題,等過幾天,說不定自己就能找到問題所在了呢。