iOS - 卡片翻转动画

时间:2016-09-15 19:40:47

标签: ios swift animation uiimageview

我有两个UIImageViews。一个是' Front'另一个是' Back'。 我试图实施它,以便当您点击“返回”时。它会触发动画并翻转卡片。

动画效果很好。但它动画整页,我不想要。我只想让UIImageView翻转。我无法看清我做错了什么。可能是显而易见的事情。

@IBOutlet weak var answerImageViewer: UIImageView?
@IBOutlet weak var backAnswerImageViewer: UIImageView?

override func viewDidLoad() {
    super.viewDidLoad()
    startNewGame()
    retrieveNewQuestion()
    setupBannerMessage()
    customPlayButtons()

    let tapGesture = UITapGestureRecognizer(target: self, action: Selector("tap"))
    tapGesture.numberOfTapsRequired = 1
    backAnswerImageViewer?.addGestureRecognizer(tapGesture)
    backAnswerImageViewer?.userInteractionEnabled = true
}

var showingBack = true

func tap (){
    if showingBack{
       UIView.transitionFromView(self.backAnswerImageViewer!, toView: self.answerImageViewer!, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight, completion: nil)

        backAnswerImageViewer?.hidden = true
        answerImageViewer?.hidden = false

        showingBack = false
    }
    else {
        showingBack = true

        UIView.transitionFromView(self.answerImageViewer!, toView: self.backAnswerImageViewer!, duration: 1, options: UIViewAnimationOptions.TransitionFlipFromRight, completion: nil)

        backAnswerImageViewer?.hidden = false
        answerImageViewer?.hidden = true
    }
}

9 个答案:

答案 0 :(得分:12)

您的问题是您的UIImageViews直接位于"整页"图。

transitionFromView从其超级视图中删除 fromView ,并使用给定的动画在超级视图上添加 toView 。因此,它激活了超级视图。

您应该包含一个UIView,它将服务器作为容器并将两个imageView作为子视图。在容器视图上添加您的点按手势。此外,您不应该对imageViews有弱引用,因为一旦完成动画一次,您对后面imageView的引用就会消失。将它们添加到代码而不是故事板中可能更好。无需隐藏imageViews。

以下是一些示例代码:

class MyViewController: UIViewController {

        @IBOutlet weak var containerView: UIView!

        private let backImageView: UIImageView! = UIImageView(image: UIImage(named: "back"))
        private let frontImageView: UIImageView! = UIImageView(image: UIImage(named: "front"))

        private var showingBack = false

        override func viewDidLoad() {
            super.viewDidLoad()

            frontImageView.contentMode = .ScaleAspectFit
            backImageView.contentMode = .ScaleAspectFit

            containerView.addSubview(frontImageView)
            frontImageView.translatesAutoresizingMaskIntoConstraints = false
            frontImageView.spanSuperview()

            let singleTap = UITapGestureRecognizer(target: self, action: #selector(flip))
            singleTap.numberOfTapsRequired = 1
            containerView.addGestureRecognizer(singleTap)
        }

        func flip() {   
            let toView = showingBack ? frontImageView : backImageView
            let fromView = showingBack ? backImageView : frontImageView
            UIView.transitionFromView(fromView, toView: toView, duration: 1, options: .TransitionFlipFromRight, completion: nil)
            toView.translatesAutoresizingMaskIntoConstraints = false
            toView.spanSuperview()
            showingBack = !showingBack
        }   

    }

答案 1 :(得分:11)

如果您有button将“卡片”保存为变量,并且您想将其图像更改为名为“1”的新图像。你所要做的就是:

let image = UIImage(named: "1")
card.setImage(image, for: .normal)
UIView.transition(with: card, duration: 2, options: .transitionFlipFromRight, animations: nil, completion: nil)

答案 2 :(得分:5)

此解决方案是使用两个UIImageView来翻转“a card”(就像你正在使用...),我在UICollectionView中使用它,那是当然不是必要的。

class CardCVCell: UICollectionViewCell {
    @IBOutlet weak var cardFrontImageView: UIImageView!
    @IBOutlet weak var cardBackImageView: UIImageView!

