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

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

enter image description here

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

Как это сделать в iOS? Без использования 2 разных слоев (для нижней и верхней)? Любая помощь очень ценится...

Обновление: Как указывает @miamk, это тот же эффект пользовательского интерфейса, что и в приложении "Наш выбор" или "Flipboard" ., Я убираю свои мозги в течение последних 8 часов на этом, до сих пор бесплодных. ЛЮБАЯ идея ценится. Спасибо...

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

  • Примеры кода.
  • Посоветуйте людям, которые сделали что-то подобное.
  • Очень ценится даже способ достижения этого детально (algo).

Ответ 1

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

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

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

 transform.m34 = 1.0 / -2000;

ОК. Пусть еще яснее: разделите представление на два и сложите их:

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

+ 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);

Ответ 2

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

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

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

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

CGImageCreateWithImageInRect( CGImageRef, CGRect);

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

Ответ 3

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

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