読者です 読者をやめる 読者になる 読者になる

koogawa log

iOS、Android、foursquareに関する話題

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

iOS iPhone

タイトルまんまですw

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

iOS 7のUI DynamicsとUIAccelerometerの加速度センサーを組み合わせることにより、iPhoneの... on Twitpic

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

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

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

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

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の傾きが取得できます。

f:id:koogawa:20131126021537p:plain
iOSイベント処理ガイドより)

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

この内の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 にセットする値の正負が逆になるということです。この例ではマイナスを付けて正負を逆転させています。

宣伝

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