Swift - 彩色填充动画

Question

我对ios动画相对较新,我相信我为UIView制作动画的方法有些不对劲.

我将从UI截图开始,更准确地描绘我的问题:

有一个tableView单元格,有两个标签和彩色圆圈

每当我向单元格引入新的价值时,我想为这个最左边的灯泡制作动画,让它看起来像是充满了红色.

这是BadgeView的实现,它基本上是前面提到的最左边的圆圈

class BadgeView: UIView {

var coeff:CGFloat = 0.5

override func drawRect(rect: CGRect) {
    let topRect:CGRect = CGRectMake(0, 0, rect.size.width, rect.size.height*(1.0 - self.coeff))
    UIColor(red: 249.0/255.0, green: 163.0/255.0, blue: 123.0/255.0, alpha: 1.0).setFill()
    UIRectFill(topRect)

    let bottomRect:CGRect = CGRectMake(0, rect.size.height*(1-coeff), rect.size.width, rect.size.height*coeff)
    UIColor(red: 252.0/255.0, green: 95.0/255.0, blue: 95.0/255.0, alpha: 1.0).setFill()
    UIRectFill(bottomRect)
            self.layer.cornerRadius = self.frame.height/2.0
    self.layer.masksToBounds = true
   }
}

这是我实现不均匀填充的方式 - 我引入了我在viewController中修改的系数.

在我的cellForRowAtIndexPath方法中,我尝试使用带回调的自定义按钮为此形状设置动画

let btn:MGSwipeButton = MGSwipeButton(title: "", icon: img, backgroundColor: nil, insets: ins, callback: {
        (sender: MGSwipeTableCell!) -> Bool in
        print("Convenience callback for swipe buttons!")
        UIView.animateWithDuration(4.0, animations:{ () -> Void in
            cell.pageBadgeView.coeff = 1.0
            let frame:CGRect = cell.pageBadgeView.frame
            cell.pageBadgeView.drawRect(frame)
        })
        return true
        }) 

但它只会打印到控制台

:CGContextSetFillColorWithColor:无效的上下文0x0.如果要查看回溯,请设置CG_CONTEXT_SHOW_BACKTRACE环境变量.

虽然我很想知道正确的答案和方法,但是出于教育目的,知道这段代码不起作用会很棒.提前致谢

Answer 1

问题的错误部分似乎是代码的这一部分:

cell.pageBadgeView.drawRect(frame)

来自UIView drawRect 的Apple文档:

首次显示视图或发生使视图的可见部分无效的事件时,将调用此方法.你永远不应该直接调用这个方法.要使视图的一部分无效,从而导致重绘该部分,请调用setNeedsDisplay或setNeedsDisplayInRect:方法.

因此,如果您将代码更改为:

cell.pageBadgeView.setNeedsDisplay() 

您将摆脱错误并看到badgeView 正确填充.但是这不会为它设置动画,因为默认情况下drawRect不可动画.

解决问题的最简单方法是让BadgeView拥有填充颜色的内部视图.我将重构BadgeView如下:

class BadgeView: UIView {

    private let fillView = UIView(frame: CGRectZero)

    private var coeff:CGFloat = 0.5 {
        didSet {
            // Make sure the fillView frame is updated everytime the coeff changes
            updateFillViewFrame()
        }
    }

    // Only needed if view isn't created in xib or storyboard
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    // Only needed if view isn't created in xib or storyboard
    override init(frame: CGRect) {
        super.init(frame: frame)

        setupView()
    }

    override func awakeFromNib() {
        setupView()
    }

    private func setupView() {
        // Setup the layer
        layer.cornerRadius = bounds.height/2.0
        layer.masksToBounds = true

        // Setup the unfilled backgroundColor
        backgroundColor = UIColor(red: 249.0/255.0, green: 163.0/255.0, blue: 123.0/255.0, alpha: 1.0)

        // Setup filledView backgroundColor and add it as a subview
        fillView.backgroundColor = UIColor(red: 252.0/255.0, green: 95.0/255.0, blue: 95.0/255.0, alpha: 1.0)
        addSubview(fillView)

        // Update fillView frame in case coeff already has a value
        updateFillViewFrame()
    }

    private func updateFillViewFrame() {
        fillView.frame = CGRectMake(0, bounds.height*(1-coeff), bounds.width, bounds.height*coeff)
    }

    // Setter function to set the coeff animated. If setting it not animated isn't necessary at all, consider removing this func and animate updateFillViewFrame() in coeff didSet
    func setCoeff(coeff: CGFloat, animated: Bool) {
        if animated {
            UIView.animateWithDuration(4.0, animations:{ () -> Void in
                self.coeff = coeff
            })
        } else {
            self.coeff = coeff
        }
    }

}

在你的按钮回调中你只需要做:

cell.pageBadgeView.setCoeff(1.0, animated: true)