68課:學一學如何實現稍微高級點的動畫

上節課學到的是點擊一下換一張圖片,這節課需要做的是點擊一下按鈕,然后圖片自己自動的切換,不停的切換實際效果就是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)中某一個方法和點擊事情中的方法沖突了。不過這只是猜想。
先留下這么個問題,等過幾天,說不定自己就能找到問題所在了呢。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Documentation Supported OS & SDK Versions 支持的OS & SDK版本 S...
    c5550ea746f8閱讀 4,437評論 0 2
  • ViewsBecause view objects are the main way your applicati...
    梁光飛閱讀 641評論 0 0
  • /* UIViewController is a generic controller base class th...
    DanDanC閱讀 1,861評論 0 2
  • 手里拿著你給我買的遮陽帽,但是我并沒有帶,因為天下著雨并沒有太陽。情緒也不是很好,因為我離開了,重重的行李這是...
    janeful閱讀 171評論 0 0
  • 我們認識其實快有五年了,真正相處下來其實也是快三年了。三年是什么概念,我只知道我一段深刻的愛情也就一年半。三...
    曬太陽的喵夢閱讀 363評論 15 2