摘要： 本文將實(shí)現(xiàn)簡(jiǎn)單的“登錄界面按鈕移動(dòng)效果”，并通過(guò)此動(dòng)畫(huà)效果介紹動(dòng)畫(huà)設(shè)計(jì)和分析的思路。本文不僅旨在讓大家弄清動(dòng)畫(huà)效果是如何通過(guò)代碼來(lái)實(shí)現(xiàn)的，更重要的是希望大家通過(guò)對(duì)本文的學(xué)習(xí)，掌握動(dòng)畫(huà)設(shè)計(jì)和分析的思路。本文選自《iOS動(dòng)畫(huà)——核心技術(shù)與案例實(shí)戰(zhàn)》

創(chuàng)新互聯(lián)成立與2013年，先為建華等服務(wù)建站，建華等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為建華企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

首先先來(lái)看看動(dòng)畫(huà)設(shè)計(jì)中的三個(gè)角色：產(chǎn)品設(shè)計(jì)師、算法分析師以及偉大的程序員都有哪些職責(zé)。
（1）產(chǎn)品設(shè)計(jì)師：告訴大家想做一個(gè)什么樣的動(dòng)畫(huà)。
（2）算法分析師：分析動(dòng)畫(huà)的實(shí)現(xiàn)原理并設(shè)計(jì)相應(yīng)的動(dòng)畫(huà)算法。
（3）程序員：思考如何用代碼實(shí)現(xiàn)算法。
在一般中小規(guī)模的公司中，開(kāi)發(fā)人員往往都是身兼數(shù)職。不僅要編寫(xiě)代碼還要參與到算法的設(shè)計(jì)中去，甚至參與到動(dòng)畫(huà)原型的設(shè)計(jì)中去。所以弄清楚動(dòng)畫(huà)設(shè)計(jì)過(guò)程中的不同角色，以及搞清楚動(dòng)畫(huà)的分析過(guò)程是非常有必要的。

1 動(dòng)畫(huà)分析方法

下圖是我們想要實(shí)現(xiàn)的動(dòng)畫(huà)效果，那么如何來(lái)分析它呢？其實(shí)產(chǎn)品設(shè)計(jì)師在設(shè)計(jì)動(dòng)畫(huà)時(shí)，如果能夠?qū)?dòng)畫(huà)分解為單幀圖像，或者能夠較為慢速地展現(xiàn)動(dòng)畫(huà)的變化過(guò)程，那么對(duì)于算法分析師和程序員分析動(dòng)畫(huà)的原理，以及設(shè)計(jì)合適的展現(xiàn)算法起著非常重要的作用。下圖描述了登錄按鈕從左到右逐漸移動(dòng)的效果，并最后停留在視圖層中間位置這一過(guò)程。

這個(gè)動(dòng)畫(huà)效果非常簡(jiǎn)單，可以用一句話(huà)來(lái)描述其實(shí)現(xiàn)算法，即圖像的水平方向位置坐標(biāo)和時(shí)間呈線性漸變關(guān)系。接下來(lái)思考如何用代碼實(shí)現(xiàn)這個(gè)效果。按照動(dòng)畫(huà)的展示過(guò)程，這里將動(dòng)畫(huà)分為：動(dòng)畫(huà)起始階段、動(dòng)畫(huà)進(jìn)行階段和動(dòng)畫(huà)結(jié)束階段。

1．動(dòng)畫(huà)起始階段

在動(dòng)畫(huà)啟動(dòng)的瞬間，希望動(dòng)畫(huà)從屏幕可視界面外飛入進(jìn)來(lái)。如下圖所示的登錄按鈕是需要實(shí)現(xiàn)的動(dòng)畫(huà)起始位置。

在iOS視圖中，左上角為視圖的原點(diǎn)（0，0），水平向右為x軸遞增方向，豎直向下為y軸遞增方向，只有當(dāng)View視圖位于手機(jī)屏幕展示坐標(biāo)系之內(nèi)，大家才能看到（虛線區(qū)域內(nèi)控件不可見(jiàn)），否則登錄按鈕是不可見(jiàn)的。所以在動(dòng)畫(huà)的起始階段可以將動(dòng)畫(huà)的位置屬性設(shè)置在界面之外。

