[iOS 8] CABasicAnimation で月面宙返り

内村航平選手 5連覇おめでとうございます！

体操世界選手権見てました。とても良かったです。
私も体操に触発されて、ムーンサルトのアニメーション作っちゃいました。

ムーンサルト

この技は、「後（前）方二回宙返り一回ひねり」で、塚原光男がトランポリンの技「ハーフインハーフアウト」（後方1回宙返り1/2ひねり＋前方1回宙返り1/2ひねり）に想を得て編み出し、1972年（昭和47年）のミュンヘンオリンピック団体の自由演技で鉄棒の下り技として発表したのが最初である。

Wikipedia より

というわけで、「後方二回宙返り一回ひねり」を CABasicAnimation で実現します。

CABasicAnimation

CABasicAnimation は layer のプロパティに対して、基本的なシングルキーフレームアニメーション機能を提供します。

リファレンス より

今回は CABasicAnimation をグループ化して、複雑なアニメーションを表現しています。

サンプルコード

// ムーンサルトさせるビュー
@IBOutlet weak var imageView: UIImageView!

let duration = 2.0    // アニメーション時間 2秒
let singleTwist = M_PI * 2 // 360度

// 縦回転アニメーション（X軸を中心に回転）
let verticalTwistAnimation = CABasicAnimation(keyPath: "transform.rotation.x")
verticalTwistAnimation.toValue = singleTwist * 2   // 2回転

// 横回転アニメーション（Y軸を中心に回転）
let horizontalTwistAnimation = CABasicAnimation(keyPath: "transform.rotation.y")
horizontalTwistAnimation.toValue = singleTwist // 1回転

// ジャンプアニメーション（上下に平行移動）
let jumpAnimation = CABasicAnimation(keyPath: "position.y")
jumpAnimation.toValue = imageView.layer.position.y - 300
jumpAnimation.duration = duration / 2
jumpAnimation.autoreverses = true
jumpAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

// アニメーションを同時実行するためにグループを作成
let animationGroup = CAAnimationGroup()
animationGroup.duration = duration
animationGroup.animations = [verticalTwistAnimation, horizontalTwistAnimation, jumpAnimation]

// アニメーションを実行
imageView.layer.addAnimation(animationGroup, forKey: "moonSaltoAnimation")

実行画面

まとめ

私はアニメーションに関してはシロウトなのですが、体操見てたらどうしてもコレを作りたくなってしまって、がんばって調べたらなんとかなりました。
日本の体操選手たちのおかげです。
ありがとうございました。

リンク

• CABasicAnimation Class Reference