今天是想做一個明星配對的概念,使用者可以一天滑5位與你有緣分的明星
會是像Tinder那般簡單的操作
上網查閱了資料,發現有個套件可以使用
https://github.com/nickypatson/TinderSwipeView
這是個相對小型的套件,本著研究的精神,希望借鑑這個作者的動畫之光,來完成我的專案
因為有些樣式不是跟我想像中的畫面相同,所以我會小改這個程式(也許是大改)
class SlideViewController: UIViewController {
let inset : CGFloat = 10
var bufferSize: Int = 3 {
didSet {
bufferSize = bufferSize > 3 ? 3 : bufferSize
}
}
public var sepeatorDistance : CGFloat = 8
var index = 0
fileprivate var allCards = [String]()
fileprivate var loadedCards = [TinderCard]()
fileprivate var currentCard : TinderCard?
fileprivate let contentView: ContentView? = nil
public typealias ContentView = (_ index: Int, _ frame: CGRect, _ element:String) -> (UIView)
var data: [String] = [
"https://m.media-amazon.com/images/M/MV5BMjUxMjI4MDEwM15BMl5BanBnXkFtZTgwNzMyODM0MTE@._V1_.jpg",
"https://m.media-amazon.com/images/M/MV5BOTE0NzM0Y2EtN2NiNC00NzkwLWExZjYtYmYxNTY5ZDg4NzhhXkEyXkFqcGdeQXVyNDg4MjkzNDk@._V1_.jpg",
"https://m.media-amazon.com/images/M/MV5BMTg3Njc4ODQ0M15BMl5BanBnXkFtZTgwNTczMjk5NTE@._V1_.jpg"
]
override func viewDidLoad() {
super.viewDidLoad()
showTinderCards(with: data)
}
public func showTinderCards(with elements: [String] ,isDummyShow: Bool = true) {
if elements.isEmpty {
return
}
allCards.append(contentsOf: elements)
for (i,element) in elements.enumerated() {
if loadedCards.count < bufferSize {
let cardView = self.createTinderCard(index: i, element: element)
loadedCards.append(cardView)
}
}
animateCardAfterSwiping()
// 這個先不使用,還沒研究成
// if isDummyShow{
// perform(#selector(loadAnimation), with: nil, afterDelay: 1.0)
// }
}
// 建立一個TinderCard
fileprivate func createTinderCard(index:Int,element: String) -> TinderCard {
let cardView = TinderCard.initXib()
cardView.backgroundColor = .gray
if loadedCards.isEmpty {
self.view.addSubview(cardView)
} else {
self.view.insertSubview(cardView, belowSubview: loadedCards.last!)
}
cardView.snp.makeConstraints { make in
make.top.equalToSuperview().offset(80)
make.left.equalToSuperview().offset(10)
make.right.equalToSuperview().offset(-10)
make.bottom.equalToSuperview().offset(-150)
}
cardView.delegate = self
let url = URL(string: element)!
cardView.addContentView(element: element)
return cardView
}
fileprivate func animateCardAfterSwiping() {
if loadedCards.isEmpty{
// 作者是使用三層結構,但我希望使用兩層,所以這個還會再修正
// self.delegate?.endOfCardsReached()
return
}
for (i,card) in loadedCards.enumerated() {
UIView.animate(withDuration: 0.5, animations: {
card.isUserInteractionEnabled = i == 0 ? true : false
var frame = card.frame
frame.origin.y = self.inset + (CGFloat(i) * self.sepeatorDistance)
card.frame = frame
})
}
}
fileprivate func removeCardAndAddNewCard(){
index += 1
let card = loadedCards.first!
card.index = index
Timer.scheduledTimer(timeInterval: 1.01, target: self, selector: #selector(enableUndoButton), userInfo: card, repeats: false)
loadedCards.remove(at: 0)
if (index + loadedCards.count) < allCards.count {
let tinderCard = createTinderCard(index: index + loadedCards.count, element: allCards[index + loadedCards.count])
self.view.insertSubview(tinderCard, belowSubview: loadedCards.last!)
loadedCards.append(tinderCard)
}
animateCardAfterSwiping()
}
// 目前還沒使用到
@objc private func enableUndoButton(timer: Timer){
let card = timer.userInfo as! TinderCard
if card.index == index{
currentCard = card
}
}
成果展示:
有動畫的就是看得特別不懂,目前還不算完成,就是一個雛形出來了