2．動(dòng)畫(huà)進(jìn)行階段

經(jīng)過(guò)前面的分析，大家已經(jīng)了解了這個(gè)動(dòng)畫(huà)效果的實(shí)現(xiàn)算法，即登錄按鈕的坐標(biāo)沿水平方向隨時(shí)間線性變化。如表1.1所示描述了不同時(shí)間段登錄按鈕的坐標(biāo)變化情況。幸運(yùn)的是大家不需要手動(dòng)設(shè)計(jì)這一過(guò)程，甚至不需要手動(dòng)寫(xiě)線性漸變的方法，因?yàn)閕OS在UIView的顯示層已經(jīng)幫我們把這個(gè)功能集成了。iOS在UIView圖層中不僅集成了動(dòng)畫(huà)的線性漸變方法，而且動(dòng)畫(huà)的加速、減速以及復(fù)雜的動(dòng)畫(huà)變化時(shí)間函數(shù)、運(yùn)動(dòng)路徑函數(shù)也已經(jīng)為大家集成好了，所以只需要學(xué)會(huì)如何使用這些豐富的API即可，且這個(gè)功能只需要幾行代碼就可以實(shí)現(xiàn)。
表1.1 6S下QQ圖標(biāo)移動(dòng)效果：QQ圖標(biāo)x、y坐標(biāo)隨時(shí)間變化關(guān)系表

3．動(dòng)畫(huà)結(jié)束階段

在動(dòng)畫(huà)效果結(jié)束之后沒(méi)有觸發(fā)新的回調(diào)事件，只是更新了當(dāng)前登錄按鈕的最后位置，所以圖片最終停留在視圖層的中間位置。

2 登錄按鈕移動(dòng)動(dòng)畫(huà)效果：閉包形式

首先創(chuàng)建一個(gè)單視圖工程，創(chuàng)建好之后可以看到下圖的工程文件目錄結(jié)構(gòu)：

動(dòng)畫(huà)實(shí)現(xiàn)的第一階段：動(dòng)畫(huà)起始階段
在開(kāi)始正式添加動(dòng)畫(huà)代碼之前需要為應(yīng)用添加一個(gè)背景圖片。在Main.storyboard中為整個(gè)工程添加一個(gè)已經(jīng)準(zhǔn)備好的背景圖片，背景圖片依托在UIImageView上。

上圖為當(dāng)前工程的Main.storyboard中圖層結(jié)構(gòu)，其中View Controller為整個(gè)工程的視圖控制器，login為UIImageView登錄背景圖片。下圖示是準(zhǔn)備好的背景圖片，通過(guò)下圖可以看出，要想實(shí)現(xiàn)最初所示的動(dòng)畫(huà)效果，只需為整個(gè)登錄界面添加一個(gè)登錄按鈕即可。

動(dòng)畫(huà)起始階段代碼需要放在什么位置才合適呢？要想弄清楚這個(gè)問(wèn)題先搞清楚ViewController.swift 中幾個(gè)方法的執(zhí)行順序。需要關(guān)注以下3個(gè)方法。

viewDidLoad()viewWillAppear()viewDidAppear()

在應(yīng)用啟動(dòng)之后，在viewDidLoad中會(huì)裝載所有的View視圖，注意，雖然所有View視圖都被裝載進(jìn)來(lái)，但是這時(shí)所有的View視圖并不是可見(jiàn)的。程序接著調(diào)用viewWillAppear方法，這是視圖在展現(xiàn)之前需要調(diào)用的方法。而最后調(diào)用viewDidAppear，表明所有的視圖已經(jīng)可見(jiàn)。經(jīng)過(guò)以上分析，大家應(yīng)該清楚，在動(dòng)畫(huà)起始階段可以將所有的初始化代碼放置在viewDidLoad()方法中。具體實(shí)現(xiàn)代碼如下所示。

