iOS - 卡片翻轉動畫

我有兩個UIImageViews。一個是'前線'，另一個是'後退'。我試圖實現它，所以當你點擊'返回'它將觸發動畫並翻轉卡。iOS - 卡片翻轉動畫

動畫效果很好。但它動畫整個頁面，我不想要。我只想要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 
    } 
}

來源

2016-09-15 Scott B

你是什麼意思動畫整個頁面？你能提供一個截圖嗎？ – wint

而不是隻是UIImageView翻轉，視圖控制器翻轉而不是 –

你的問題是你的UIImageView直接在「整頁」視圖。

transitionFromView刪除fromView從它的父，並增加了toView與給定的動畫上海華。因此，它激發了超級觀點。

你應該包含一個UIView作爲一個容器的服務器，並有兩個imageViews作爲子視圖。在容器視圖中添加輕擊手勢。另外，你不應該對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 
     } 

    }

來源

2016-09-15 20:47:15

該解決方案是翻轉「卡」，使用兩個UIImageView（就像你正在使用...），我使用它UICollectionView裏面，那是當然的不neccessary。

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的獲取圖像。

請注意，該模型卡必須是一個類，而不是一個值類型

來源

2016-09-15 20:11:36 Sajjon

我的整個UIView旋轉，而不是UIImageview :( –

@光線國王你傳遞UIImageViews到'transitionFromView：toView：持續時間'？ – Sajjon

是的，但我想它出錯了，它是錯誤的子視圖結構 –

你需要有一個容器視圖。將answerImageViewer和backAnswerImageViewer合併成一個單一的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)

來源

2016-09-15 20:20:16 wint

所有這些問題的答案似乎很難，而它是那麼容易（至少它爲我的作品...）。

想象一下，您有一個按鈕將「卡」保存爲變量，並且您想將其圖像更改爲名爲「1」的新圖像。所有你需要做的是：

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

來源

2017-09-21 00:44:22

iOS - 卡片翻轉動畫

回答

相關問題