[iOS]UIView動畫學習筆記(下)

上一篇文章記錄了幾類簡單的動畫內容,下面我們繼續學習更多的動畫,
慕課網視頻的鏈接如下:
http://www.imooc.com/learn/395

本文涉及的內容:
- Repeat
- Easing
- Spring

下面我們分別介紹:

Repeat

可以讓動畫來回動作

override func viewDidAppear(animated: Bool){
    super.viewDidAppear(animated)
    UIView.animateWithDuration(1, animations:{
        self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
    })
    UIView.animateWithDuration(1, delay:0, options: .Repeat, animations:{
        self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x
    }, completion: nil)
    UIView.animateWithDuration(1, delay:0, options: .Repeat | .Autoreverse, animations:{
        self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
    }, completion: nil)

}

Easing

這裏寫圖片描述

Easing動畫涉及貝塞爾曲線,貝塞爾曲線繪製可以參考如下網址:
http://cubic-bezier.com/
http://easings.net/zh-cn

實現方式如下:

override func viewDidAppear(animated: Bool){
    super.viewDidAppear(animated)
    UIView.animateWithDuration(1, animations:{
        self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
    })
    UIView.animateWithDuration(1, delay:0, options: .CurveEaseIn, animations:{
        self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x
    }, completion: nil)
    UIView.animateWithDuration(1, delay:0, options: .CurveEaseOut, animations:{
        self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
    }, completion: nil)
    UIView.animateWithDuration(1, delay:0, options: .CurveEaseInOut, animations:{
        self.yelloSquare.center.x = self.view.bounds.width - self.yelloSquare.center.x
    }, completion: nil)

}

Spring

這裏寫圖片描述

Spring彈簧動畫使用的API的參數更多,原型如下:

//只有iOS7以上才支持
UIView.animateWithDuration(duration: NSTimeInterval, 
                           delay: NSTimeInterval,
                           usingSpringWithDamping: CGFloat,
                           initailSpringVelocity: CGFloat,
                           options: UIViewAnimationOptions,
                           animations: () -> Void,
                           completion: ((Bool) -> Void)?)

應用如下:

override func viewDidAppear(animated: Bool){
    super.viewDidAppear(animated)
    UIView.animateWithDuration(1, animations:{
        self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
    })
    UIView.animateWithDuration(1, delay: 0, usingSpringWithDamping: 0.5, initailSpringVelocity: 0, options: nil, animations:{
        self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x
},completion: nil)

    UIView.animateWithDuration(5, delay: 0, usingSpringWithDamping:0.3, initailSpringVelocity: 1, options: nil, animations:{
        self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x
},completion: nil)



}
發佈了31 篇原創文章 · 獲贊 1 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章