上節(jié)課學(xué)到的是點(diǎn)擊一下?lián)Q一張圖片,這節(jié)課需要做的是點(diǎn)擊一下按鈕,然后圖片自己自動(dòng)的切換,不停的切換實(shí)際效果就是gif圖片的效果,再點(diǎn)擊一下,停止動(dòng)態(tài)效果。
課程筆記文集地址:Udemy課程:The Complete iOS 9 Developer Course - Build 18 Apps
這節(jié)課繼續(xù)使用 Lecture 66 Programatically Manipulating UIImages 的工程和代碼。
1.NSTimer
NSTimer是一個(gè)非常強(qiáng)大的工具,以后用到的地方還是很多的。
scheduledTimerWithTimeInterval
方法讓你以某個(gè)間隔時(shí)間,不停的執(zhí)行某個(gè)方法:
timer = NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector:#selector(ViewController.doAnimation), userInfo: nil, repeats: true)
以間隔0.1秒的時(shí)間重復(fù)執(zhí)行doAnimation這個(gè)方法,這個(gè)方法就是上一節(jié)中點(diǎn)擊里的代碼:
func doAnimation() {
if counter == 2 {
counter = 0
} else {
counter += 1
}
imageView.image = UIImage(named: "m\\(counter).png")
}
所以,有了NSTimer,需要的效果就已經(jīng)完成啦~
2.停止動(dòng)態(tài)效果
這樣點(diǎn)擊按鈕后,gif效果出來(lái)了,只是沒(méi)法停下來(lái),那么,停止NSTimer的方法是什么呢?
是invalidate()
。
還需要一個(gè)布爾類型的變量,控制點(diǎn)擊是停止還是開(kāi)始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的文案變化
要是點(diǎn)擊一下,按鈕的文案變了,讓用戶知道下次點(diǎn)擊是停止還是開(kāi)始就好了。那么就需要用到Button的setTitle方法。
func configureButton() {
if isMoving {
buttonOutlet.setTitle("停止", forState: UIControlState.Normal)
} else {
buttonOutlet.setTitle("開(kāi)始", forState: UIControlState.Normal)
}
}
在每次點(diǎn)擊時(shí)調(diào)用此方法:
@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.出場(chǎng)動(dòng)畫
編寫出場(chǎng)動(dòng)畫,我們需要用到兩個(gè)方法,之后的幾個(gè)出場(chǎng)動(dòng)畫?也都是在這兩個(gè)方法中實(shí)現(xiàn)的:
override func viewDidLayoutSubviews() {
}
關(guān)于這個(gè)方法的官方解釋:
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.
好長(zhǎng),沒(méi)看懂。。。咋辦?其實(shí)我的理解就是,
override func viewDidAppear(animated: Bool) {
}
關(guān)于這個(gè)方法的官方解釋:
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
這個(gè)方法在我理解就是,當(dāng)前view controller每次出現(xiàn)時(shí),都會(huì)調(diào)用這個(gè)方法。
好了,有了這兩個(gè)方法,我們就可以在這兩個(gè)方法中寫代碼了,以實(shí)現(xiàn)各種出場(chǎng)動(dòng)畫效果。
5.出場(chǎng)動(dòng)畫:從左移入
在打開(kāi)App的時(shí)候,圖片從屏幕的左邊移動(dòng)到屏幕的中央,實(shí)現(xiàn)這么一個(gè)出場(chǎng)動(dòng)畫效果。
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.出場(chǎng)動(dòng)畫:漸進(jìn)出現(xiàn)
一開(kāi)始是透明的,然后圖片慢慢從透明到模糊到完全不透明不模糊。
override func viewDidLayoutSubviews() {
imageView.alpha = 0
}
override func viewDidAppear(animated: Bool) {
UIView.animateWithDuration(1) {
self.imageView.alpha = 1
}
}
7.出場(chǎng)動(dòng)畫:由小變大
一開(kāi)始的圖片框架是非常小的,慢慢地變大,最后變成正常尺寸。
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)
}
}
遺留問(wèn)題:
當(dāng)我想保留出場(chǎng)動(dòng)畫的情況下繼續(xù)使用1--3的代碼時(shí),點(diǎn)擊開(kāi)始按鈕后,圖片消失不見(jiàn)了。
我感覺(jué)可能是viewDidLayoutSubviews()
或者viewDidAppear(animated: Bool)
中某一個(gè)方法和點(diǎn)擊事情中的方法沖突了。不過(guò)這只是猜想。
先留下這么個(gè)問(wèn)題,等過(guò)幾天,說(shuō)不定自己就能找到問(wèn)題所在了呢。