84-Swift之UIView的動(dòng)畫(Animation)

引言

???????? ???在 App 的開發(fā)中,好的用戶體驗(yàn)和絢麗的動(dòng)畫起著十分重要的作用纵苛。一般精美的動(dòng)畫需要做很多代碼的編寫才能實(shí)現(xiàn)盾致,這往往會(huì)花費(fèi)大量的時(shí)間。為了節(jié)省開發(fā)者的時(shí)間毕谴,我們注意到 UIView 自帶一些動(dòng)畫函數(shù)成畦。

UIView的動(dòng)畫介紹

???????? ??? UIView 的動(dòng)畫是蘋果對(duì)基礎(chǔ)動(dòng)畫的封裝給開發(fā)者使用距芬。UIView 的動(dòng)畫可以修改一些屬性,將其以動(dòng)畫的形式展示出來循帐】蜃校可修改的屬性如下:frame(尺寸)\bound(大小)\center(中心)\ transform(旋轉(zhuǎn))\alpha(透明度)\ backgroundColor(背景顏色)\ contentStretch(內(nèi)容拉伸) 等。

UIView 的UIViewKeyframeAnimationOptions 和 UIViewAnimationOptions 的介紹

1拄养、UIViewAnimationOptions 的介紹

2CB0AB1D-088A-4EA3-BB76-B31FDC603EE7.png

2离斩、UIViewKeyframeAnimationOptions 的介紹

448720EA-8924-453C-8DA5-B984AA951046.png

其中這四個(gè)選項(xiàng) calculationModeLinear、calculationModeDiscrete瘪匿、calculationModePaced跛梗、calculationModeCubic 的線性圖如下:

2361958-3865dceb3118d461.png

UIview 的動(dòng)畫函數(shù)和參數(shù)的介紹

1、只可以設(shè)置動(dòng)畫內(nèi)容的動(dòng)畫函數(shù)

// TODO: 動(dòng)畫一
func animationA(animationView:UIView) -> Void {
    /*!
     1棋弥、設(shè)置動(dòng)畫時(shí)間
     2核偿、設(shè)置動(dòng)畫內(nèi)容
     */
    UIView.animate(withDuration:5) {
        // 位置和顏色的變換
        animationView.frame = CGRect.init(x: self.view.frame.width - 200, y: 50, width:100, height: 200)
    }
}

2、可設(shè)置動(dòng)畫時(shí)間顽染、動(dòng)畫內(nèi)容漾岳、動(dòng)畫結(jié)束后的內(nèi)容的函數(shù)

// TODO: 動(dòng)畫二
func animationOtherB(animationView:UIView) -> Void {
    /*!
     1、設(shè)置動(dòng)畫時(shí)間
     2家乘、設(shè)置動(dòng)畫內(nèi)容
     3蝗羊、設(shè)置動(dòng)畫結(jié)束后的處理事件
     */
    UIView.animate(withDuration: 5, animations: {
        // 位置和顏色的變換
        animationView.frame = CGRect.init(x: 100, y: 50, width: 100, height: 200)
    }) { (isFinish) in
        if isFinish {
            // 變色
            self.View1!.backgroundColor = UIColor.magenta
        }
    }
}

3、 設(shè)置動(dòng)畫時(shí)間仁锯、動(dòng)畫延遲時(shí)間耀找、動(dòng)畫內(nèi)容、動(dòng)畫結(jié)束內(nèi)容的動(dòng)畫函數(shù)

// TODO: 動(dòng)畫四
func animationD(animationView:UIView) -> Void {
    /*!
     可設(shè)置延時(shí)時(shí)間的動(dòng)畫
     
     @withDuration : 設(shè)置動(dòng)畫時(shí)間
     @delay : 設(shè)置動(dòng)畫延遲時(shí)間
     @options : 設(shè)置動(dòng)畫的形式
     */
    UIView.animate(withDuration: 5, delay: 2, options: .allowUserInteraction, animations: {
        // code.... 動(dòng)畫的內(nèi)容
    }) { (isFinish) in
        // code.... 動(dòng)畫結(jié)束后的處理內(nèi)容
    }
}

以上3中動(dòng)畫函數(shù)產(chǎn)生的效果之一如下圖所示:


1.gif

2.gif

4业崖、 彈簧動(dòng)畫函數(shù)

// TODO:動(dòng)畫三
func animationC(animationView:UIView) -> Void {
    /*!
     彈簧式動(dòng)畫
     
     @withDuration : 設(shè)置動(dòng)畫時(shí)間
     @delay : 設(shè)置動(dòng)畫延時(shí)時(shí)間
     @usingSpringWithDamping : 設(shè)置阻尼系數(shù)(該數(shù)字越大野芒,動(dòng)畫彈動(dòng)的次數(shù)越少)
     @initialSpringVelocity : 設(shè)置初始速度(該數(shù)字越大,震動(dòng)的振幅越大)
     @options : 設(shè)置動(dòng)畫的出現(xiàn)形式
     */
    UIView.animate(withDuration: 5, delay: 2, usingSpringWithDamping: 0.1, initialSpringVelocity: 10, options: .curveEaseIn, animations: {
        // code.... 動(dòng)畫的內(nèi)容
        animationView.frame = CGRect.init(x: (self.View1?.center.x)!-20, y: 110, width: 40, height: 40)
    }) { (isFinish) in
        // code.... 動(dòng)畫結(jié)束后的處理內(nèi)容
        animationView.frame = CGRect.init(x: self.View1!.center.x-40, y: 110, width: 80, height: 80)
    }
}

