Как перевернуть UIView вокруг оси x, одновременно переключая подпредставления

Это оказалось намного проще, чем я думал, и мне не пришлось использовать какие-либо библиотеки CoreAnimation для достижения эффекта. Спасибо @Aaron Hayman за подсказку. Я использовал transitionWithView:duration:options:animations:completion

Моя реализация внутри представления контейнера:

    [UIView transitionWithView:self 
                      duration:0.2 
                       options:UIViewAnimationOptionTransitionFlipFromBottom
                    animations: ^{
                            [self.backView removeFromSuperview];
                            [self addSubview:self.frontView];
                    }
                    completion:NULL];

Хитрость заключалась в опции UIViewAnimationOptionTransitionFlipFromBottom. Кстати, в документации Apple есть именно этот фрагмент кода. Вы также можете добавить в блок другие анимации, такие как изменение размера и перемещение.

Хорошо, это не будет полным решением, но я укажу на некоторые вещи, которые могут быть полезны. Я не гуру Core-Animation, но я сделал несколько 3D-поворотов в своей программе.

Во-первых, у представления нет «обратной стороны». Поэтому, если вы повернете что-то на M_PI (180 градусов), вы будете смотреть на этот вид как бы со спины (поэтому он перевернут/отражен).

Я не уверен, что вы имеете в виду под:

Анимирована только половина карты по оси x.

Но это может помочь рассмотреть вашу точку привязки (точку, в которой происходит вращение). Обычно он находится в центре, но часто вам нужно, чтобы он был в другом месте. Обратите внимание, что точки привязки выражаются в виде пропорции (процент/100)... поэтому значения равны 0 - 1.0f. Вам нужно установить его только один раз (если вам не нужно его изменить). Вот как вы получаете доступ к точке привязки:

layer.anchorPoint = CGPointMake(0.5f, 0.5f) //This is center

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

Если вы анимируете из одного представления в другое (и не можете использовать [UIView transitionWithView:duration:options:animations:completion:];), вам придется использовать двухэтапную анимацию. На первом этапе анимации для «карты», которая переворачивается на обратную сторону, вы повернете вид для исчезновения «вверх/вниз/что угодно» на M_PI_2 (в этот момент она «исчезнет», или не видно из-за его вращения). И на втором этапе вы поворачиваете обратную сторону изображения, чтобы оно исчезло, до 0 (что должно быть преобразованием идентичности... иначе говоря, нормальным состоянием представления). Кроме того, вам придется сделать прямо противоположное для появляющейся «карты» (на лицевой стороне). Вы можете сделать это, реализовав еще один [UIView animateWithDuration:...] в блоке завершения первого. Однако я предупреждаю вас, что сделать это может быть немного сложно. Тем более, что вы хотите, чтобы представления имели «обратную сторону», что в основном потребует анимации 4 представлений (представление для исчезновения, представление для появления, обратная сторона для исчезновения и обратная сторона). из-за видимости). Наконец, в завершающем блоке второй анимации вы можете сделать некоторую очистку (сбросить вид, который повернут, и сделать его альфа-канал равным 0.0f и т. д.).

Я знаю, что это сложно, поэтому вы можете прочитать учебник по Core-Animation.

У @Aaron есть хорошая информация, которую вы должны прочитать.

Самое простое решение — использовать CATransformLayer, что позволит вам разместить другие CALayer внутри и поддерживать их трехмерную иерархию.

Например, чтобы создать «карту», ​​у которой есть лицевая и оборотная стороны, вы можете сделать что-то вроде этого:

CATransformLayer *cardContainer = [CATransformLayer layer];
cardContainer.frame = // some frame;

CALayer *cardFront  = [CALayer layer];
cardFront.frame     = cardContainer.bounds;
cardFront.zPosition = 2;   // Higher than the zPosition of the back of the card
cardFront.contents  = (id)[UIImage imageNamed:@"cardFront"].CGImage;
[cardContainer addSublayer:cardFront];

CALayer *cardBack  = [CALayer layer];
cardBack.frame     = cardContainer.bounds;
cardBack.zPosition = 1;
cardBack.contents  = (id)[UIImage imageNamed:@"cardBack"].CGImage; // You may need to mirror this image
[cardContainer addSublayer:cardBack];

Теперь вы можете применить трансформацию к cardContainer и получить переворачивающуюся карту.

@Paul.s

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

На основе Paul.s это обновлено для Swift 3 и будет переворачивать карту по диагонали:

func createLayers(){
  transformationLayer = CATransformLayer(layer: CALayer())
  transformationLayer.frame = CGRect(x: 15, y: 100, width: view.frame.width - 30, height: view.frame.width - 30)

  let black = CALayer()
  black.zPosition = 2
  black.frame = transformationLayer.bounds
  black.backgroundColor = UIColor.black.cgColor

  transformationLayer.addSublayer(black)

  let blue = CALayer()
  blue.frame = transformationLayer.bounds
  blue.zPosition = 1
  blue.backgroundColor = UIColor.blue.cgColor

  transformationLayer.addSublayer(blue)

  let tgr = UITapGestureRecognizer(target: self, action: #selector(recTap))
  view.addGestureRecognizer(tgr)
  view.layer.addSublayer(transformationLayer)
}

Анимируйте полный 360, но поскольку слои имеют разные zPositions, будут показаны разные «стороны» слоев.

func recTap(){
    let animation = CABasicAnimation(keyPath: "transform")
    animation.delegate = self
    animation.duration = 2.0
    animation.fillMode = kCAFillModeForwards
    animation.isRemovedOnCompletion = false
    animation.toValue = NSValue(caTransform3D: CATransform3DMakeRotation(CGFloat(Float.pi), 1, -1, 0))
    transformationLayer.add(animation, forKey: "arbitrarykey")
  }