1   var loginButton:UIButton?
2   override func viewDidLoad() {
3       super.viewDidLoad()
4       loginButton = UIButton(frame: CGRect(x:-394,y:230,                      width:self.view.frame.width-20*2,height:50))5      loginButton!.backgroundColor = UIColor(red: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)6       loginButton!.setTitle("登錄", for: UIControlState. normal)7      self.view.addSubview(loginButton!)
    }

代碼第1行創(chuàng)建了一個(gè)UIButton登錄按鈕。第3行重寫(xiě)viewDidLoad方法，表明應(yīng)用啟動(dòng)之后首先通過(guò)調(diào)用viewDidload方法加載各種UI組鍵。第4行設(shè)置當(dāng)前UIButton登錄按鈕的位置，按鈕的x坐標(biāo)設(shè)置在整個(gè)界面之外，因此當(dāng)前Button按鈕是不可見(jiàn)的。第5行為登錄按鈕添加一個(gè)淡綠色背景。第6行設(shè)置登錄按鈕Title內(nèi)容。最后一行將按鈕添加到self.view圖層上。
動(dòng)畫(huà)實(shí)現(xiàn)的第二階段和第三階段：動(dòng)畫(huà)進(jìn)行階段和動(dòng)畫(huà)結(jié)束階段
要想實(shí)現(xiàn)應(yīng)用打開(kāi)動(dòng)畫(huà)即展現(xiàn)的效果，需要在View視圖整體展現(xiàn)之前完成動(dòng)畫(huà)實(shí)現(xiàn)的第二階段和第三階段的設(shè)置（因?yàn)槿绻晥D已經(jīng)顯示了才設(shè)置動(dòng)畫(huà)效果，那么會(huì)有動(dòng)畫(huà)不連貫的現(xiàn)象），所以這部分功能只能放置在viewWillAppear方法中。
這里使用的UIButton按鈕和UI控件都是繼承UIView類(lèi)，UIView類(lèi)中有一個(gè)動(dòng)畫(huà)方法可以完成我們想要實(shí)現(xiàn)的功能：

open class func animate(withDuration duration: TimeInterval, animations: @escaping () -> Swift.Void)

該方法屬于類(lèi)方法，類(lèi)名可以直接調(diào)用，表明為當(dāng)前的UIView添加一個(gè)動(dòng)畫(huà)效果，它的每個(gè)參數(shù)的含義如下。

• duration：表明動(dòng)畫(huà)執(zhí)行周期。

• animations：表明動(dòng)畫(huà)執(zhí)行內(nèi)容。

注意，這里animations是一個(gè)閉包，使用閉包的方式將動(dòng)畫(huà)代碼追加進(jìn)去。在閉包中只需要將動(dòng)畫(huà)的結(jié)束狀態(tài)設(shè)置完成，那么動(dòng)畫(huà)從開(kāi)始到結(jié)束的中間過(guò)程，iOS都會(huì)自動(dòng)實(shí)現(xiàn)。下面為viewWillAppear()中的動(dòng)畫(huà)實(shí)現(xiàn)代碼。

    override func viewWillAppear(_ animated: Bool) {        UIView.animate(withDuration: 1, animations: {          self.loginButton!.frame = CGRect(x:20,
                y:self.loginButton!.frame.origin.y, 
                 width:self.loginButton!.frame.width, 
                 height:self.loginButton!.frame.height))
        })
    }

animate方法中，duration表明動(dòng)畫(huà)執(zhí)行周期為1s，動(dòng)畫(huà)閉包部分表明登錄按鈕最終的位置，即最終停留在手機(jī)屏幕的中間位置。

3 登錄按鈕移動(dòng)動(dòng)畫(huà)效果：方法形式