其動(dòng)畫效果如下:


3.gif

5双炕、幀動(dòng)畫函數(shù)

// TODO: 動(dòng)畫五
func animationE(animationView:UIView) -> Void {
/*!
 幀動(dòng)畫
 
 @withDuration : 設(shè)置動(dòng)畫時(shí)間
 @delay : 設(shè)置動(dòng)畫延遲時(shí)間
 @options :設(shè)置動(dòng)畫形式
 */
UIView.animateKeyframes(withDuration: 8, delay: 0, options: .calculationModeLinear, animations: {
        // code.... 動(dòng)畫的內(nèi)容
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/4, animations: {
             animationView.backgroundColor = UIColor.red
        })
        UIView.addKeyframe(withRelativeStartTime: 1.0/4, relativeDuration: 1.0/4, animations: {
            animationView.backgroundColor = UIColor.green
        })
        UIView.addKeyframe(withRelativeStartTime: 2.0/4, relativeDuration: 1.0/4, animations: {
            animationView.backgroundColor = UIColor.blue
        })
        UIView.addKeyframe(withRelativeStartTime: 3.0/4, relativeDuration: 1.0/4, animations: {
            animationView.backgroundColor = UIColor.magenta
        })
        UIView.addKeyframe(withRelativeStartTime: 4.0/4, relativeDuration: 1.0/4, animations: {
            animationView.backgroundColor = UIColor.purple
        })
    }) { (isFinish) in
        // code.... 動(dòng)畫結(jié)束后的處理內(nèi)容
        animationView.backgroundColor = UIColor.cyan
    }
}

// TODO: 關(guān)鍵幀動(dòng)畫的單幀動(dòng)畫設(shè)置
func animationJ(animationView:UIView) -> Void {
    /*!
     幀動(dòng)畫
     
     @withRelativeStartTime : 設(shè)置動(dòng)畫的開始時(shí)間
     @relativeDuration : 動(dòng)畫的持續(xù)時(shí)間
     */
    UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/4, animations: {
        animationView.backgroundColor = UIColor.purple
    })
}

其產(chǎn)生的動(dòng)畫效果如下:


4.gif

6狞悲、UIView的轉(zhuǎn)場(chǎng)動(dòng)畫

1、單個(gè)View的轉(zhuǎn)場(chǎng)動(dòng)畫
func animationG(animationView:UIView) -> Void {
    /*妇斤!
     單個(gè)View的轉(zhuǎn)場(chǎng)動(dòng)畫
     
     @with : 要轉(zhuǎn)場(chǎng)的View
     @duration : 轉(zhuǎn)場(chǎng)時(shí)間
     @options : 動(dòng)畫的類型
     */
    UIView.transition(with: animationView, duration: 5, options:.transitionCurlUp, animations: {
        self.imageView4?.image = UIImage.init(named: "2.jpg")
    }) { (isFinsish) in
        // code .... 轉(zhuǎn)場(chǎng)結(jié)束事件處理
    }   
}

其產(chǎn)生的動(dòng)畫效果如下:


5.gif
2摇锋、 兩個(gè)View 的轉(zhuǎn)場(chǎng)動(dòng)畫
// TODO: 動(dòng)畫六
func animationF(fromView:UIView , toView:UIView) -> Void {
    /*!
     轉(zhuǎn)場(chǎng)動(dòng)畫
     
     @from : 起始View
     @to : 結(jié)束View
     @duration : 動(dòng)畫時(shí)間
     @options : 動(dòng)畫的形式
     */
    UIView.transition(from: fromView, to: toView, duration: 5, options: [ .transitionFlipFromLeft,.showHideTransitionViews]) { (isFinish) in
        // code .... 兩個(gè)View的其他處理內(nèi)容
    }
}

其產(chǎn)生的動(dòng)畫效果如下:


6.gif

7、UIView 的基本動(dòng)畫的寫法如下

