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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容

  • Documentation Supported OS & SDK Versions 支持的OS & SDK版本 S...
    c5550ea746f8阅读 4,286评论 0 2
  • ViewsBecause view objects are the main way your applicati...
    梁光飞阅读 575评论 0 0
  • /* UIViewController is a generic controller base class th...
    DanDanC阅读 1,771评论 0 2
  • 手里拿着你给我买的遮阳帽,但是我并没有带,因为天下着雨并没有太阳。情绪也不是很好,因为我离开了,重重的行李这是...
    janeful阅读 159评论 0 0
  • 我们认识其实快有五年了,真正相处下来其实也是快三年了。三年是什么概念,我只知道我一段深刻的爱情也就一年半。三...
    晒太阳的喵夢阅读 338评论 15 2