主页 / coding / 问题 / 79173749
Accepted
swiftPunk
Asked: 2024-11-10 05:38:17 +0800 CST

如何解决 SwiftUI 中的破折号阶段动画缺陷？

  • 772

我想为划线阶段添加动画，但遇到了动画缺陷。如何解决这些缺陷以实现给定线宽的流畅连续动画？

在此处输入图片描述

我更新了代码但没有改变原来的问题；我只是添加了一个按钮来启动和停止动画。

import SwiftUI

struct ContentView: View {
    
    let lineWidth: CGFloat = 90.0
    
    var body: some View {
        
        DashedCircleView(lineWidth: lineWidth)
        
    }
}

struct DashedCircleView: View {
    
    let lineWidth: CGFloat
    
    @State private var phaseAnimation: Bool = Bool()
    @State private var animation: Animation? = nil

    var body: some View {
        
        VStack {
            
            Spacer()
            
            Circle()
                .strokeBorder(Color.red, style: StrokeStyle(
                        lineWidth: lineWidth,
                        dash: [2*lineWidth],
                        dashPhase: phaseAnimation ? 4*lineWidth : .zero))
                .frame(width: 400, height: 400)
                .animation(animation, value: phaseAnimation)
            
            Spacer()

            Button("run Animation") {
                
                if (phaseAnimation) {
                    animation = Animation.interactiveSpring
                    phaseAnimation.toggle()
                }
                else {
                    animation = Animation.linear(duration: 1).repeatForever(autoreverses: false)
                    phaseAnimation.toggle()
                }
                
            }
            
        }
        .padding()
        
    }
}

更新：工作代码：

import SwiftUI

struct ContentView: View {
            
    var body: some View {
        
        DashedCircleView(lineWidth: 30.0, dashCount: 10, size: 400.0)
 
    }
}

struct DashedCircleView: View {
    
    let lineWidth: CGFloat
    let dashCount: Int
    let size: CGFloat
    
    @State private var phaseAnimation: Bool = Bool()
    
    var body: some View {
        
        VStack {
            
            Spacer()

            Circle()
                .strokeBorder(Color.red, style: StrokeStyle(lineWidth: lineWidth,
                                                            dash: [(size - lineWidth) * CGFloat.pi / (CGFloat(dashCount)*2.0)],
                                                            dashPhase: phaseAnimation ? (size - lineWidth) * CGFloat.pi / CGFloat(dashCount) : .zero))
                .frame(width: size, height: size)
                .animation(phaseAnimation ? Animation.linear(duration: 1).repeatForever(autoreverses: false) : Animation.interactiveSpring, value: phaseAnimation)
            
            Spacer()
            
            Button(phaseAnimation ? "Pause Animation" : "Run Animation") {
                phaseAnimation.toggle()
            }
            
        }
        .padding()
        
    }
}

在此处输入图片描述

swift

1 个回答

  1. Best Answer

    这种缺陷是因为虚线没有完全填满整个路径的长度。如果你使用与路径长度成正比的虚线大小，效果会很好。例如，

    Circle()
    .strokeBorder(
        style: StrokeStyle(
            lineWidth: lineWidth,
            dash: [(400 - lineWidth) * .pi / 6],
            dashPhase: phaseAnimation ? (400 - lineWidth) * .pi / 3 : .zero
        ))
    .frame(width: 400, height: 400)

    400 - lineWidth是圆的直径。请记住，strokeBorder将形状插入lineWidth / 2，因此圆的直径lineWidth较小。通过将圆的周长除以偶数，我确保虚线完全填满整个路径。

    路径的长度计算起来可能比较棘手，而且您必须使用不均匀的虚线大小。您仍然可以通过在路径的起始位置设置动画来使虚线正确移动，因为那是虚线的起始位置。

    内置Circle总是从圆圈的右侧开始，这就是为什么奇怪的视觉效果总是发生在那里。

    这里我创建了一个MyCircle可以控制起点的，

    struct MyCircle: InsettableShape, Animatable {
    var startAngle: Angle
    let inset: CGFloat
    
    var animatableData: Double {
        get { startAngle.radians }
        set { startAngle = .radians(newValue) }
    }
    
    nonisolated func path(in rect: CGRect) -> Path {
        Path { p in
            p.addArc(center: .init(x: rect.midX, y: rect.midY), radius: rect.width / 2 - inset, startAngle: startAngle, endAngle: startAngle + .degrees(360), clockwise: false)
        }
    }
    
    nonisolated func inset(by amount: CGFloat) -> MyCircle {
        MyCircle(startAngle: startAngle, inset: inset + amount)
    }
}

    它可以像这样动画：

    MyCircle(startAngle: phaseAnimation ? .zero : .degrees(360), inset: 0)
    .strokeBorder(
        style: StrokeStyle(
            lineWidth: lineWidth,
            // here I use a rather random dash size 
            // - the dash will not be evenly spread out, but at least they rotate as you'd expect
            dash: [2 * lineWidth]
            // I am not animating the dash phase here
        ))
    .frame(width: 400, height: 400)
    • 2

相关问题