在ForEach循环中快速进行UI旋转

时间:2020-04-28 03:35:48

标签: swift foreach swift3 rotation swiftui

请问这个问题的长度,但是我有一个快速的UI,它的单词以同心圆显示。我希望能够按下向右和向左按钮,并使单词分别顺时针和逆时针旋转。只要文本不在ForEach循环中,我的withAnimation{}按钮功能就可以工作。有没有办法更改ForEach循环中的状态变量?以我为例,为ForEach中的视图旋转设置动画。在这种情况下,我想使用滑块选择要旋转的水平。

代码: 导入SwiftUI

struct ContentView: View {
    @State var circle = Circle()

    @State var platform: Float = 0.0

    @State var platformBool = false

    @State var colors = [Color.red, Color.black, Color.orange, Color.white, Color.green, Color.gray, Color.blue]
    @State var colorOne = Color.red

    @State var colorTwo = Color.black

    @State var levelWords = [["A","B","O","R","T","S"], ["B","E","N","I","G","N"], ["A","B","O","R","T","S"], ["B","E","N","I","G","N"], ["A","B","O","R","T","S"], ["B","E","N","I","G","N"]]

    @State var angle = Double(0)

    @State var angles = [Double(0), Double(0), Double(0), Double(0), Double(0), Double(0),]

    @State var radius: CGFloat = 175.0

    var body: some View {

        let rows = (self.levelWords[0].count)
        let columns = (self.levelWords.count)

        let radiiStep: CGFloat = self.radius / CGFloat(self.levelWords[0].count + 1)
        let degreeStep = Double(360 / self.levelWords[0].count)

        func floatValue(one: CGFloat, two: CGFloat, three: Int) -> CGFloat {

            let float = CGFloat(three)
            let floatValue = one - two * float

            return -floatValue

        }

        func degreeValue(one: Double, two: Double, three: Double) -> Double {

            let value = -(one + two * three)

            return value
        }

        return
            VStack {

                ZStack{

                    self.circle
                        .fill(RadialGradient(gradient: Gradient(colors: [Color.black, Color.blue]), center: .center, startRadius: 30, endRadius: 200))

                    ForEach(0..<columns) { column in
                         ForEach(0..<rows) { row in
                            Text("\(self.levelWords[column][row])")
                                .rotationEffect(.degrees(degreeValue(one: self.angles[column], two: Double(row), three: degreeStep)))
                                .offset(y: floatValue(one: self.radius, two: radiiStep, three: column))
                                .rotationEffect(.degrees(self.angles[column] + Double(row) * degreeStep))
                                .foregroundColor(Color.white)
                        }
                    }

                    Text("rot")
                        .rotationEffect(.degrees(self.angles[Int(self.platform)]))
                        .foregroundColor(Color.white)

                }

                Spacer()
                HStack{
                    Spacer()
                    Button("Left") {
                        withAnimation{
                            self.angles[Int(self.platform)] -= Double(360 / self.levelWords[0].count)
                            print(self.angles[Int(self.platform)])
                        }
                    }

                    Spacer()

                    Button("Right") {
                         withAnimation{
                            self.angle += Double(360 / self.levelWords[0].count)
                            print("rotated")
                        }
                    }
                    Spacer()
                }


                Slider(value: $platform, in: 0...5)
                    .padding()

                Text("platform: \(Int(platform))")
                .padding()

            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

0 个答案:

没有答案