除了使用閉包的方法之外，還可以使用另外一種方式實(shí)現(xiàn)這個(gè)動(dòng)畫(huà)效果，即通過(guò)commit相關(guān)方法的形式來(lái)實(shí)現(xiàn)。通過(guò)修改viewWillAppear()中的內(nèi)容，可以實(shí)現(xiàn)相同的動(dòng)畫(huà)效果。下面是動(dòng)畫(huà)移動(dòng)效果的另外一種代碼實(shí)現(xiàn)方式。

    override func viewWillAppear(animated: Bool) {1        UIView.beginAnimations(nil, context: nil)//動(dòng)畫(huà)開(kāi)始2        UIView.setAnimationDuration(1)//動(dòng)畫(huà)周期設(shè)置3        loginButton!.frame = CGRect(x:20,
               y:loginButton!.frame.origin.y,
               width:loginButton!.frame.width,
               height:loginButton!.frame.height)//動(dòng)畫(huà)位置設(shè)置4       UIView.commitAnimations()//動(dòng)畫(huà)提交
    }

代碼第1行表明動(dòng)畫(huà)開(kāi)始，這里先忽略需要傳遞的參數(shù)，可以先傳遞兩個(gè)nil。第2行設(shè)置動(dòng)畫(huà)執(zhí)行周期，這里將動(dòng)畫(huà)周期設(shè)置為1s。第3行將登錄按鈕設(shè)置在屏幕中間位置。代碼最后一行將動(dòng)畫(huà)效果提交到系統(tǒng)上運(yùn)行。
其實(shí)無(wú)論是第2節(jié)的動(dòng)畫(huà)實(shí)現(xiàn)方法抑或是第3節(jié)的動(dòng)畫(huà)實(shí)現(xiàn)方法，都可以把動(dòng)畫(huà)實(shí)現(xiàn)的過(guò)程總結(jié)為下面的3個(gè)步驟。

而第2節(jié)和第3節(jié)實(shí)現(xiàn)動(dòng)畫(huà)的唯一區(qū)別就是一個(gè)使用閉包的形式，而另一個(gè)使用beginAnimations和commitAnimations方法的形式啟動(dòng)動(dòng)畫(huà)。

4 UIView視圖中常見(jiàn)動(dòng)畫(huà)的屬性分析

我們?cè)诘?節(jié)和第3節(jié)主要依靠UIView下的frame屬性來(lái)實(shí)現(xiàn)登錄按鈕從左到右的進(jìn)入效果。那么UIView下的其他屬性是不是也可以有類(lèi)似的效果呢？要想回答這個(gè)問(wèn)題，首先需要弄清楚UIView都有哪些常見(jiàn)的屬性。

1．位置屬性：frame bounds center

frame、bounds、center都是描述UIView的位置信息，不同的是frame可以對(duì)x坐標(biāo)、y坐標(biāo)、width、height四個(gè)屬性進(jìn)行操作，frame的x坐標(biāo)和y坐標(biāo)相對(duì)于父控件的原點(diǎn)來(lái)計(jì)算，而bounds一般只能對(duì)width、height進(jìn)行操作，它的x、y坐標(biāo)只相對(duì)于自身而言，center描述的是x、y信息，即UIView的中心位置。下面是CGRect、origin、size的代碼描述。

public struct CGRect {    public var origin: CGPoint
    public var size: CGSize
    public init()    public init(origin: CGPoint, size: CGSize)
}

再來(lái)看看三者的數(shù)據(jù)類(lèi)型。frame是CGRect類(lèi)型，它是一個(gè)結(jié)構(gòu)體，在結(jié)構(gòu)體中包含origin和size兩個(gè)屬性。其中origin描述UIView的x、y坐標(biāo)起始位置信息，size描述UIView的width、height寬高信息。我們?cè)賮?lái)看看origin的CGPoint和size的CGSize又是什么。

