iphone - ハーフスクリーンアニメーションの実装

Question

Facebookに似たものを実装する予定です。左側のタップにトリプル水平バーボタンがあり、ビューを右半分以上スライドさせて、その下に別のビューを表示し、「友達」、「メッセージ」などのさまざまなオプションから選択します。 「ニュースフィード」など

そのアニメーションをどのように実装すればよいのでしょうか。いくつかのサンプルコードへの参照は良いでしょう。

取っているアイコンを付けています。

Answer 1

自分の振る舞いを Facebook の振る舞いとまったく同じにしたいと仮定すると、私は次のように実装します。-まず、適切な順序でビュー コントローラーにビューを追加することから始めます (一番下のビューを最初に追加する必要があります)。たとえば、下のテーブルビューが最初に追加され、次に上に「スライド」するコンテンツが 2 番目にビュー コントローラーのビューに追加されます。

-次に、そのスライドの上のビューに UIPanGestureRecognizer を追加します。このジェスチャのハンドラーは、ジェスチャの x コンポーネントを取得し、それに応じて最上位のビューを更新する必要があります。エンド ケースを追加して、ビューの動きを特定の範囲内に制限します。

-最後に、パン ジェスチャが終了したときに、上部のビューを完全に「開く」か、上部のビューを完全に「閉じる」ルーチンを起動します。これは単に別のアニメーション ブロックになります。パンのハンドラーの実装例を次に示します。

- (void)pan:(UIPanGestureRecognizer *)gesture
{
float translation = [gesture translationInView:self.view].x;

//don't allow for moving topview further left than screen
if (self.sliderOpen == NO && translation < 0) {
    translation = 0;
} else if (self.sliderOpen == YES && translation < -OPEN_POS) {
    translation = -OPEN_POS;
}

[self.topView setFrame:CGRectMake(self.sliderOpen == YES ? OPEN_POS + translation : translation, self.topView.frame.origin.y, self.topView.frame.size.width, self.topView.frame.size.height)];

if (gesture.state == UIGestureRecognizerStateEnded) {
    //get position, then set slide to open or closed
    float endPosition = self.topView.frame.origin.x;

    //set transition sensitivity based on open/closed state
    if (self.sliderOpen == NO) {
        //here sensitivity causes more likely open state
        if (endPosition > OPEN_POS/3) {
            [self openSlider];
        } else {
            if (endPosition != 0) {
                [self closeSlider];
            }
        }

    } else {
        //here sensitivity causes more likely closed state
        if (endPosition > 2*OPEN_POS/3) {
            if (endPosition > OPEN_POS) {
                [self reOpenSlider];
            } else {
                [self openSlider];
            }
        } else {
            [self closeSlider];
        }
    }
}
}

ここでの「トップビュー」は、上にスライドするビューです。openSlider および closeSlider メソッドは、topview を完全に開いたり完全に閉じたりする単なるアニメーション ブロックです。