Эффект складывания/разворота бумаги в твиттере для iPad

Twitter для iPad реализует фантастический эффект "сжимать, чтобы увеличить бумагу". Короткий видеоклип здесь. http://www.youtube.com/watch?v=B0TuPsNJ-XY

Можно ли это сделать с помощью CATransform3D без OpenGL? Рабочий пример был бы благодарен.

Обновление: Меня интересовал подход или реализация этого эффекта анимации. Вот почему я предложил щедрость по этому вопросу - srikar

Ответы

Ответ 1

Вот действительно простой пример использования распознавателя жестов и 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;
}

Ответ 2

По существу, этот эффект состоит из нескольких различных этапов:

  • распознаватель жестов для обнаружения, когда происходит пинч-выход.
  • Когда начнется этот жест, Twitter, скорее всего, создаст графический контекст для верхней и нижней частей, по существу создавая изображения из своих слоев. *
  • Прикрепите изображения в виде подзонов сверху и снизу.
  • По мере того, как пальцы сгибаются и выходят, используйте CATransform3D to добавить перспектив к изображениям.
  • После того, как представление "полностью растянуто", сделайте реальные видимые видимости и удалите графические контекстно-образованные изображения.

Чтобы свернуть представления, сделайте обратное выше.

* Поскольку эти представления относительно просты, их, возможно, не нужно отображать в графическом контексте.

Ответ 3

Эффект - это просто просмотр, вращающийся вокруг оси X: при перетаскивании твита из списка открывается представление, которое начинается параллельно плоскости X-Z. Поскольку пользователь не зажимает, изображение вращается вокруг оси X до тех пор, пока оно не вступит полностью в плоскость X-Y. documentation говорит:

Структура данных CATransform3D определяет однородную трехмерную трансформировать (4 × 4-матрица CGFloat значения), которые используются для вращения, масштабирования, смещение, перекос и применение перспективы преобразование в слой.

Кроме того, мы знаем, что свойство CALayer transform является структурой CATransform3D и что оно также анимируется. Эрго, я думаю, что можно с уверенностью сказать, что рассматриваемый эффект сгибания невозможен с помощью Core Animation.