CGpoint中包含了UIView的x、y坐標(biāo)，而CGSize中包含了UIView的Width、Height信息。通過(guò)對(duì)frame中數(shù)據(jù)類(lèi)型的追本溯源，可以得到以下結(jié)論：CGRect分別對(duì)應(yīng)x坐標(biāo)、y坐標(biāo)、width、height四個(gè)屬性。這四個(gè)屬性表明當(dāng)前UI在它的父控件上的位置，如self.view上。
通過(guò)以上分析可以知道，可以通過(guò)x、y坐標(biāo)修改UIView的移動(dòng)位置，還可以通過(guò)修改width或者h(yuǎn)eight來(lái)修改UIView的拉伸、收縮效果。對(duì)于bounds屬性使用最多的還是width、height屬性，center則經(jīng)常使用x、y坐標(biāo)屬性。

2．透明度屬性：alpha（透明度屬性、范圍0-1、浮點(diǎn)型）

UIView的alpha透明度屬性也可以用作動(dòng)畫(huà)效果。當(dāng)alpha為0時(shí)，表明UIView已經(jīng)隱藏，當(dāng)alpha為1時(shí)UIView顯示。結(jié)合這一特征可以通過(guò)修改alpha在動(dòng)畫(huà)開(kāi)始、結(jié)束時(shí)的值，實(shí)現(xiàn)UIView的淡入淡出效果。

3．Layer屬性：圓角漸變、邊框顏色、陰影、3D等高級(jí)動(dòng)畫(huà)效果

UIView是視圖顯示的容器，負(fù)責(zé)內(nèi)容顯示和事件響應(yīng)。每個(gè)UIView都有一個(gè)Layer圖層，在這個(gè)圖層中承載的是視圖的內(nèi)容，所以結(jié)合Layer可以實(shí)現(xiàn)很多高級(jí)的動(dòng)畫(huà)效果。當(dāng)然除了這些之外，UIView還有很多其他屬性，在后面的章節(jié)中會(huì)為大家一一呈現(xiàn)。

5 小結(jié)

通過(guò)對(duì)本文的學(xué)習(xí)，相信大家基本上掌握了動(dòng)畫(huà)分析的基本步驟，在這里總結(jié)一下動(dòng)畫(huà)實(shí)現(xiàn)的三個(gè)步驟：
（1）設(shè)置視圖的動(dòng)畫(huà)初始狀態(tài)。
（2）添加視圖的動(dòng)畫(huà)相應(yīng)屬性。
（3）設(shè)置視圖的動(dòng)畫(huà)最終狀態(tài)。
在通過(guò)幀分解等方法了解了動(dòng)畫(huà)的實(shí)現(xiàn)原理之后，通過(guò)這三個(gè)步驟可以很方便地實(shí)現(xiàn)各種動(dòng)畫(huà)效果。本章結(jié)合登錄按鈕移動(dòng)效果為大家展示了動(dòng)畫(huà)分析和實(shí)現(xiàn)的全過(guò)程，并通過(guò)代碼詳細(xì)介紹了通過(guò)閉包方式，以及beginAnimations和commitAnimations方法的形式實(shí)現(xiàn)動(dòng)畫(huà)。
對(duì)于UIView中常見(jiàn)的動(dòng)畫(huà)屬性，結(jié)合UIView對(duì)視圖的位置、透明度、幾何形狀給大家做了簡(jiǎn)要的分析，在后面的章節(jié)中會(huì)結(jié)合具體的代碼，為大家呈現(xiàn)繽紛多彩的動(dòng)畫(huà)效果。
本文選自《iOS動(dòng)畫(huà)——核心技術(shù)與案例實(shí)戰(zhàn)》，點(diǎn)此鏈接可在博文視點(diǎn)官網(wǎng)查看。

想及時(shí)獲得更多精彩文章，可在微信中搜索“博文視點(diǎn)”或者掃描下方二維碼并關(guān)注。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱(chēng)：動(dòng)畫(huà)分析步驟“三步曲”-創(chuàng)新互聯(lián)
本文路徑：http://m.newbst.com/article36/hghsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、微信小程序、定制網(wǎng)站、網(wǎng)站排名、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)