ios - 在 iOS UIView Swift 中为展开的绘图设置动画

Question

我想使用 CGContext 在 UIView 中创建自定义动态绘图，这样当我在其上执行 UIView 动画时，绘图将在动画/插值期间呈现。我尝试使用自定义 CALayer 并覆盖其绘制方法，但失败了。我尝试子类化 UIView draw(_ in:CGRect) 但它只在第一次绘制。这就是我想要做的:

class RadioWaveView : UIView {
    override func draw(_ in:CGRect) {
        // draw something, for example an ellipse based on frame size, something like this:
        // let context = CGGraphicsCurrentContext()
        // context.addEllipse(self.frame)
        // Unfortunately this method is called only once, not during animation
    }
}

在 viewDidAppear() 中:

UIView.animate(withDuration: 5, delay: 1, options: [.repeat], animations: {
        self.myRadioWaveView.frame = CGRect(x:100,y:100,width:200,heigh:300)
    }, completion: { flag in
    })

动画之所以有效，是因为我设置了 myRadioWaveView 的背景颜色并看到它在屏幕上展开。在draw中打断点表示只执行一次。

编辑:本质上，我在问这个问题:我们如何创建自定义 UIView 并使用 UIView.animate() 来为该 View 的渲染设置动画？让我们保留 UIView.animate() 方法，我们如何为扩大的圆圈(或 UIView 中的任何其他自定义绘图)制作动画？

编辑:这是我创建的一个自定义类，用于绘制一个三角形。当我为其边界设置动画时，三角形随 View 的底层图像缩放，但在动画期间未调用 draw 方法。我不想要那个；我希望 draw() 方法在动画的每一帧重新绘制绘图。

open class TriangleView : UIView {

override open func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()!
    let path = CGMutablePath()
    path.move(to: CGPoint.zero)
    path.addLine(to: CGPoint(x:self.frame.width,y:0))
    path.addLine(to: CGPoint(x:self.frame.width/2,y:self.frame.height))
    path.addLine(to: CGPoint.zero)
    path.closeSubpath()
    context.beginPath()
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(3)
    context.addPath(path)
    context.closePath()
    context.strokePath()
}

}

Answer 1

我一直在研究你的问题，这种方法使用 CABasicAnimation 和 CAShapeLayer 我定义了一个自定义的 UIView 类来制作工作，我将添加进一步的改进 @IBDesignable 和 @IBInspectables

import UIKit

class RadioWaveAnimationView: UIView {

    var animatableLayer : CAShapeLayer?

    override func awakeFromNib() {
        super.awakeFromNib()
        self.layer.cornerRadius = self.bounds.height/2

        self.animatableLayer = CAShapeLayer()
        self.animatableLayer?.fillColor = self.backgroundColor?.cgColor
        self.animatableLayer?.path = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).cgPath
        self.animatableLayer?.frame = self.bounds
        self.animatableLayer?.cornerRadius = self.bounds.height/2
        self.animatableLayer?.masksToBounds = true
        self.layer.addSublayer(self.animatableLayer!)
        self.startAnimation()
    }


    func startAnimation()
    {
        let layerAnimation = CABasicAnimation(keyPath: "transform.scale")
        layerAnimation.fromValue = 1
        layerAnimation.toValue = 3
        layerAnimation.isAdditive = false

        let layerAnimation2 = CABasicAnimation(keyPath: "opacity")
        layerAnimation2.fromValue = 1
        layerAnimation2.toValue = 0
        layerAnimation2.isAdditive = false

        let groupAnimation = CAAnimationGroup()
        groupAnimation.animations = [layerAnimation,layerAnimation2]
        groupAnimation.duration = CFTimeInterval(2)
        groupAnimation.fillMode = kCAFillModeForwards
        groupAnimation.isRemovedOnCompletion = true
        groupAnimation.repeatCount = .infinity

        self.animatableLayer?.add(groupAnimation, forKey: "growingAnimation")
    }
    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */

}

结果

希望对你有帮助