objective-c - 如何翻转单个 UIView？

Question

我正在尝试制作一款类似于棋盘游戏内存的基于图 block 的游戏。我希望 UiView 的图 block 在按下时翻转并显示图片。是否有可能做到这一点？我一直在寻找，但似乎都显示了 View 之间转换的方法。

Answer 1

您可以使用此类在点击时执行类似翻转的动画。

class FlippingView : UIView
{
    var frontView : UIImageView!
    var backView : UIImageView!
    var isAnimating : Bool = false

    override init(frame: CGRect) {
        super.init(frame: frame)
        frontView = UIImageView(frame: CGRectMake(0, 0, frame.size.width, frame.size.height))
        backView = UIImageView(frame: frontView.frame)
        self.addSubview(frontView)
        self.addSubview(backView)
        self.backView.hidden = true

        let tapRecognizer = UITapGestureRecognizer(target: self, action: "flip")
        self.addGestureRecognizer(tapRecognizer)
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func flip()
    {
        if isAnimating {
            return
        }
        isAnimating = true
        if (backView.hidden)
        {
            frontView.layer.transform = CATransform3DMakeRotation(0, 0, 0, 0)
            self.backView.layer.transform = CATransform3DMakeRotation(3.14/2, 0, 1, 0)
            self.backView.hidden = false
            UIView.animateKeyframesWithDuration(2, delay: 0, options: nil, animations: {

                UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.5, animations: {
                     self.frontView.layer.transform = CATransform3DMakeRotation(3.14/2, 0, 1, 0)
                })

                UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.5, animations: {
                    self.backView.layer.transform = CATransform3DMakeRotation(3.14, 0, 1, 0)
                })
                }, completion: { (finished) -> Void in
                    self.isAnimating = false
                    self.frontView.hidden = true
            })
        }
        else
        {
            backView.layer.transform = CATransform3DMakeRotation(3.14, 0, 1, 0)
            self.frontView.layer.transform = CATransform3DMakeRotation(3.14/2, 0, 1, 0)
            self.frontView.hidden = false
            UIView.animateKeyframesWithDuration(2, delay: 0, options: nil, animations: {

                UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.5, animations: {
                    self.backView.layer.transform = CATransform3DMakeRotation(-3.14/2, 0, 1, 0)
                })

                UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.5, animations: {
                    self.frontView.layer.transform = CATransform3DMakeRotation(0, 0, 1, 0)
                })
                }, completion: { (finished) -> Void in
                    self.isAnimating = false
                    self.backView.hidden = true
            })
        }
    }
}

你可以像这样使用它

override func viewDidLoad() {

    flippingView = FlippingView(frame: CGRectMake(100, 100, 100, 100))
    flippingView.frontView.image = UIImage(named: "1.png")
    flippingView.backView.image = UIImage(named: "2.png")
    self.view.addSubview(flippingView)
}