如何为自定义NSView设置动画

时间:2018-10-25 00:37:14

标签: macos nsview drawrect

来自iOS背景。我正在尝试创建循环进度视图。我能够做到,但是当我尝试对抽签进行动画处理时,它不会发生。

自定义NSView:

var progressValue : CGFloat?

    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)

        // Drawing code here.
        drawSpinner(frame: dirtyRect, startAgnle: 90, progress: progressValue!)
    }

    func drawSpinner(frame: NSRect, startAgnle: CGFloat , progress: CGFloat) {
        //// General Declarations
        let context = NSGraphicsContext.current!.cgContext

        //// Color Declarations
        let orange = NSColor(red: 1, green: 0.54, blue: 0.16, alpha: 1)

        //// Variable Declarations
        let endAngle: CGFloat = CGFloat(90 + progress * 3.6)

        //// Oval Drawing
        NSGraphicsContext.saveGraphicsState()
        context.translateBy(x: frame.minX + 0.50000 * frame.width, y: frame.minY + 0.50000 * frame.height)

        let ovalRect = NSRect(x: -40, y: -40, width: 80, height: 80)
        let ovalPath = NSBezierPath()
        ovalPath.appendArc(withCenter: NSPoint(x: 0, y: 0), radius: ovalRect.width / 2, startAngle: startAgnle, endAngle: endAngle, clockwise: true)

        var ovalTransform = AffineTransform()
        ovalTransform.translate(x: ovalRect.midX, y: ovalRect.midY)
        ovalTransform.scale(x: 1, y: ovalRect.height / ovalRect.width)
        ovalPath.transform(using: ovalTransform)

        orange.setStroke()
        ovalPath.lineWidth = 4
        ovalPath.lineCapStyle = .round
        ovalPath.lineJoinStyle = .bevel
        ovalPath.stroke()

        NSGraphicsContext.restoreGraphicsState()
    }

,然后在视图控制器中:

    func loadSpinner(){ //calling this in viewDidAppear

        let spinner = SpinnerView.init(frame: NSMakeRect(10, 10, 150, 150   ))
        spinner.progressValue = 0

        self.view.addSubview(spinner)

        for _ in 1...100 {
            delay(delay: 1.0) {
                spinner.progressValue? -= 1.0
                spinner.needsDisplay = true
                spinner.displayIfNeeded()
            }
        }


    }

    func delay(delay:Double, closure:@escaping ()->()) {
       DispatchQueue.main.asyncAfter(deadline: .now()+delay) {
            closure()
        }
    }

将按预期方式调用draw rect方法。视图应使圆环动画,并将进度值从0减小到-100。该视图没有动画,它显示了整个圆圈。

有人可以指出我在哪里做错了吗?

enter image description here

0 个答案:

没有答案