今天分享如何將矩形的按鈕動畫變成圓形的按鈕
，先看原來的畫面，如圖所示按鈕原本是長方形
而我們最後的目標就是將它們變成圓形的按鈕
，如下圖所示:
範例中我們用一個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
