Skip to content

Instantly share code, notes, and snippets.

@vibrazy
Created June 29, 2022 20:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vibrazy/a0c5500e069793b0f5cba4a564f4c8dc to your computer and use it in GitHub Desktop.
Save vibrazy/a0c5500e069793b0f5cba4a564f4c8dc to your computer and use it in GitHub Desktop.
Hello Animation View - SwiftUI
//
// HelloAnimationView.swift
// SwiftUIBiteSize
//
// Created by Dan Tavares on 29/06/2022.
//
import SwiftUI
struct HelloAnimationView: View {
enum Animations {
static var rotation: Animation {
.spring(
response: 0.3,
dampingFraction: 0.7,
blendDuration: 0.4
)
}
}
private enum Field: Int, CaseIterable {
case hello
}
@State private var name: String = ""
@State private var isDone: Bool = false
@FocusState private var focusedField: Field?
var body: some View {
ZStack {
Color.black.edgesIgnoringSafeArea(.all)
TextField("Hello", text: $name)
.focused($focusedField, equals: .hello)
.textFieldStyle(RoundedBorderTextFieldStyle())
.textFieldStyle(PlainTextFieldStyle())
.multilineTextAlignment(.leading)
.accentColor(.pink)
.foregroundColor(.blue)
.font(.title.weight(.bold))
.padding(.vertical, 12)
.padding(.horizontal, 160)
.rotation3DEffect(
Angle(degrees: isDone ? -45 : 0),
axis: (x: 0, y: 0, z: 1),
anchor: .center,
anchorZ: 1,
perspective: 50
)
.scaleEffect(isDone ? 2 : 1)
VerticalSlider(playData: 20, sliderHeight: 200)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
.padding(.leading, isDone ? -100 : 0)
.padding(.vertical, isDone ? 50 : 0)
.opacity(isDone ? 0 : 1)
Button {
withAnimation(Animations.rotation) {
isDone.toggle()
focusedField = isDone ? nil : .hello
}
} label: {
Text("Done")
.bold()
.foregroundColor(.white)
.padding()
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
}
}
}
struct VerticalSlider: View {
@State var playData : CGFloat = 0.4
var sliderHeight:CGFloat
var body: some View {
Slider(
value: $playData,
in: 0...255,
step: 5.0
).rotationEffect(.degrees(-90.0), anchor: .topLeading)
.frame(width: sliderHeight)
.offset(y: sliderHeight)
}
}
struct HelloAnimationView_Previews: PreviewProvider {
static var previews: some View {
HelloAnimationView()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment