Swift動畫 -- 矩形按鈕變成圓形按鈕

今天分享如何將矩形的按鈕動畫變成圓形的按鈕，先看原來的畫面，如圖所示按鈕原本是長方形

而我們最後的目標就是將它們變成圓形的按鈕，如下圖所示:

範例中我們用一個Timer來使按鈕3秒過後可以變成圓形的

Timer語法

NSTimer.scheduledTimerWithTimeInterval(3, target: self, selector: #selector(ViewController.changeButton), userInfo: nil, repeats: false);

其中的changeButton就是我們要改變Button狀態的方法

程式碼如下

func changeButton(){

        // 設定loginByFB的圖

        var fbButtonImage: UIImage!

        

        fbButtonImage = UIImage(named: "ic__FB_1.png")

        

        self.loginByFB.setImage(fbButtonImage, forState: .Normal)

        

        // 設定loginByGooglePlus的圖

        var googleButtonImage: UIImage!

        

        googleButtonImage = UIImage(named: "ic__G+_1.png")

        

        self.loginByGooglePlus.setImage(googleButtonImage, forState: .Normal)

        // 縮小按鈕的動畫 3.0 = 執行速度 數字越大跑得越慢 ; 這邊是展示縮小放大的動畫

//                UIView.animateWithDuration(3.0 ,

//                                           animations:

//                    {

//                                            // 縮放尺寸

//                                            self.loginByFB.transform = CGAffineTransformMakeScale(0.6, 0.6)

//                                            self.loginByGooglePlus.transform = CGAffineTransformMakeScale(0.6, 0.6)

//                    },

//                                           completion: { finish in

//                                            UIView.animateWithDuration(0.6){

//                                                self.loginByFB.transform = CGAffineTransformIdentity

//                                                self.loginByGooglePlus.transform = CGAffineTransformIdentity

//                                            }

//                })

        

        // 讓按鈕從長方形變成圓形的動畫 -- 用來將FB和Google+按鈕變成圓形的

        UIView.animateWithDuration(3.0 ,

                                   animations:

            {

             

                // 下面程式如果註解掉的話會直接執行completion的地方

                

                // 重新定義 loginByFB 的位置與frame

//                self.loginByFB.frame = CGRectMake(self.loginByFB.frame.origin.x - 60, self.loginByFB.frame.origin.y - 160, self.loginByFB.frame.size.width, self.loginByFB.frame.size.height)

//                

//                self.loginByFB.layer.cornerRadius = 0.5 * self.loginByFB.bounds.size.width

//                

//                

//                self.loginByFB.layer.borderWidth = 1.0

//                self.loginByFB.clipsToBounds = true

//                

//                

//                // 重新定義 loginByGooglePlus 的位置與frame

//                self.loginByGooglePlus.frame = CGRectMake(self.loginByFB.frame.origin.x - 60, self.loginByGooglePlus.frame.origin.y - 160, self.loginByGooglePlus.frame.size.width, self.loginByFB.frame.size.height)

//                

//                self.loginByGooglePlus.layer.cornerRadius = 0.5 * self.loginByFB.bounds.size.width

//                

//                

//                self.loginByGooglePlus.layer.borderWidth = 1.0

//                self.loginByGooglePlus.clipsToBounds = true

                

            },

                                   completion: { finish in

                                    UIView.animateWithDuration(3.0){

                                        

                                        // 重新定義 loginByFB 的位置與frame

                                        self.loginByFB.imageView?.image = fbButtonImage

                                        

                                        self.loginByFB.bounds.size.width = 60

                                        self.loginByFB.bounds.size.height = 60

                                        

                                        self.loginByFB.frame = CGRectMake(self.loginByFB.frame.origin.x - 70, self.loginByFB.frame.origin.y - 145, self.loginByFB.frame.size.width, self.loginByFB.frame.size.height)

                                        

                                        self.loginByFB.layer.cornerRadius = 0.5 * self.loginByFB.bounds.size.width

                                        

                                        self.loginByFB.layer.borderWidth = 1.0

                                        self.loginByFB.clipsToBounds = true

                                        

                                        // 重新定義 loginByGooglePlus 的位置與frame

                                        self.loginByGooglePlus.imageView?.image = fbButtonImage

                                        

                                        self.loginByGooglePlus.bounds.size.width = 60

                                        self.loginByGooglePlus.bounds.size.height = 60

                                        

                                        self.loginByGooglePlus.frame = CGRectMake(self.loginByGooglePlus.frame.origin.x + 60, self.loginByGooglePlus.frame.origin.y - 200, self.loginByGooglePlus.frame.size.width, self.loginByGooglePlus.frame.size.height)

                                        

                                        self.loginByGooglePlus.layer.cornerRadius = 0.5 * self.loginByGooglePlus.bounds.size.width

                                        

                                        self.loginByGooglePlus.layer.borderWidth = 1.0

                                        self.loginByGooglePlus.clipsToBounds = true

                                    }

        })

        

    }

上面程式碼幾乎都有註解，所以就不在這一一說明，只截取動畫有關的程式碼，片段如下

UIView.animateWithDuration(3.0 ,animations:{},completion: { finish in

                                    UIView.animateWithDuration(3.0){}})

其中數字3.0就是動畫執行的速度，數值越大動畫就跑得越慢，而animations:{}的部份表示動畫開始的地方，這個地方可以空白不寫，沒寫的話則動畫會直接跑finish的部分，同樣的finish的地方也可以空白不寫那就只會跑開使的部分



詳細範例可以從以下網址下載
GitHub分享網址: https://github.com/jenemebo/SquareButtonToCircleButton