【Swift】UIButtonを一回転させるアニメーション【改】

以前書いた記事「【Swift】UIButtonを一回転させるアニメーション」では、iOS8以上では一回転していましたが、iOS7では変な挙動をしていました。

今回やっとiOS7環境でも動くように改善しました。

iOS8以降でもこちらを利用した方が断然良いと思います！

 

以前のコード

まずは以前のコードのどこを書き換えるかです。

override func viewDidLoad() {
        super.viewDidLoad()
        BtnFunc()
}
func BtnFunc(){
        let Btn = UIButton()
        let Image = UIImage(named:"image.png")! as UIImage
        Btn.frame = CGRectMake(0,0,61,53)
        Btn.layer.position = CGPoint(x:self.view.bounds.width * 4.0 / 5.0,y:450.0)
        Btn.setImage(Image,forState:.Normal)
        Btn.addTarget(self,action:"BtnAnimation:",forControlEvents:.TouchUpInside)
        view.addSubview(Btn)
}    
func BtnAnimation(sender:UIButton){

/**************この部分をがっつり削除しましょう！
        // 初期化.
        sender.transform = CGAffineTransformMakeRotation(0)
        
        // radianで回転角度を指定(180度).
        let angle:CGFloat = CGFloat(M_PI)
        
        // アニメーションの秒数を設定(1秒).
        UIView.animateWithDuration(1.0,
            
            animations: { () -> Void in
                
                // 回転用のアフィン行列を生成.
                sender.transform = CGAffineTransformMakeRotation(angle)
                sender.transform = CGAffineTransformIdentity
            },
            completion: { (Bool) -> Void in
        })
*/
    }

 

アニメーションの部分をがっつり変えちゃいます。

代わりにこのようなコードを書きます

let rotationAnimation = CABasicAnimation(keyPath:"transform.rotation.z")
rotationAnimation.toValue = CGFloat(M_PI / 180) * 360
rotationAnimation.duration = 0.8
rotationAnimation.repeatCount = 1
sender.layer.addAnimation(rotationAnimation, forKey: "rotationAnimation")

 

これでiOS7でもちゃんと動くようになりました！わーい

 

少し解説・・・

animateWithDuration: animations:ではなくCABasicAnimationを用いる

animateWithDuration:animationsでは360度回転って意外と難しいです。簡単にできそうなのに全然できずにイライラしていましたが、CABasicAnimationを用いると簡単に360度回転することができました。

 

まず回転アニメーションを用いることを宣言

//CABasicAnimationのtransform.rotation.zを使うよ
let rotationAnimation = CABasicAnimation(keyPath:"transform.rotation.z")

ここでkeyPathを自分で設定するもんだと思ってたら違いました(照)

ちゃんと用意されているのでないと動かないので注意です。

 

次に回転角度を決めます

//回転角度
rotationAnimation.toValue = CGFloat(M_PI / 180) * 360

この値は、プラスのときは時計周り、マイナスのときは反時計回りに回ります。

 

次にアニメーションにかかる時間です

//回転にかかる時間
rotationAnimation.duration = 0.8

 

リピートする回数は今回は1回転のみにしたいので1にしておきます。

//リピートする回数
rotationAnimation.repeatCount = 1
//無限に繰り返す場合は
rotationAnimation.repeatCount = MAXFLOAT

 

最後にアニメーションさせたいものにaddAnimationします。

//ここでのsenderはUIButtonになります
sender.layer.addAnimation(rotationAnimation, forKey: nil)

//viewやlabelでも出来ます。
view.layer.addAnimation(rotationAnimation,forKey:"viewRotate")

//アニメーションを削除するときとかにKeyを使います
view.layer.removeAnimationForKey("viewRotate")

 

 

こんな感じです。

 

全体のコード

override func viewDidLoad() {
        super.viewDidLoad()
        BtnFunc()
}
func BtnFunc(){
        let Btn = UIButton()
        let Image = UIImage(named:"image.png")! as UIImage
        Btn.frame = CGRectMake(0,0,61,53)
        Btn.layer.position = CGPoint(x:self.view.bounds.width * 4.0 / 5.0,y:450.0)
        Btn.setImage(Image,forState:.Normal)
        Btn.addTarget(self,action:"BtnAnimation:",forControlEvents:.TouchUpInside)
        view.addSubview(Btn)
}    
func BtnAnimation(sender:UIButton){
        let rotationAnimation = CABasicAnimation(keyPath:"transform.rotation.z")
        rotationAnimation.toValue = CGFloat(M_PI / 180) * 360
        rotationAnimation.duration = 0.8
        rotationAnimation.repeatCount = 1
        sender.layer.addAnimation(rotationAnimation, forKey: "rotationAnimation")
    }

 

 

参考リンク

• 360°の回転アニメーションを作る