web-dev-qa-db-ja.com

Twitter foriPadでの紙の折り畳み/展開効果

Twitter for iPadは、派手な「紙の折り目を広げるためのピンチ」効果を実装しています。ここに短いビデオクリップ。 http://www.youtube.com/watch?v=B0TuPsNJ-XY

これは、OpenGLなしでCATransform3Dを使用して実行できますか？実用的な例はありがたいです。

更新：このアニメーション効果へのアプローチまたは実装に興味がありました。だから私はこの質問に賞金を提供しました-srikar

iosobjective-canimationcore-animation
33
Tim Wu

これは、ジェスチャレコグナイザーとCATransform3Dを使用して開始する非常に簡単な例です。ピンチするだけで灰色のビューが回転します。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...

    CGRect rect = self.window.bounds;
    view = [[UIView alloc] initWithFrame:CGRectMake(rect.size.width/4, rect.size.height/4,
                                                         rect.size.width/2, rect.size.height/2)];
    view.backgroundColor = [UIColor lightGrayColor];
    [self.window addSubview:view];

    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = -1/500.0; // this allows perspective
    self.window.layer.sublayerTransform = transform;

    UIPinchGestureRecognizer *rec = [[UIPinchGestureRecognizer alloc] initWithTarget:self
                                                                              action:@selector(pinch:)];
    [self.window addGestureRecognizer:rec];
    [rec release];

    return YES;
}

- (void)pinch:(UIPinchGestureRecognizer *)rec
{
    CATransform3D t = CATransform3DIdentity;
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0);
    t = CATransform3DRotate(t, rec.scale * M_PI, 1, 0, 0);
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0);
    self.view.layer.transform = t;
}
30
jtbandes

基本的に、この効果はいくつかの異なるステップで構成されています。

  1. ピンチアウトが発生していることを検出するジェスチャレコグナイザー。
  2. ジェスチャーが始まると、Twitterは上部と下部に グラフィックスコンテキスト を作成し、基本的にそれらのレイヤーから画像を作成します。*
  3. 上部と下部にサブビューとして画像を添付します。
  4. 指が曲がったり外れたりするときに、CATransform3Dを使用して 遠近法を追加 画像に追加します。
  5. ビューが「完全に引き伸ばされた」状態になったら、実際のサブビューを表示し、グラフィックスコンテキストで作成された画像を削除します。

ビューを折りたたむには、上記の逆を実行します。

*これらのビューは比較的単純であるため、グラフィックスコンテキストにレンダリングする必要がない場合があります。

4
Wayne Hartman

効果は基本的にX軸を中心に回転するビューです。リストからツイートをドラッグすると、X-Z平面に平行に始まるビューが表示されます。ユーザーがピンチを解除すると、ビューはX-Y平面に完全に入るまでX軸を中心に回転します。 ドキュメント は言う：

CATransform3Dデータ構造は、回転、スケーリング、オフセット、スキュー、およびレイヤーへの遠近法変換の適用に使用される同種の3次元変換（CGFloat値の4 x 4マトリックス）を定義します。

さらに、CALayerのtransformプロパティはCATransform3D構造であり、アニメーション化も可能であることがわかっています。エルゴ、問題の折りたたみ効果はCoreAnimationで実行可能であると言っても過言ではありません。

1
Caleb