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)中某一个方法和点击事情中的方法冲突了。不过这只是猜想。
先留下这么个问题,等过几天,说不定自己就能找到问题所在了呢。

你可能感兴趣的:(68课:学一学如何实现稍微高级点的动画)