iOS 7のUI Dynamicsでまりもを転がしてみた話

タイトルまんまですｗ

まずは次の映像をご覧ください。（最初の数秒だけ見ていただければ大丈夫です）

この動きは、iOS 7から追加されたUI Dynamicsと、Core Motionを組み合わせて実現しています。

ちょっと詳しく解説してみます。

UI Dynamicsでまりもを「落とす」

まりもの落下は、UI Dynamicsの UIGravityBehavior と UICollisionBehavior を使って実現しています。

UIDynamicAnimator* animator =
    [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

UIGravityBehavior* gravityBeahvior =
    [[UIGravityBehavior alloc] initWithItems:@[self.marimo]];
UICollisionBehavior* collisionBehavior =
    [[UICollisionBehavior alloc] initWithItems:@[self.marimo]];
collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
[animator addBehavior:gravityBeahvior];
[animator addBehavior:collisionBehavior];
collisionBehavior.collisionDelegate = self;

self.animator = animator;

これだけでまりもが上から落下して、画面の下に衝突すると跳ね返る動きが実装できます。

重力がかかる方向は、UIGravityBehaviorの gravityDirection プロパティで指定できます。値は

gravityBeahvior.gravityDirection = CGVectorMake(1.0, -1.0);

のように指定します。デフォルトでは (0.0, 1.0) ＝下方向が設定されています。

Core Motionで重力をコントロール

このままだとただまりもが落下するだけなので、iPhoneの傾きによって重力をコントロールしてみます。

Core Motionを使うことによって、iPhoneの傾きが取得できます。

（iOSイベント処理ガイドより）

詳しい使い方は次のエントリをご覧ください。

• 【Tips】iOSで加速度センサーを使用する - CoreMotion（Swift対応） - koogawa blog

この内のx, y座標を、先ほど説明したUIGravityBehaviorの gravityDirection プロパティにセットすることで、iPhoneの傾きとまりもの重力を連携させるわけです。

[self.motionManager startAccelerometerUpdatesToQueue:[NSOperationQueue currentQueue]
                                         withHandler:^(CMAccelerometerData *data, NSError *error)
 {
    // まりもの重力をセット
    _gravityBeahvior.gravityDirection =
        CGVectorMake(accelerationData.acceleration.x, -accelerationData.acceleration.y);
 }];

この結果、iPhoneを傾けた方向にまりもが転がるようになります。

注意しないといけないのは、Core Motionで取得できる y の値と gravityDirection にセットする値の正負が逆になるということです。この例ではマイナスを付けて正負を逆転させています。

宣伝

今回紹介したまりもアプリはこちらからダウンロードできます！