// TODO: 動(dòng)畫的一般寫法
func basicAnimation() -> Void {
    // 開始某個(gè)動(dòng)畫
    UIView.beginAnimations("animation", context: nil)
    // 設(shè)置動(dòng)畫時(shí)間
    UIView.setAnimationDuration(5)
    // 設(shè)置動(dòng)畫的延時(shí)時(shí)間
    UIView.setAnimationDelay(0.25)
    // 設(shè)置動(dòng)畫的效果
    UIView.setAnimationCurve(.easeInOut)
    // 設(shè)置動(dòng)畫是否重復(fù)站超,0為無限重復(fù)
    UIView.setAnimationRepeatCount(0)
    // 設(shè)置動(dòng)畫的代理
    UIView.setAnimationDelegate(self)
    // 設(shè)置動(dòng)畫將要觸發(fā)的時(shí)調(diào)用的方法
    UIView.setAnimationWillStart(#selector(willStartMethod))
    // 設(shè)置動(dòng)畫結(jié)束時(shí)觸發(fā)的方法
    UIView.setAnimationDidStop(#selector(didStopMethod))
    // 設(shè)置動(dòng)畫是否可用
    UIView.setAnimationsEnabled(true)
    // 設(shè)置動(dòng)畫是否從當(dāng)前狀態(tài)開始(例如:一個(gè)動(dòng)畫正在播放時(shí)荸恕,我們要進(jìn)行下一個(gè)動(dòng)畫,如果設(shè)置為 true 時(shí)死相,動(dòng)畫將從當(dāng)前動(dòng)畫狀態(tài)開始動(dòng)畫融求。為 false時(shí)是等上一個(gè)動(dòng)畫停止時(shí),開始下一個(gè)動(dòng)畫)
    UIView.setAnimationBeginsFromCurrentState(true)
    // 設(shè)置動(dòng)畫開始的時(shí)間
    UIView.setAnimationStart(Date.init())
    // 設(shè)置動(dòng)畫是否執(zhí)行動(dòng)畫回路,前提 UIView.setAnimationRepeatCount(0) 為 0
    UIView.setAnimationRepeatAutoreverses(true)
    // 設(shè)置單個(gè)View的轉(zhuǎn)場(chǎng)動(dòng)畫
    UIView.setAnimationTransition(.flipFromLeft, for: self.view, cache: true)
    // 設(shè)置動(dòng)畫的結(jié)束
    UIView.commitAnimations()
}

// 動(dòng)畫代理觸發(fā)事件

@objc func willStartMethod() {
    // 動(dòng)畫將要開始執(zhí)行觸發(fā)的代理事件
}

@objc func didStopMethod() {
    // 動(dòng)畫結(jié)束后觸發(fā)的方法
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末算撮,一起剝皮案震驚了整個(gè)濱河市生宛,隨后出現(xiàn)的幾起案子县昂,更是在濱河造成了極大的恐慌,老刑警劉巖陷舅,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件倒彰,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡蔑赘,警方通過查閱死者的電腦和手機(jī)狸驳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缩赛,“玉大人耙箍,你說我怎么就攤上這事∷肘桑” “怎么了辩昆?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)旨袒。 經(jīng)常有香客問我汁针,道長(zhǎng),這世上最難降的妖魔是什么砚尽? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任施无,我火速辦了婚禮,結(jié)果婚禮上必孤,老公的妹妹穿的比我還像新娘猾骡。我一直安慰自己,他們只是感情好敷搪,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布兴想。 她就那樣靜靜地躺著,像睡著了一般赡勘。 火紅的嫁衣襯著肌膚如雪嫂便。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天闸与,我揣著相機(jī)與錄音毙替,去河邊找鬼。 笑死践樱,一個(gè)胖子當(dāng)著我的面吹牛厂画,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播映胁,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼木羹,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼甲雅!你這毒婦竟也來了解孙?” 一聲冷哼從身側(cè)響起坑填,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎弛姜,沒想到半個(gè)月后脐瑰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡廷臼,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年苍在,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片荠商。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡寂恬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出莱没,到底是詐尸還是另有隱情初肉,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布饰躲,位于F島的核電站牙咏,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏嘹裂。R本人自食惡果不足惜妄壶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望寄狼。 院中可真熱鬧丁寄,春花似錦、人聲如沸例嘱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)拼卵。三九已至奢浑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間腋腮,已是汗流浹背雀彼。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留即寡,地道東北人徊哑。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像聪富,于是被迫代替她去往敵國(guó)和親莺丑。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無非是以下四種:UIView動(dòng)畫,核心動(dòng)畫梢莽,幀動(dòng)畫萧豆,自定義轉(zhuǎn)場(chǎng)動(dòng)畫。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,082評(píng)論 1 23
  • 概覽 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜轻局,今天將帶大家一窺iOS動(dòng)畫全貌洪鸭。在這里你...
    被吹落的風(fēng)閱讀 1,554評(píng)論 1 2
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜仑扑,今天將帶大家一窺ios動(dòng)畫全貌览爵。在這里你可以看...
    每天刷兩次牙閱讀 8,471評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜镇饮,今天將帶大家一窺iOS動(dòng)畫全貌拾枣。在這里你可以看...
    F麥子閱讀 5,104評(píng)論 5 13
  • 概覽 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜盒让,今天將帶大家一窺iOS動(dòng)畫全貌梅肤。在這里你...
    Yiart閱讀 3,799評(píng)論 3 34