この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
内村航平選手 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")
実行画面
まとめ
私はアニメーションに関してはシロウトなのですが、体操見てたらどうしてもコレを作りたくなってしまって、がんばって調べたらなんとかなりました。
日本の体操選手たちのおかげです。
ありがとうございました。