Кривые / деформирующие виды с CoreAnimation или OpenGL для эффекта карусели - PullRequest
8 голосов
/ 14 января 2011

Прямо сейчас я заполняю UIScrollView серией представлений.Виды должны быть деформированы, чтобы UIScrollView выглядел как карусель.Другими словами, когда пользователь прокручивает его, он должен быть похож на круг.Я никогда не делал ничего подобного раньше, но я предполагаю, что CoreAnimation не может быть и речи, и OpenGL нужно использовать.Если это возможно с CoreAnimation или Quartz, тогда мне просто нужен пример того, как деформировать представления, и я могу сам разобраться с остальными, но я не знаком с OpenGL.

Ответы [ 2 ]

15 голосов
/ 25 января 2011

Если вы хотите деформировать представления, вам понадобится либо OpenGL, либо вы можете использовать CAShapLayer в Core Animation, который позволяет вам указать путь Безье, который может содержать эту кривую.Но имейте в виду, что эта кривая, которую вы видите, скорее всего, просто оптическая иллюзия (хотя на вашем изображении выше она выглядит как реальная кривая).Если вы получите достаточно прямоугольников с правильным вращением оси Y в ряд, я думаю, что вы можете получить эффект, который вы ищете, с прямой базовой анимацией.Я почти уверен, что именно так все и реализовано в демонстрационных программах Core Animation, которые Apple представила пару лет назад.Вот скриншот из видео с этой презентации: Core Animation Layer Warping

Я немного повредил с преобразованием слоя вида и придумал следующее:

- (IBAction)sliderDidChange:(id)sender
{
  CGFloat value = [(UISlider*)sender value];
  CGFloat xOff = value - 0.5;

  CATransform3D trans = CATransform3DIdentity;
  trans.m34 = 1.0f / -1000.0f;

  trans = CATransform3DRotate(trans, degreesToRadians(xOff * -25.0f), 0.0f, 1.0f, 0.0f);
  trans = CATransform3DTranslate(trans, 0.0f, 0.0f, 900.0f * fabs(xOff));
  [[frameView layer] setTransform:trans];

  CGPoint center= [frameView center];
  [frameView setCenter:CGPointMake(1024.0 * value, center.y)];
}

Я бросил вместе демонстрационный проект , который показывает, как вращение работает в ответ на слайдер.Он не использует представление прокрутки, поэтому вам придется адаптировать его, но я думаю, что вы можете отслеживать текущее смещение прокрутки и соответственно применять преобразование.Не уверен, что это поможет, но это так.

6 голосов
/ 14 января 2011

По моему опыту, получить правильные значения немного сложно.Способ дать перспективу взгляда, управляя его преобразованием слоя.Я использовал следующий метод для достижения трансформации схожего эффекта:

-(CATransform3D)makeTransformForAngle:(CGFloat)angle from:(CATransform3D)start{

    CATransform3D transform = start;


    // the following two lines are the key to achieve the perspective effect
CATransform3D persp = CATransform3DIdentity;
    persp.m34 = 1.0 / -1000;

    transform = CATransform3DConcat(transform, persp);
        transform = CATransform3DRotate(transform,angle, 0.0, 1.0, 0.0);
    return transform;
}

Это было сделано для создания анимации «перевернутой страницы», поэтому вам может потребоваться адаптация.Чтобы использовать его, выполните следующие действия:

flip_page.layer.transform = [self makeTransformForAngle:angle from:CATransform3DIdentity];

, где flip_page - это UIView.Ура!

...