隐式路径动画的SwiftUI问题

时间:2020-11-10 16:20:16

标签: animation path swiftui

我有以下代码,该代码通过状态变量通过隐式动画绘制曲线。滑块每次更改值时,曲线的参数都会发生变化,因此会重新绘制另一条曲线。尽管代码在第一次运行时可以按预期方式工作,并且曲线具有动画效果,但后续曲线却并非如此。绘制了一条新曲线,但未设置动画。 代码在这里。

import SwiftUI
import CoreData

struct LissajousView: View {
    
    @State private var aSliderValue: Double = 4
    @State private var bSliderValue: Double = 3
    @State private var deltaSliderValue: Double = 2
    @State private var percentage = CGFloat(0.0)
    
            
    var body: some View {
        
        let results = calcLissajous(a: aSliderValue, b: bSliderValue, d: deltaSliderValue)
        let lineAnimation = Animation.easeInOut(duration: 2)
        
        ZStack(alignment: .center) {

            VStack(alignment: .trailing)    {
                StrokeText(text: "Lissajous", color: UIColor.red)
                    .fixedSize()
                Text("Shapes")
                    .font(.custom("Cochin-Italic", size: 26))
                    .foregroundColor(.gray)
                
                Spacer()
                
                RoundedRectangle(cornerRadius: 10, style: .continuous)
                    .fill(Color.black)
                    .frame(width: 350, height: 350)
                    .overlay(
                        Path { path in
                            path.move(to: results[0])
                            for i in 1..<results.count  {
                                path.addLine(to: results[i])
                            }
                        }
                        .trim(from: 0, to: percentage)
                        .stroke(Color.green, lineWidth: 2)
                        .frame(width: 340, height: 340)
                        .animation(lineAnimation)
                        .onAppear {percentage = 1.0}
                    )
                
                Spacer(minLength: 300)
                
            }

            VStack(alignment: .center, spacing: 25)    {
                
                Spacer(minLength: 470)
                
                HStack(alignment: .center, spacing: 50) {
                    Text("x = sin(at + φ)")
                    Text("y = sin(bt)")
                }
                .font(.custom("AmericanTypewriter", size: 20))
                                      
                
                HStack(alignment: .center, spacing: 5) {
                    Spacer()
                    Text("a=\(aSliderValue, specifier: "%.1f")")
                        .font(.custom("AmericanTypewriter", size: 20))
                    Spacer(minLength: 10)
                    Slider(value: $aSliderValue, in: 1...10, step: 0.5)
                        .accentColor(Color.green)

                    Spacer()
                }
                
                HStack(alignment: .center, spacing: 5) {
                    Spacer()
                    Text("b=\(bSliderValue, specifier: "%.1f")")
                        .font(.custom("AmericanTypewriter", size: 20))
                    Spacer(minLength: 10)
                    
                    Slider(value: $bSliderValue, in: 1...10, step: 0.5)
                        .accentColor(Color.green)
                    
                    Spacer()
                }
                
                HStack(alignment: .center, spacing: 5) {
                    Spacer()
                    Text("φ=π/\(deltaSliderValue, specifier: "%.0f")")
                        .font(.custom("AmericanTypewriter", size: 20))
                    Spacer()
                    Slider(value: $deltaSliderValue, in: 1...16, step: 1)
                        .accentColor(Color.green)
                    Spacer()
                }
                
                Spacer(minLength: 30)
            }
        }
    }
}

0 个答案:

没有答案