ios - 如何将自定义 View 动画化为自定义 View

我正在构建类似抽认卡的应用，并且正在使用库KolodaView:https://github.com/Yalantis/Koloda

我有此扩展程序，它返回UIView作为抽认卡的前面:

extension StudyViewController: KolodaViewDataSource {

func kolodaNumberOfCards(koloda:KolodaView) -> UInt {
    return UInt(memories.count)
}

func koloda(koloda: KolodaView, viewForCardAtIndex index: UInt) -> UIView {
    return UIImageView(image: memories[Int(index)].frontImage)
}

func koloda(koloda: KolodaView, viewForCardOverlayAtIndex index: UInt) -> OverlayView? {

    return NSBundle.mainBundle().loadNibNamed("OverlayView",owner: self, options: nil)[0] as? OverlayView
}
}

我希望能够通过点击将“从”视图转换为“后”视图:

func koloda(koloda: KolodaView, didSelectCardAtIndex index: UInt) {

    let frontView: UIView = koloda as KolodaView
    let backView: UIView = UIImageView(image: memories[Int(index)].backImage)

    if showingFront == true {
        UIView.transitionFromView(frontView, toView: backView, duration: 1, options: UIViewAnimationOptions.TransitionCrossDissolve, completion: nil)
    } else {
        UIView.transitionFromView(backView, toView: frontView, duration: 1, options: UIViewAnimationOptions.TransitionCrossDissolve, completion: nil)
        showingFront = false
    }
}

转换成功，但完成后，抽认卡将从KolodaView变为巨型UIView
如何将KolodaView转换为花药KolodaView？

最佳答案

我还没有使用KolodaView，所以我的答案对于手头的问题更为通用。

两种方法

您目前使用的方法的变体(怪诞的方式)

由于该库未公开对显示的imageView的引用，因此您首先需要维护您的imageView内部集以供以后使用。

private var myImageViews: [Int: UIImageView] = [:]
func koloda(koloda: KolodaView, viewForCardAtIndex index: UInt) -> UIView {
    let imageView = UIImageView(image: memories[Int(index)].frontImage)
    myImageViews[Int(index)] = imageView
    return imageView
}

使用当前方法对视图进行动画处理，并使用完成模块更新原始图像的最终状态。

UIView.transitionFromView(frontView,
                          toView: backView,
                          duration: duration,
                          options: [.TransitionCrossDissolve, .ShowHideTransitionViews],
                          completion: { [weak self] (finished: Bool) in
        let imageView = myImageViews[Int(index)]
        imageView.image = memories[Int(index)].frontImage
        frontView.hidden = false
        backView.hidden = true
        backView.removeFromSuperview()
})

b。在数据源方法中返回自定义视图，并在didSelectCardAtIndex 中切换其内部状态

private var myCustomViews: [Int: MyCustomView] = [:]
func koloda(koloda: KolodaView, viewForCardAtIndex index: UInt) -> UIView {
    let customView = MyCustomView(frontImage: memories[Int(index)].frontImage,
                                  backImage: memories[Int(index)].backImage)
    myCustomViews[Int(index)] = customView
    return customView
}

func koloda(koloda: KolodaView, didSelectCardAtIndex index: UInt) {
    let customView = myCustomViews[Int(index)]
    customView.toggleFrontBackState()
}

在这种情况下，toggleFrontBackState的实现将包含您初始实现的代码(customView.showingFront，transitionFromView)。让我知道是否需要进一步说明。

编辑

class MyCustomView: UIView {
    private(set) lazy var frontView: UIImageView = self.makeFrontView()
    private(set) lazy var backView: UIImageView = self.makeBackView()
    var showingFront: Bool = false

    init(frontImage: UIImage?, backImage: UIImage?){
        super.init(frame: CGRectZero)
        frontView.image = frontImage
        backView.image = backImage
        backView.hidden = true
    }

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

    func toggleFrontBackState() {
        if showingFront {
            UIView.transitionFromView(frontView, toView: backView, duration: 1,
                                      options: [.TransitionCrossDissolve, .ShowHideTransitionViews], completion: nil)
        } else {
            UIView.transitionFromView(backView, toView: frontView, duration: 1,
                                      options: [.TransitionCrossDissolve, .ShowHideTransitionViews] , completion: nil)
        }
        showingFront = !showingFront
    }

    func makeFrontView() -> UIImageView {
        return UIImageView()
    }

    func makeBackView() -> UIImageView {
        return UIImageView()
    }
}