如何使用CABasicAnimation和CALayer为bezier路径设置动画

时间:2015-03-13 12:31:34

标签: ios uiview calayer caanimation

我正试图在UIView中为bezier路径的颜色变化设置动画,但我认为我遗漏了一些非常基本的东西,因为我的UI视图中没有渲染图层。只是将图层添加到self.layer似乎没有触发上下文方法中的绘制。我真的不明白在何时以及在哪些层中触发绘制的基础知识。

public class ProgressIndicatorView: UIView {


    var bubble = BubbleLayer()

    public required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    public class var sharedInstance: ProgressIndicatorView {
        struct Singleton {
            static let instance = ProgressIndicatorView(frame: CGRect.zeroRect)
        }
        return Singleton.instance
    }

    public override init(frame: CGRect) {
        super.init(frame: frame)
        self.updateFrame(frame)

        self.backgroundColor = UIColor(white: 0.0, alpha: 0.3)
        self.layer.addSublayer(bubble)

    }


    func updateFrame(frame:CGRect)
    {
        self.frame = frame
        bubble.frame = CGRect(x:self.center.x, y:self.center.y, width: 126, height: 126)
    }

    func animate(){

        let anim = CABasicAnimation(keyPath:"percentage")
        anim.fromValue = 0.000
        anim.toValue = 1.000
        anim.repeatCount = 1000
        bubble.addAnimation(anim, forKey: "percentage")

    }


    public class func show() {

        let window = UIApplication.sharedApplication().windows.first as UIWindow
        let indicator = ProgressIndicatorView.sharedInstance
        indicator.updateFrame(window.frame)

        if indicator.superview == nil {

            window.addSubview(indicator)
            indicator.animate()
        }
    }

    public class func hide(){

        let indicator = ProgressIndicatorView.sharedInstance

        UIView.animateWithDuration(0.33, delay: 0.0, options: .CurveEaseOut, animations: {
            indicator.alpha = 0.0
            }, completion: {_ in
                indicator.alpha = 1.0
                indicator.removeFromSuperview()

        })

    }
}

public class BubbleLayer : CALayer {

    public var percentage:CGFloat = 0

    public override func animationForKey(key: String!) -> CAAnimation! {
        var anim = CABasicAnimation(keyPath: key)
        anim.fromValue = self.presentationLayer().key
        anim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        anim.duration = CATransaction.animationDuration()

        return anim
    }

    public override func actionForKey(event: String!) -> CAAction! {
        if (event == "percentage"){
            return self.animationForKey(event)
        }
        else {
            return super.actionForKey(event)
        }
    }

    public override func drawInContext(ctx: CGContext!) {
        super.drawInContext(ctx)
        UIGraphicsPushContext(ctx)

        let context = UIGraphicsGetCurrentContext()
        let frame = self.bounds


        let white = UIColor(red: self.percentage, green: 1.000, blue: 1.000, alpha: 1.000)
        let white_20 = UIColor(red: self.percentage, green: 1.000, blue: 1.000, alpha: 0.200)

        //// Oval 10 Drawing
        CGContextSaveGState(context)
        CGContextTranslateCTM(context, 1.3, 0.8)

        var oval10Path = UIBezierPath(ovalInRect: CGRectMake(5, 5, 113.6, 113.6))
        white_20.setStroke()
        oval10Path.lineWidth = 10
        oval10Path.stroke()

        CGContextRestoreGState(context)

        //// Bezier 122 Drawing
        var bezier122Path = UIBezierPath()
        bezier122Path.moveToPoint(CGPointMake(63, 5.9))
        bezier122Path.addCurveToPoint(CGPointMake(119.8, 62.7), controlPoint1: CGPointMake(94.4, 5.9), controlPoint2: CGPointMake(119.8, 31.3))
        bezier122Path.lineCapStyle = kCGLineCapRound;

        bezier122Path.lineJoinStyle = kCGLineJoinRound;

        white.setStroke()
        bezier122Path.lineWidth = 10
        bezier122Path.stroke()


    }

}

0 个答案:

没有答案