Блог

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

Знаете ли вы, есть ли способ избавиться от этого эффекта затемнения, чтобы сохранить первоначальный цвет карточек на протяжении всей анимации?

Для получения дополнительной информации, пожалуйста, найдите ниже простой контроллер просмотра, воспроизводящий мою проблему.

 import UIKit

class ViewController: UIViewController {

    private lazy var cardView: UIView = {
        let backgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
        backgroundView.backgroundColor = .white
        return backgroundView
    }()
    
    private lazy var flipButton: UIButton = {
        let flipButton = UIButton(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
        flipButton.setTitle("Flip", for: .normal)
        flipButton.setTitleColor(.red, for: .normal)
        flipButton.addTarget(self, action: #selector(flipCard), for: .touchUpInside)
        return flipButton
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .lightGray
        
        view.addSubview(cardView)
        cardView.addSubview(flipButton)
        
        cardView.center = view.center
    }
    
    @objc
    func flipCard() {
        UIView.transition(with: cardView, duration: 10, options: .transitionFlipFromRight, animations: nil, completion: nil)
    }
}
 

вы можете использовать

     UIView.animateKeyframes(withDuration: 6, delay: 0, options: []) {
                UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5) {
                    self.cardView.transform3D = CATransform3DRotate(self.cardView.layer.transform, CGFloat.pi, 0, 1, 0)
                }
                UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 1) {
                    self.cardView.transform3D = CATransform3DRotate(self.cardView.layer.transform, CGFloat.pi, 0, 1, 0)
                }
            }
 

вместо

 UIView.transition(with: cardView, duration: 10, options: .transitionFlipFromRight, animations: nil, completion: nil)
 

Вы можете пройти через UIView.animate() также в Swift 5,

 UIView.animate(withDuration: duration/2, delay: 0, options: .curveLinear) {
    targetView.transform = CGAffineTransform.identity.rotated(by: .pi )
} completion: { (_) in
    UIView.animate(withDuration: duration/2, delay: 0, options: .curveLinear) {
         targetView.transform = CGAffineTransform.identity.rotated(by: .pi * 2)
    } 
}