iOS Core Animation - Сложите слой - PullRequest
Новая
       13

iOS Core Animation - Сложите слой

14 голосов
/ 08 августа 2011

Используя Core Animation, я бы хотел сложить UIView (т.е. это CALayer) в его центре.т.е. я бы установил опорную точку как (0.5,0.5) и сложил слой.Это изображение, которое я создал в Фотошопе, может дать эффект, который я ищу -

enter image description here

Итак, что происходит, слой складывается по центру, так как сгибпроисходит немного перспективы (позорный m34!).Первоначально вид параллелен в плоскости XY, а ось Z смотрит прямо на пользователя.Когда происходит сгиб, нижняя половина и верхняя половина одновременно перемещаются назад (с некоторой перспективой, чтобы придать эффект глубины и 3D), пока весь слой (параллельно) не окажется в плоскости XZ.Обратите внимание, что как только слой будет параллельным в плоскости XZ, пользователь больше не сможет видеть слой.Но это нормально, это эффект, который я ищу.UIView исчезает, складываясь по центру.

Как можно поступить так в iOS?Не используя 2 разных слоя (для нижнего и верхнего)?Любая помощь приветствуется ...

Обновление: Как указывает @miamk, это тот же эффект пользовательского интерфейса, который используется в «Наш выбор» App или "Flipboard" Приложение.

ОБНОВЛЕНИЕ: Я предложил щедрость за это, чтобы получить более конкретные ответы.Хотелось бы увидеть -

  1. Примеры кода.
  2. Советы от людей, которые сделали что-то подобное.
  3. Даже способ детального достижения этого (алгоритма) высоко ценится.

Ответы [ 3 ]

20 голосов
/ 09 августа 2011

A CALayer - это плоскость, которую нельзя сложить.Если вы не напишите для него фильтр основного изображения, например, эффект скручивания страницы, но если вам нужен частный API, а не вариант.

Вам необходимо разделить представление на два представления и сымитировать сгиб путем преобразованиядва CALayer s одновременно.

По умолчанию преобразование слоев не имеет перспективы, поэтому вы также должны настроить это: 

 transform.m34 = 1.0 / -2000;

OK Давайте еще яснее: Разделитьвид в два и сложите их:

Ваш вид иерархии в соответствии с изображением, которое вы разместили, выглядит примерно так: 

+ UIView      - Root view
    + UIImageView - The persons face
    + UILabel     - The label with title
    + UILabel     - The label with company name
    + UILabel     - The label with a short description.
    + UILabel     - The label with e-mail
    + UILabel     - The label with web address
    + UILabel     - The label with phone number

Итак, добавьте два новых представления в эту иерархию представлений дляцель складывания, вот так: 

+ UIView    - Root view
    + UIView      - Top half of the card
        + UIImageView - The persons face
        + UILabel     - The label with title
        + UILabel     - The label with company name
        + UILabel     - The label with a short description.
    + UIView      - Bottom half of the view
        + UILabel     - The label with e-mail
        + UILabel     - The label with web address
        + UILabel     - The label with phone number

Не слишком сложно.Теперь анимируйте только два представления, используемые для группировки верхней и нижней половины.

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

 topView.layer.anchorPoint = CGPointMake(0.5f, 1.0f);
 bottomView.layer.anchorPoint = CGPointMake(0.5f, 0.0f);
11 голосов
/ 17 августа 2011

А как насчет этого типа рабочего процесса:

Получить изображение из вида 

UIGraphicsBeginImageContext(self.bounds.size);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Затем создайте 2 изображения (верхний и нижний прямоугольник), используя 

CGImageCreateWithImageInRect( CGImageRef, CGRect);

Это оставляет вам активы, которые вам нужны, чтобы делать то, что вы хотите. Динамически создаваемые изображения сверху и снизу, которые можно анимировать.

5 голосов
/ 08 августа 2011

Я провел небольшое исследование и наткнулся на этот удивительный проект на Github: AFKPageFlipper . Это довольно недавно, вы знали об этом? По сути, это анимация Flipboard, выполненная полностью с простой и понятной базовой анимацией.

Взгляните на него, его код на удивление легко понять, и он может просто дать вам некоторое представление о том, как реализовать то, что вам нужно.

...