//
//  RotationEffectIntroduction.swift
//  SwiftUIViewsMasteryDemo
//
//  Created by RecherJ on 2021/7/27.
//

import SwiftUI

// Rotation effect allows you to rotate views in either direction,
// clockwise or counter-clockwise, by supply an angle in either
// degrees or radius. The rotation happens on a flat,
// two-dimensional plane (on the Z-axis).

// It's important to note that when a view is rotated, the frame
// actually stays in place and it is the contents that get rotated.
struct RotationEffectIntroduction: View {
    @State private var degrees = -35.0
    var body: some View {
        VStack(spacing: 20) {
            Text("Rotation Effect")
                .font(.largeTitle)
            Text("Introduction")
                .font(.title)
                .foregroundColor(.gray)
            Text("Use rotation effect to rotate views around their center point.")
                .frame(maxWidth: .infinity)
                .padding()
                .background(Color.green)
                .font(.title)
            HStack {
                Text("-90°")
                    .rotationEffect(Angle(degrees: -90))
                Text("-45°")
                    .rotationEffect(Angle(degrees: -45))
                Text("0°")
                    .rotationEffect(Angle(degrees: 0))
                Text("45°")
                    .rotationEffect(Angle(degrees: 45))
                Text("90°")
                    .rotationEffect(Angle(degrees: 90))
            }
            .font(.largeTitle)
            .padding()

            Divider()
                .background(Color.green)

            Text("Totations are fun!")
                .font(Font.custom("Nightcall", size: 34))
                .rotationEffect(Angle(degrees: degrees))
                .border(Color.green)
                .padding(.vertical, 60)

            Slider(value: $degrees, in: -180...180, step: 1)
                .padding()

            Text("Notice it is the content that is getting rotated and the frame is still in place.")
                .frame(maxWidth: .infinity)
                .padding()
                .background(Color.green)
                .font(.title)
        }
    }
}

struct RotationEffectIntroduction_Previews: PreviewProvider {
    static var previews: some View {
        RotationEffectIntroduction()
            .preferredColorScheme(.dark)
    }
}
