Created
May 10, 2024 16:18
-
-
Save juanjovn/899b648c2e6ab40fa2f8a7a93ee1dcc5 to your computer and use it in GitHub Desktop.
Crush things like the polemic and deleted Apple iPad Pro Commercial
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// 🌯⚡️ UI Components included in WrapFast SwiftUI Starter Kit: https://WrapFa.st | |
// | |
import SwiftUI | |
struct AppleCrusher: View { | |
@State private var isCrushing = false | |
@State private var isShaking = false | |
@State private var changeObjects = false | |
@State private var duration: Double = 5 | |
@State private var finalSize: CGFloat = 0.5 | |
@State private var imagesHeight: CGFloat = 90 | |
@State private var crushedObjects = ["trumpet", "paint", "piano","camera","emoji"] | |
@State private var resultingObjects = ["ipad"] | |
var body: some View { | |
VStack(spacing: 0) { | |
VStack(spacing: 0) { | |
HStack(spacing: 70){ | |
UnevenRoundedRectangle(cornerRadii: .init(topLeading: 4,topTrailing: 4),style: .continuous) | |
.frame(maxWidth: 50, maxHeight: 1000) | |
UnevenRoundedRectangle(cornerRadii: .init(topLeading: 4,topTrailing: 4),style: .continuous) | |
.frame(maxWidth: 50, maxHeight: 1000) | |
} | |
.foregroundStyle(.gray.gradient) | |
UnevenRoundedRectangle(cornerRadii: .init(topLeading: 12, bottomLeading: 4, bottomTrailing: 4, topTrailing: 12),style: .continuous) | |
.frame(maxWidth: UIScreen.width - 30, maxHeight: 90) | |
} | |
.compositingGroup() | |
.shadow(radius: 5, y: 4) | |
.foregroundStyle(.gray.gradient) | |
.offset(x: isShaking ? 2 : 0, y: isCrushing ? finalSize : 0) | |
HStack(spacing: 0) { | |
ForEach(changeObjects ? resultingObjects : crushedObjects, id: \.self) { object in | |
Image(object) | |
.resizable() | |
.scaledToFit() | |
.frame(height: isCrushing ? finalSize : imagesHeight) | |
} | |
} | |
.fixedSize() | |
UnevenRoundedRectangle(cornerRadii: .init(topLeading: 4, bottomLeading: 12, bottomTrailing: 12, topTrailing: 4),style: .continuous) | |
.frame(maxWidth: UIScreen.width - 30, maxHeight: 60) | |
.foregroundStyle(.gray.gradient) | |
.shadow(radius: 3, y: 6) | |
Button("Crush!") { | |
withAnimation(.easeOut(duration: duration)) { | |
isCrushing = true | |
} | |
DispatchQueue.main.asyncAfter(deadline: .now() + duration - 0.2) { | |
shake() | |
changeObjects = true | |
} | |
DispatchQueue.main.asyncAfter(deadline: .now() + duration + 0.5) { | |
shake() | |
withAnimation(.easeOut(duration: duration)) { | |
isCrushing = false | |
} | |
} | |
} | |
.font(.system(.largeTitle, design: .rounded, weight: .black)) | |
.buttonStyle(.borderedProminent) | |
.buttonBorderShape(.capsule) | |
.padding(.vertical, 50) | |
} | |
.frame(maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, alignment: .bottom) | |
.padding(.bottom, 100) | |
.ignoresSafeArea() | |
} | |
private func shake() { | |
isShaking = true | |
withAnimation(.spring(response: 0.2, dampingFraction: 0.2, blendDuration: 0.2)) { | |
isShaking = false | |
} | |
} | |
} | |
#Preview { | |
AppleCrusher() | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
More components like this in the SwiftUI iOS boilerplate WrapFast 🌯⚡️