эффект сворачивания / разворачивания бумаги в твиттере для iPad - PullRequest
32 голосов
/ 22 марта 2011

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

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

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

Ответы [ 3 ]

30 голосов
/ 28 июня 2011

Вот очень простой пример использования распознавателя жестов и 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;
}
4 голосов
/ 28 июня 2011

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

  1. Распознаватель жестов для определения, когда происходит пин-аут.
  2. Когда начинается жест, Twitter, вероятно, создает графический контекст для верхней и нижней части, по существу создавая изображения из их слоев. *
  3. Прикрепите изображения в виде подпредставлений сверху и снизу.
  4. Как пальцысогните и изогните, используйте от CATransform3D до добавьте перспективу к изображениям.
  5. Как только вид полностью растянется, сделайте видимыми реальные подпредставления и удалите графический контекст.созданные изображения.

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

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

1 голос
/ 28 июня 2011

Эффект - это просто представление, вращающееся вокруг оси X: когда вы перетаскиваете твит из списка, появляется представление, которое начинается параллельно плоскости XZ.Когда пользователь отжимается, вид вращается вокруг оси X, пока полностью не войдет в плоскость XY.Документация гласит:

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...