首页 > 解决方案 > CAEmitterLayer 停止显示

问题描述

我为 SwiftUI调整了这段代码来显示五彩纸屑粒子,但有时粒子发射器不起作用。我注意到这通常发生在发送到后台(不完全杀死应用程序)并重新打开它之后,或者只是让应用程序静置一段时间然后再试一次。

我已经尝试使用beginTime其他答案提到的(在发射器和单元上),但这完全破坏了事情。我还尝试切换各种其他发射器属性(birthRate、isHidden)。这可能与我正在使用 UIViewRepresentable 进行调整有关。尽管调试控制台说它仍然可见,但发射器层似乎只是消失了。

class ConfettiParticleView: UIView {
    var emitter: CAEmitterLayer!
    public var colors: [UIColor]!
    public var intensity: Float!
    private var active: Bool!

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

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    func setup() {
        colors = [UIColor(Color.red),
                  UIColor(Color.blue),
                  UIColor(Color.orange),
                ]
        intensity = 0.7
        active = false
        emitter = CAEmitterLayer()

        emitter.emitterPosition = CGPoint(x: UIScreen.main.bounds.width / 2.0, y: 0) // emit from top of view
        emitter.emitterShape = .line
        emitter.emitterSize = CGSize(width: UIScreen.main.bounds.width, height: 100) // line spans the whole top of view
//        emitter.beginTime = CACurrentMediaTime()
        var cells = [CAEmitterCell]()
        for color in colors {
            cells.append(confettiWithColor(color: color))
        }

        emitter.emitterCells = cells
        emitter.allowsGroupOpacity = false
        self.layer.addSublayer(emitter)
    }

    func startConfetti() {
        emitter.lifetime = 1
        // i've tried toggling other properties here like birthRate, speed
        active = true
    }

    func stopConfetti() {
        emitter.lifetime = 0
        active = false
    }

    func confettiWithColor(color: UIColor) -> CAEmitterCell {
        let confetti = CAEmitterCell()
        confetti.birthRate = 32.0 * intensity
        confetti.lifetime = 15.0 * intensity
        confetti.lifetimeRange = 0
        confetti.name = "confetti"
        confetti.color = color.cgColor
        confetti.velocity = CGFloat(450.0 * intensity) // orig 450
        confetti.velocityRange = CGFloat(80.0 * intensity)
        confetti.emissionLongitude = .pi
        confetti.emissionRange = .pi / 4
        confetti.spin = CGFloat(3.5 * intensity)
        confetti.spinRange = 300 * (.pi / 180.0)
        confetti.scaleRange = CGFloat(intensity)
        confetti.scaleSpeed = CGFloat(-0.1 * intensity)
        confetti.contents = #imageLiteral(resourceName: "confetti").cgImage
        confetti.beginTime = CACurrentMediaTime()
        return confetti
    }

    func isActive() -> Bool {
        return self.active
    }
}

查看可表示的

struct ConfettiView: UIViewRepresentable {
    @Binding var isStarted: Bool
    
    func makeUIView(context: Context) -> ConfettiParticleView {
        return ConfettiParticleView()
    }
    
    func updateUIView(_ uiView: ConfettiParticleView, context: Context) {
        if isStarted && !uiView.isActive() {
            uiView.startConfetti()
            print("confetti started")
        } else if !isStarted {
            uiView.stopConfetti()
            print("confetti stopped")
        }
    }
}

用于测试的 swiftui 视图

struct ConfettiViewTest: View {
    @State var isStarted = false
    
    var body: some View {
        ZStack {
            ConfettiView(isStarted: $isStarted)
                .ignoresSafeArea()
            
            Button(action: {
                isStarted = true
                DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                    isStarted = false
                }
            }) {
                Text("toggle")
                    .padding()
                    .background(Color.white)
            }
        }
    }
}

标签: swiftswiftuicore-animationcaemitterlayer

解决方案


推荐阅读