ios - 如何在自定义 UIButton 中实现 .isHighlighted 动画？

Question

序言(在实际问题的代码之后向下翻页):

我有一个自定义的 UIButton 类，其中我用以下行为替换了普通的 UIButton isHighlighted 动画行为:

当用户的手指实际放在按钮上(即突出显示按钮)时，按钮周围将出现描边轮廓(方形边框)。当他们不再触摸按钮时，轮廓就会消失。

此外，我还用以下内容替换了正常的 isSelected 行为(背景变为蓝色):

绘制与 isHighlighted 所使用的轮廓相同的轮廓，只是它稍微粗一些，并且只要 isSelected = true 就始终存在，并且当isSelected = false。

这可行，我就是这样做的:

import UIKit

class CustomButton: UIButton {

    // BUTTON TYPES:
    // Gorsh, enums sure would be swell here. :T
    // 1 : plus
    // 2 : minus
    // 3 : etc etc....
    @IBInspectable
    var thisButtonsType: Int = 1 { didSet { setNeedsDisplay() } }

    @IBInspectable
    var fillColor: UIColor = .black { didSet { setNeedsDisplay() } }

    @IBInspectable
    var strokeColor: UIColor = .black { didSet { setNeedsDisplay() } }

    override var isHighlighted: Bool {
        didSet {
            setNeedsDisplay()
        }
    }

    override func draw(_ rect: CGRect) {

        let unitOfMeasure = bounds.width / 5

        // draw outline in case we are selected / highlighted
        if (isSelected || isHighlighted) {

            let tempPath = BezierPathFactory.outline(totalWidth: bounds.width)
            if (isSelected) {tempPath.lineWidth = 4.0}
            strokeColor.setStroke()
            tempPath.stroke()

        }

        // initialize path object
        var path = UIBezierPath()

        // get the path corresponding to our button type
        switch thisButtonsType {

        case 1:
            path = BezierPathFactory.plus(gridSpacing: unitOfMeasure)
        case 2:
            path = BezierPathFactory.minus(gridSpacing: unitOfMeasure)

        default: print("hewo!")

        }

        fillColor.setFill()

        path.fill()


    }

}

再一次，该代码可以工作，但是......

我真正想要的是，如果突出显示的边框轮廓在触摸完成后会逐渐消失。

注意:如果您想知道为什么我会这样做...我计划实现许多不同的按钮类型...所有按钮上都“印有”不同的图标...但我想要它们全部遵循这些基本行为。其中只有几个是被选中的“切换”按钮，因此突出显示淡入淡出是有用的。

我已经知道如何制作动画......但这只是我在思考如何在这种情况下做到这一点。

我希望能够获得 UIButton 源代码。

有没有一种方法可以将淡入淡出动画相对简单地添加到我的上述代码中，而无需完全改变设计模式？我是否必须开始使用核心显卡的其他一些功能，例如图层？

谢谢!

Answer 1

您可以执行以下操作:

1. 创建 UIButton 的子类，用于添加和管理 CAShapeLayer 类的子图层，以显示按钮的轮廓。
2. 将轮廓绘制到形状图层中。
3. 确保图层随 View 调整大小:覆盖 View 的 layoutSubviews，以便更新图层的框架并更新轮廓的路径。
4. 您应该观察或覆盖 UIControl(它是 UIButton 的祖先)的 state 属性以注意到状态更改。
5. 使用属性动画 (CABasicAnimation) 控制形状图层的不透明度，使轮廓淡入淡出。