Swiftでアニメーション[CoreAnimation編] #Swift

Swiftでアニメーションを実装する手順について、紹介していきます。

Swiftでアニメーションする方法として、UIKitのクラスメソッドをつかった方法とカスタム性の高いCoreAnimationクラスを使う方法があります。

今回は、CoreAnimationを使う方法を紹介します。

こちらも参考に

CoreAnimation

CoreAnimationは、UIKitアニメーションほど直感的ではなくアニメーションをプロパティの設定によって細かく設定できるようになっています。そのため、UIKitのときより難しい感じはありますが軽量かつ細かなアニメーションが可能になっています。

アニメーションを実装するための基本的なCoreAnimationクラスを２つ紹介します。

CABasicAnimation
CAAnimationGroup

CABasicAnimation

CABasicAnimationクラスは、アニメーションで変化させるプロパティの変化前と後、インターバルを設定することでアニメーションさせるクラスです。

例えば、ビューの角丸サイズを変えるアニメーションはこのような感じです。

 func startCornerRadiusAnimation()
    {   
        // cornerRadiusを変更するアニメーション
        var cornerRadiusAnimation = CABasicAnimation(keyPath: "cornerRadius")

        // cornerRadius を 0 -> 100 に変化させるよう設定
        cornerRadiusAnimation.fromValue = 0
        cornerRadiusAnimation.toValue = 100

        // アニメーション
        cornerRadiusAnimation.duration = 2.0

        // アニメーションが終了した時の状態を維持する
        cornerRadiusAnimation.removedOnCompletion = false
        cornerRadiusAnimation.fillMode = kCAFillModeForwards

        // アニメーションが終了したらanimationDidStopを呼び出す
        cornerRadiusAnimation.delegate = self

        // アニメーションの追加
        animationView.layer.addAnimation(cornerRadiusAnimation, forKey: "cornerRadiusAnimation")
    }

CAAnimationGroup

CAAnimationGroupは、複数のアニメーションを同時に設定するためのクラスです。例えば、"ビューのサイズ変更・変形・回転を同時にアニメーションさせる"といったことができます。

func startCornerRadiusAndSizeAnimation()
    {
        // 角丸を変化させるアニメーション
        var cornerRadiusAnimation:CABasicAnimation = CABasicAnimation(keyPath: "cornerRadius")
        cornerRadiusAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        cornerRadiusAnimation.fromValue = 0
        cornerRadiusAnimation.toValue = 150

        // サイズを変化させるアニメーション
        var sizeAnimation:CABasicAnimation = CABasicAnimation(keyPath: "bounds.size")
        sizeAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        sizeAnimation.fromValue = NSValue(CGSize:CGSizeMake(100, 100))
        sizeAnimation.toValue = NSValue(CGSize:CGSizeMake(300, 300))

        // 角丸アニメーションとサイズアニメーションをグループとして登録
        var animationGroup:CAAnimationGroup = CAAnimationGroup()
        animationGroup.setValue("group-animation1", forKey: "animationName")
        animationGroup.animations = [cornerRadiusAnimation, sizeAnimation]
        animationGroup.duration = 2.0
        animationGroup.delegate = self

        // アニメーションが終了した時の状態を維持する
        animationGroup.removedOnCompletion = false
        animationGroup.fillMode = kCAFillModeForwards

        // アニメーショングループの追加
        animationView.layer.addAnimation(animationGroup, forKey: "group-animation")
    }

そのほかにもCoreAnimationクラスがいくつかあります。

CAPropetyAnimation
CATransition
CGAffineTransform

最後に

CoreAnimationクラスを使ったアニメーションでは、UIKitクラスで提供されているアニメーションではできない layerプロパティ のアニメーションといった細かな動作をさせることができます。

また複数のアニメーションを同時にさせることや、実装するアニメーションが多い場合にコードを整理させて書くこともできます。