    private var flipped: Bool = false {
        didSet {
            cardFrontImageView.visible = flipped
            cardBackImageView.hidden = flipped
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        cardBackImageView.backgroundColor = UIColor.brownColor()
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        cardFrontImageView.image = nil
        flipped = false
    }

    func flipCard(cardModel: Card) {
        let flipped = cardModel.flipped
        let fromView = flipped ? cardFrontImageView : cardBackImageView
        let toView = flipped ? cardBackImageView : cardFrontImageView
        let flipDirection: UIViewAnimationOptions = flipped ? .TransitionFlipFromRight : .TransitionFlipFromLeft
        let options: UIViewAnimationOptions = [flipDirection, .ShowHideTransitionViews]
        UIView.transitionFromView(fromView, toView: toView, duration: 0.6, options: options) {
            finished in
            cardModel.flipped = !flipped
        }
    }
}

代码取自我的open source project introducing people to Swift development, called SwiftIntro 记忆游戏,从Instagram获取图片。

请注意,型号卡必须是类,而不是值类型

答案 3 :(得分:3)

您需要有一个容器视图。将answerImageViewerbackAnswerImageViewer放入一个UIView。这是我的示例代码。

    let frontView = UIView()
    let backView = UIView()

    let frame = CGRect(x: 40, y: 100, width: 300, height: 400)
    frontView.backgroundColor = .red
    backView.backgroundColor = .blue

    frontView.frame = CGRect(x: 0, y: 0, width: 300, height: 400)
    backView.frame = CGRect(x: 0, y: 0, width: 300, height: 400)

    let containerView = UIView()
    containerView.frame = frame

    containerView.addSubview(backView)
    containerView.addSubview(frontView)

    view.addSubview(containerView)

答案 4 :(得分:1)

根据Pankaj的回答,

在iOS 12中,不推荐使用UIView.transition方法。

在iOS 12设备中,尽管我已将代码从Swift 4.0更新到了Swift 4.2,但我遇到了翻卡问题。

您可能会因为以下原因而误解:以某种方式,Xcode不建议更改此设置。当我尝试重写UIView.transition方法时,我意识到了这一点(感谢Intellisense)。

之前:

UIView.transition(with: cardView, duration: 1.0, options: transitionOptions, animations: {
        self.cardView.isHidden = true
        self.downButtonForBackCard.alpha = 1
    })

    UIView.transition(with: backCardView, duration: 1.0, options: transitionOptions, animations: {
        self.backCardView.isHidden = false
    })

之后:

 UIView.transition(with: cardView, duration: 1.0, options: transitionOptions, animations: {
        self.downButtonForBackCard.alpha = 1

    }) { (finish) in
        self.cardView.isHidden = true
    }

    UIView.transition(with: backCardView, duration: 1.0, options: transitionOptions, animations: {
        self.backCardView.isHidden = false
    }) { (finish) in

    }

PS:这两个代码都是我的情况。不要复制粘贴,仅举个例子。

我希望我可以挽救别人的生命。

答案 5 :(得分:1)

对于Swift 4

最好使用UIButton而不是UIImageView!

var isBackImageOpen = false

if isBackImageOpen {
isBackImageOpen = false
let image = UIImage(named: "backImage")
myBtn.setImage(image, for: .normal)
UIView.transition(with: myBtn, duration: 0.3, options: .transitionFlipFromLeft, animations: nil, completion: nil)

} else {

isBackImageOpen = true
let image = UIImage(named: "frontImage")
myBtn.setImage(image, for: .normal)
UIView.transition(with: myBtn, duration: 0.3, options: .transitionFlipFromRight, animations: nil, completion: nil)
}

希望这个答案有帮助:)!

答案 6 :(得分:0)

您可以使用此代码

UIView.transition(with:self.yourViewName,duration:0.5,options:[。transnsitionFlipFromRight],动画:nil,completion:nil)

答案 7 :(得分:0)

尝试此扩展程序可能很容易使用

extension UIView{

    func showFlip(){
            if self.isHidden{
                UIView.transition(with: self, duration: 1, options: [.transitionFlipFromRight,.allowUserInteraction], animations: nil, completion: nil)
                self.isHidden = false
            }

        }
    func hideFlip(){
        if !self.isHidden{
            UIView.transition(with: self, duration: 1, options: [.transitionFlipFromLeft,.allowUserInteraction], animations: nil,  completion: nil)
            self.isHidden = true
        }
    }
}
  

在点击操作中使用此功能

func Flip(){
        if second_view.isHidden == true{
            second_view.showFlip()
            first_view.hideFlip()
        }else if first_view.isHidden == true{
            second_view.hideFlip()
            first_view.showFlip()
        }
}

答案 8 :(得分:-1)

上一个答案很好,但是添加了“ showHideTransitionViews”作为选项,它使您不必手动隐藏并显示动画视图。请记住,这两个视图必须位于另一个视图内。此过渡将旋转超级视图。

  UIView.transition(from: view1, to: view2, duration: 0.5, options: [.transitionFlipFromLeft, .showHideTransitionViews], completion: nil)