我正在屏幕上创建一个翻转动画。在视图加载时,页面显示卡的背面很好,16张图片都显示卡的背面。点击按钮翻转后,我需要CollectionViewCell显示不同的图片(card_1.jpg,card_2.jpg等),但只有第一个单元格显示图片。
class CardsCollectionViewCell: UICollectionViewCell {
var deck: [Int] = []
@IBOutlet weak var numberLabel: UILabel!
let cardBackTag: Int = 0
let cardFrontTag: Int = 1
var cardViews: (frontView: UIImageView, backView: UIImageView)?
var imgViewFront: UIImageView!
var imgViewBack: UIImageView!
override func awakeFromNib() {
self.imgViewFront = self.createCardViewWithImage(imageName: "card_1", tag: self.cardFrontTag)
self.imgViewBack = self.createCardViewWithImage(imageName: "back-card", tag: self.cardBackTag)
self.cardViews = (frontView: self.imgViewFront, backView: self.imgViewBack)
self.contentView.addSubview(self.imgViewFront)
}
private func createCardViewWithImage(imageName: String, tag: Int) -> UIImageView {
let newCardImageView = UIImageView(frame: self.frame)
newCardImageView.image = UIImage(named: imageName)
newCardImageView.tag = tag
newCardImageView.clipsToBounds = true
newCardImageView.contentMode = .scaleAspectFill
return newCardImageView
}
func flipCardAnimation(indexPath: Int) {
if (self.imgViewBack.superview != nil) {
// front card
self.numberLabel.textColor = UIColor.white
self.numberLabel.backgroundColor = UIColor.orange
self.numberLabel.clipsToBounds = true
self.numberLabel.text = "\(self.deck[indexPath])"
self.numberLabel.isHidden = false
self.cardViews!.frontView.removeFromSuperview()
self.imgViewFront = self.createCardViewWithImage(imageName: "card_\(self.deck[indexPath])", tag: self.cardFrontTag)
self.cardViews = (frontView: self.imgViewFront, backView: self.imgViewBack)
} else {
// back card
self.deck = [Int](repeating: 0, count: 16)
self.numberLabel.isHidden = true
self.cardViews = (frontView: self.imgViewBack, backView: self.imgViewFront)
}
let transitionOptions = UIView.AnimationOptions.transitionFlipFromLeft
UIView.transition(with: self.contentView, duration: 0.5, options: transitionOptions, animations: {
self.cardViews!.backView.removeFromSuperview()
self.contentView.addSubview(self.cardViews!.frontView)
}, completion: {finished in
})
}
}
我按照这篇文章的例子来创建动画。https:/medium.com@lawreycreating-a-flip-card-animation-with-uicollectionviewcell-swift-3-0-98bc96317fee。
在我上面的代码中,我有一个标签,它在indexPath里面的 甲板 谁能告诉我如何动态显示所有图像? 或者我做错了什么?
所以昨天花了一整天的时间,我想是时候改变我的方法了。我决定在故事板中创建两张图片来代替。这是我最后的工作代码。这个加载所有16张卡片与卡片背面的照片,当点击按钮时,翻转动画翻转到随机16张卡片。
import UIKit
import Foundation
import ProgressHUD
class CardsCollectionViewCell: UICollectionViewCell {
var deck: [Int] = []
@IBOutlet weak var numberLabel: UILabel!
@IBOutlet weak var imgViewBack: UIImageView!
@IBOutlet weak var imgViewFront: UIImageView!
var cardBack: Bool = true
func flipCardAnimation(indexPath: Int) {
numberLabel.isHidden = true
let transitionOptions = UIView.AnimationOptions.transitionFlipFromLeft
UIView.transition(with: self.contentView, duration: 0.5, options: transitionOptions, animations: {
if self.cardBack == true {
self.deck = [Int](repeating: 0, count: NUMBER_OF_CARDS_IN_DECK)
self.imgViewBack.isHidden = false
self.imgViewFront.isHidden = true
} else {
self.numberLabel.isHidden = false
self.imgViewBack.isHidden = true
self.imgViewFront.isHidden = false
}
if (self.cardBack != true) {
// front card
self.numberLabel.text = "\(self.deck[indexPath])"
self.numberLabel.textColor = UIColor.white
self.numberLabel.backgroundColor = .red
self.numberLabel.layer.cornerRadius =
self.numberLabel.layer.frame.width/2
self.numberLabel.layer.masksToBounds = true
self.imgViewFront.image = UIImage(named: "card_\(self.deck[indexPath])")
self.imgViewFront.tag = self.deck[indexPath]
self.imgViewFront.contentMode = .scaleAspectFill
self.imgViewFront.clipsToBounds = true
self.imgViewFront.layer.cornerRadius = 12
} else {
// back card
print(self.deck)
self.numberLabel.text?.removeAll()
self.imgViewBack.image = UIImage(named: "back-card-1")
self.imgViewBack.tag = 1
self.imgViewBack.contentMode = .scaleAspectFill
self.imgViewBack.clipsToBounds = true
}
}, completion: {finished in
if self.cardBack == true {
self.cardBack = false
} else {
self.cardBack = true
}
})
}
}