CAAnimation(六) 利用SubLayer完成线性动画

利用SubLayer完成动画

在某些动画中，我们希望可以追踪用户的操作，并且在用户完成操作后到达某个状态，例如UISwitch，具有以下特性

1. 如果你按住中间的小圆圈，小圆圈时可以变形和拖动的
2. 拖动时会动态改变背景色
3. 当松手后，总会恢复某一个状态 on/off
4. on 和 off的动画效果不一致

这时我们可以借助于SubLayer的隐式动画来完成对苹果UISwitch的模仿

class SwithButton: UIControl {

    //---------------------------------------------------------------------
    // MARK: Layer
    //---------------------------------------------------------------------
    let offLayer: CALayer = CALayer()
    let onLayer: CALayer = CALayer()
    let thumbLayer: CALayer = CALayer()
    //---------------------------------------------------------------------
    // MARK: Switch Button Attribute
    //---------------------------------------------------------------------

    public var on:Bool = false {
        didSet {
            on ? layerStateOn() : layerStateOff()
        }
    }

    //---------------------------------------------------------------------
    // MARK: Assign Attribute
    //---------------------------------------------------------------------
    var onRect: CGRect = CGRect.zero
    var offRect: CGRect = CGRect.zero
    var diameter: CGFloat = 0  // thumb size diameter
    var thumbOnX: CGFloat = 0  // thumb origin X when on state
    var thumbOffX: CGFloat = 0 // thumb origin X when off state
    var holdWidth: CGFloat = 0 // thumb size width when hold the thumb
    var holdOnX: CGFloat = 0   // thumb origin X when holding thumb during on state


    public var offColor: UIColor = UIColor.white.withAlphaComponent(0.4)
    public var onColor: UIColor = UIColor.green.withAlphaComponent(0.4)
    public var thumbColor: UIColor = UIColor.white

    //---------------------------------------------------------------------
    // MARK: Tempory Attribute
    //---------------------------------------------------------------------
    private var beginX: CGFloat = 0

    //---------------------------------------------------------------------
    // MARK: Override Method
    //---------------------------------------------------------------------
    override init(frame: CGRect) {
        super.init(frame: frame)
        calculateAttributes(size: frame.size)
        setupSubLayer()
        patternSubLayer()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("SwitchButton should use frame initalize function")
    }


    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: layer)
        if onRect != self.bounds {
            calculateAttributes(size: self.bounds.size)
        }

    }
    //---------------------------------------------------------------------
    // MARK: Setup Layer
    //---------------------------------------------------------------------

    private func calculateAttributes(size: CGSize) {
        onRect = CGRect(origin: CGPoint.zero, size: size)
        diameter = size.height - 2
        offRect = CGRect(x: 2, y: 2, width: diameter-2, height: diameter-2)
        thumbOnX =  size.width - diameter - 1
        thumbOffX = 1
        holdWidth = ceil(diameter*1.25)
        holdOnX = size.width - holdWidth - 1
    }

    private func setupSubLayer() {
        self.layer.addSublayer(offLayer)
        self.layer.addSublayer(onLayer)
        self.layer.addSublayer(thumbLayer)
    }

    private func patternSubLayer() {
        //Self
        self.layer.cornerRadius = onRect.height/2
        //Off
        offLayer.cornerRadius = onRect.height/2
        offLayer.frame = onRect
        if offImage == nil {
            offLayer.backgroundColor = offColor.cgColor
            offLayer.borderColor = UIColor.white.withAlphaComponent(0.5).cgColor
            offLayer.borderWidth = 0.5
        }
        //On
        onLayer.cornerRadius = onRect.height/2
        if onImage == nil {
            onLayer.backgroundColor = onColor.cgColor
        }
        //Rhumb
        thumbLayer.cornerRadius = diameter/2
        if thumbImage == nil {
            thumbLayer.backgroundColor = thumbColor.cgColor
            thumbLayer.shadowOffset = CGSize(width: 0, height: 1)
            thumbLayer.shadowColor = UIColor.black.withAlphaComponent(0.5).cgColor
            thumbLayer.shadowRadius = 2
            thumbLayer.shadowOpacity = 0.8
        }
        //State
        layerStateOff()
    }

    //---------------------------------------------------------------------
    // MARK: Pattern State
    //---------------------------------------------------------------------

    func layerStateOn() {
        onLayer.frame = onRect
        thumbLayer.frame = CGRect(x: thumbOnX, y: 1, width: diameter, height: diameter)
    }

    func layerStateOff() {
        onLayer.frame = offRect
        thumbLayer.frame = CGRect(x: thumbOffX, y: 1, width: diameter, height: diameter)
    }

    func layerStateMoving(touch: UITouch) {
        //The performance during moving finger
        let pointX: CGFloat = touch.location(in: touch.view).x
        let prePointX: CGFloat = touch.previousLocation(in: touch.view).x;
        //Like the Original design,thumb moved match the offset,not the absolute touch position
        let offset: CGFloat = pointX - prePointX;
        if(offset == 0 ) {
            return;
        }
        var thumbOriginX: CGFloat = thumbLayer.frame.origin.x + offset;
        //if the x smaller than 1, it should be 1
        thumbOriginX = min(max(thumbOffX, thumbOriginX), holdOnX)
        onLayer.frame = CGRect(x: 0, y: 0, width: thumbOriginX+diameter, height: onRect.height)
        thumbLayer.frame = CGRect(x: thumbOriginX, y: 1, width: holdWidth, height: diameter)
    }

    //---------------------------------------------------------------------
    // MARK: Touch Life Cycle
    //---------------------------------------------------------------------

    override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
        touchPhaseBegin(touch: touch)
        return super.beginTracking(touch, with: event)
    }

    override func continueTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
        touchPhaseMoveStationary(touch: touch)
        return super.continueTracking(touch, with: event)
    }

    override func endTracking(_ touch: UITouch?, with event: UIEvent?) {
        if touch != nil {
            touchPhaseEndCancel(touch: touch!)
        }
        super.endTracking(touch, with: event)
    }

    override func cancelTracking(with event: UIEvent?) {
        for touch in (event?.touches(for: self))! {
            touchPhaseEndCancel(touch: touch)
        }
        super.cancelTracking(with: event)
    }

    private func touchPhaseBegin(touch: UITouch) {
        //record fist touch position
        beginX = touch.previousLocation(in: touch.view).x
        //Transform thumb expand and fade all
        self.layer.opacity = 0.5
        let originX = max(min(holdOnX, thumbLayer.frame.origin.x), thumbOffX)
        thumbLayer.frame = CGRect(x: originX, y: thumbLayer.frame.origin.y, width: holdWidth, height: diameter)
    }

    private func touchPhaseMoveStationary(touch: UITouch) {
        let pointX: CGFloat = touch.location(in: touch.view).x
        //if finger touched and did not offset DON'T CHANGE ON_LAYER
        //(but now touch life cycle listening continue as moved with same positionX)
        if(beginX != pointX) {
            layerStateMoving(touch: touch)
        }
    }

    private func touchPhaseEndCancel(touch: UITouch) {
        //Cancel fade
        self.layer.opacity = 1

        let thumbX: CGFloat = thumbLayer.frame.origin.x+thumbLayer.frame.size.width/2;
        let pointX: CGFloat = touch.location(in: touch.view).x
        let center: CGFloat = onRect.width/2
        //decide is ON state by comparing thumbX and the center
        var isOn: Bool = thumbX >= center
        //if just touch and not enter continue life cycle, switch the state
        //but it has little chance the finger moved and return the begin point,what a stick finger can do it.
        if(beginX == pointX) {
            isOn = !on;
        }
        //Set State and Animation to confirm frame rather than stock in the middle
        if(on != isOn) {
            on = isOn;
            //invoke the value change event
            //Cause we subclass the UIControl, we do not need invoke touchUpInside manually
            self.sendActions(for: .valueChanged)
        }
        //Animate to final state by "on"
        on ? layerStateOn() : layerStateOff()
    }
}

赏

请问老板还招人么(/ω＼)

支付宝

微信