### SwiftUI Christmas Tree Animation in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Features an animated Christmas tree built with SwiftUI. This likely involves animating lights, ornaments, or the tree itself. It's a festive example showcasing decorative animations. ```swift import SwiftUI struct ChristmasLight: Identifiable { let id = UUID() var color: Color var delay: Double } struct ChristmasTreeView: View { let lights: [ChristmasLight] = [ ChristmasLight(color: .red, delay: 0), ChristmasLight(color: .green, delay: 0.2), ChristmasLight(color: .yellow, delay: 0.4), ChristmasLight(color: .blue, delay: 0.6), ChristmasLight(color: .orange, delay: 0.8) ] @State private var animateLights = false var body: some View { ZStack { Color.black.edgesIgnoringSafeArea(.all) VStack { Triangle() .fill(Color.green) .frame(width: 200, height: 200) Rectangle() .fill(Color.brown) .frame(width: 50, height: 50) } .overlay( ForEach(lights) { light in Circle() .fill(light.color) .frame(width: 20, height: 20) .offset(x: CGFloat.random(in: -80...80), y: CGFloat.random(in: -150...0)) .scaleEffect(animateLights ? 1.2 : 1.0) .animation(.easeInOut(duration: 0.8).delay(light.delay).repeatForever(autoreverses: true), value: animateLights) } ) } .onAppear { animateLights.toggle() } } } struct Triangle: Shape { func path(in rect: CGRect) -> Path { var path = Path() path.move(to: CGPoint(x: rect.midX, y: rect.minY)) path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY)) path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY)) path.closeSubpath() return path } } struct ChristmasTreeView_Previews: PreviewProvider { static var previews: some View { ChristmasTreeView() } } ``` -------------------------------- ### Content Transition with Phase Animator and Springs in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Creates seamless icon replacement using a combination of Phase Animator and spring physics. This advanced technique allows for sophisticated transitions between UI elements, providing a polished user experience. It requires careful management of animation states and timings. ```swift import SwiftUI struct ContentTransitionWithSprings: View { @State private var showHeart = false var body: some View { VStack { if showHeart { Image(systemName: "heart.fill") .font(.system(size: 100)) .foregroundColor(.red) .transition(.scale.combined(with: .opacity)) } else { Image(systemName: "star.fill") .font(.system(size: 100)) .foregroundColor(.yellow) .transition(.scale.combined(with: .opacity)) } Button("Switch") { withAnimation(.spring(response: 0.5, dampingFraction: 0.7)) { showHeart.toggle() } } .padding() } } } struct ContentTransitionWithSprings_Previews: PreviewProvider { static var previews: some View { ContentTransitionWithSprings() } } ``` -------------------------------- ### Duolingo-style Animated Loading Indicator in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Replicates the animated loading indicators found in the Duolingo app. This animation typically involves multiple elements moving and transforming in sequence. Requires careful choreography of animations using `withAnimation` and potentially `TimelineView`. ```swift import SwiftUI struct DuolingoLoadingView: View { @State private var isAnimating = false var body: some View { HStack(spacing: 10) { Circle() .fill(Color.green) .frame(width: 20, height: 20) .scaleEffect(isAnimating ? 1.5 : 1.0) Circle() .fill(Color.yellow) .frame(width: 20, height: 20) .scaleEffect(isAnimating ? 1.5 : 1.0) .animation(.easeInOut(duration: 0.6).delay(0.2).repeatForever()) Circle() .fill(Color.red) .frame(width: 20, height: 20) .scaleEffect(isAnimating ? 1.5 : 1.0) .animation(.easeInOut(duration: 0.6).delay(0.4).repeatForever()) } .onAppear { withAnimation(.easeInOut(duration: 0.6).repeatForever()) { isAnimating = true } } } } struct DuolingoLoadingView_Previews: PreviewProvider { static var previews: some View { DuolingoLoadingView() } } ``` -------------------------------- ### Content Transition: Smooth Symbols Swapping in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Demonstrates smooth transitions when swapping between different SF Symbols. This technique uses SwiftUI's built-in transition modifiers to animate the change of one symbol to another, creating a seamless visual effect. ```swift import SwiftUI struct SymbolSwapTransition: View { @State private var showFirstSymbol = true var body: some View { VStack { if showFirstSymbol { Image(systemName: "star.fill") .resizable() .scaledToFit() .frame(width: 100, height: 100) .foregroundColor(.yellow) .transition(.scale.combined(with: .opacity)) } else { Image(systemName: "heart.fill") .resizable() .scaledToFit() .frame(width: 100, height: 100) .foregroundColor(.red) .transition(.scale.combined(with: .opacity)) } Button("Swap Symbol") { withAnimation { showFirstSymbol.toggle() } } .padding() } } } struct SymbolSwapTransition_Previews: PreviewProvider { static var previews: some View { SymbolSwapTransition() } } ``` -------------------------------- ### Anchor Movement Animation in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Demonstrates animating elements based on anchor points. This involves manipulating the positioning and alignment of views to create dynamic layouts and movements. SwiftUI's `alignment` and `position` modifiers can be utilized. ```swift import SwiftUI struct AnchorMovementView: View { @State private var moveAnchor = false var body: some View { VStack { Rectangle() .fill(Color.orange) .frame(width: 50, height: 50) .anchorPreference(key: MyAnchorKey.self, value: .bounds) { anchor in [anchor] } .overlayPreferenceValue(MyAnchorKey.self) { GeometryReader { proxy -> Color in let anchor = proxy[ $0.first! ] return Color.clear.preference(key: OtherAnchorKey.self, value: anchor) } } Rectangle() .fill(Color.blue) .frame(width: 50, height: 50) .overlayPreferenceValue(OtherAnchorKey.self) { GeometryReader { proxy -> Color in let anchor = proxy[ $0 ] return Color.clear.preference(key: OtherAnchorKey.self, value: anchor) } } .offset(x: moveAnchor ? 100 : 0) .animation(.easeInOut(duration: 1), value: moveAnchor) Button("Move") { moveAnchor.toggle() } .padding() } } } struct MyAnchorKey: PreferenceKey { typealias Value = [PreferenceKey.Value] static var defaultValue: Value = [] static func reduce(value: inout Value, next: () -> Value) { value.append(contentsOf: next()) } } struct OtherAnchorKey: PreferenceKey { typealias Value = Anchor static var defaultValue: Value = Anchor.self.bounds.value static func reduce(value: inout Value, next: () -> Value) { value = next() } } struct AnchorMovementView_Previews: PreviewProvider { static var previews: some View { AnchorMovementView() } } ``` -------------------------------- ### Liquid Glass Shape Morphing Animation With GlassEffectContainer (SwiftUI) Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Demonstrates a liquid glass effect with shape morphing using SwiftUI's PhaseAnimator. This snippet utilizes a custom GlassEffectContainer and animates changes within an HStack. It's designed for iOS, macOS, visionOS, and watchOS. ```swift import SwiftUI struct LiquidGlassEffectContainer: View { var body: some View { GlassEffectContainer(spacing: 50) { PhaseAnimator([false, true]) { morph in HStack(spacing: morph ? 50.0 : -15.0) { Button { // } label: { Image(systemName: "scribble.variable") } .padding() .glassEffect() Button { // } label: { Image(systemName: "eraser.fill") } .padding() .glassEffect() } .tint(.green) .font(.system(size: 64.0)) } animation: { morph in //.bouncy(duration: 2, extraBounce: 0.5) //.easeOut(duration: 2) .easeInOut(duration: 2) //.timingCurve(0.68, -0.6, 0.32, 1.6, duration: 2) } } } } #Preview { LiquidGlassEffectContainer() .preferredColorScheme(.dark) } ``` -------------------------------- ### X-Like Animation with Springs in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Implements an animation similar to the 'like' interaction on X (formerly Twitter). This typically involves a satisfying visual feedback loop using spring physics. SwiftUI's spring animation modifier is essential for this effect. ```swift import SwiftUI struct XLikeAnimation: View { @State private var isLiked = false var body: some View { Image(systemName: isLiked ? "heart.fill" : "heart") .font(.system(size: 60)) .foregroundColor(isLiked ? .red : .gray) .scaleEffect(isLiked ? 1.2 : 1.0) .animation(.spring(response: 0.3, dampingFraction: 0.6), value: isLiked) .onTapGesture { isLiked.toggle() } } } struct XLikeAnimation_Previews: PreviewProvider { static var previews: some View { XLikeAnimation() } } ``` -------------------------------- ### Incoming Call Animation with Symbol Effects in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Creates an incoming call animation using SF Symbols with variable color and hue rotation. This effect draws attention to notifications or incoming calls. It leverages SwiftUI's symbol effects and animation modifiers for dynamic visuals. ```swift import SwiftUI struct IncomingCallAnimation: View { @State private var animate = false var body: some View { Image(systemName: "phone.fill") .font(.system(size: 80)) .foregroundColor(.green) .scaleEffect(animate ? 1.2 : 1.0) .hueRotation(.degrees(animate ? 360 : 0)) .animation(.easeInOut(duration: 1.5).repeatForever(autoreverses: true), value: animate) .onAppear { animate = true } } } struct IncomingCallAnimation_Previews: PreviewProvider { static var previews: some View { IncomingCallAnimation() } } ``` -------------------------------- ### Hue Rotation Animation with Phase Animator in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Applies a hue rotation effect using the Phase Animator. This technique is useful for creating dynamic color changes and visual interest in UI elements. It leverages SwiftUI's animation system for smooth, continuous transformations. ```swift import SwiftUI struct HueRotationView: View { @State private var isAnimating = false var body: some View { Text("WWDC24") .font(.system(size: 60, weight: .black)) .foregroundColor(.primary) .hueRotation(Angle.degrees(isAnimating ? 360 : 0)) .scaleEffect(isAnimating ? 1.2 : 1.0) .onAppear { withAnimation(.easeInOut(duration: 2).repeatForever(autoreverses: false)) { isAnimating = true } } } } struct HueRotationView_Previews: PreviewProvider { static var previews: some View { HueRotationView() } } ``` -------------------------------- ### Achieving Bounce Animation in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Demonstrates how to create a bouncing effect in animations. This is achieved using specific animation curves that simulate the upward and downward motion of a bouncing object. SwiftUI's `Animation.interpolatingSpring()` can be used. ```swift import SwiftUI struct BouncyAlternativeView: View { @State private var bounce = false var body: some View { VStack { Circle() .fill(Color.green) .frame(width: 50, height: 50) .offset(y: bounce ? -200 : 0) .animation(.interpolatingSpring(stiffness: 100, damping: 10), value: bounce) Button("Bounce") { bounce.toggle() } .padding() } } } struct BouncyAlternativeView_Previews: PreviewProvider { static var previews: some View { BouncyAlternativeView() } } ``` -------------------------------- ### Constant Speed, Acceleration, Deceleration Animation in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Illustrates animations with constant speed, acceleration, and deceleration using SwiftUI. This involves understanding and applying different timing curves to achieve realistic motion. The `animation` modifier with various `Animation` types is key. ```swift import SwiftUI struct MotionExamplesView: View { @State private var position: CGFloat = 0 @State private var selectedAnimation: AnimationType = .linear enum AnimationType: String, CaseIterable { case linear = "Linear" case easeInOut = "EaseInOut" case easeIn = "EaseIn" case easeOut = "EaseOut" } var body: some View { VStack { Rectangle() .fill(Color.blue) .frame(width: 50, height: 50) .offset(x: position) Picker("Animation", selection: $selectedAnimation) { ForEach(AnimationType.allCases, id: \.self) { Text($0.rawValue) } } .pickerStyle(.segmented) .padding() Button("Animate") { position = 200 withAnimation(animationType) { position = 0 } } .padding() } } private var animationType: Animation { switch selectedAnimation { case .linear: return .linear(duration: 1) case .easeInOut: return .easeInOut(duration: 1) case .easeIn: return .easeIn(duration: 1) case .easeOut: return .easeOut(duration: 1) } } } struct MotionExamplesView_Previews: PreviewProvider { static var previews: some View { MotionExamplesView() } } ``` -------------------------------- ### Animated Signature Drawing/Erasing with Trimming in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Creates an animated signature effect by drawing and erasing a path using the `trim` modifier. This is ideal for showcasing signatures or hand-drawn elements. It involves animating the `trim` parameters of a `Path` or `Shape`. ```swift import SwiftUI struct SignatureAnimationView: View { @State private var progress: CGFloat = 0 var body: some View { VStack { Path { $0.move(to: CGPoint(x: 50, y: 100)) $0.addQuadCurve(to: CGPoint(x: 200, y: 100), control: CGPoint(x: 125, y: 50)) $0.addQuadCurve(to: CGPoint(x: 50, y: 200), control: CGPoint(x: 275, y: 150)) $0.addQuadCurve(to: CGPoint(x: 200, y: 200), control: CGPoint(x: 125, y: 250)) } .trim(from: 0, to: progress) .stroke(Color.purple, style: StrokeStyle(lineWidth: 5, lineCap: .round)) .frame(width: 300, height: 300) .animation(.easeInOut(duration: 3).repeatForever(autoreverses: true), value: progress) Button("Animate") { progress = 1 } .padding(.top) } .onAppear { progress = 1 } } } struct SignatureAnimationView_Previews: PreviewProvider { static var previews: some View { SignatureAnimationView() } } ``` -------------------------------- ### Cross-Fade Numeric Transition in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Demonstrates a cross-fade transition for numeric values, commonly used for counters or timers. This effect requires managing the state of the displayed number and animating its change. SwiftUI's built-in transition modifiers can be leveraged for this. ```swift import SwiftUI struct CrossFadeNumericTransition: View { @State private var count = 0 var body: some View { VStack { Text("\(count)") .font(.system(size: 72, weight: .bold)) .foregroundColor(.purple) .transition(.crossfade) Button("Increment") { withAnimation { count += 1 } } .padding() } } } struct CrossFadeNumericTransition_Previews: PreviewProvider { static var previews: some View { CrossFadeNumericTransition() } } ``` -------------------------------- ### Slide to Unlock Animation in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Implements a slide-to-unlock mechanism with visual feedback. This animation typically involves gesture recognition and property animators to create a smooth sliding effect. Dependencies include SwiftUI framework. ```swift import SwiftUI struct SlideToUnlockView: View { @State private var isUnlocked = false var body: some View { ZStack { Color.blue.edgesIgnoringSafeArea(.all) Text(isUnlocked ? "Unlocked" : "Slide to Unlock") .font(.largeTitle) .foregroundColor(.white) } .overlay( Rectangle() .fill(Color.white.opacity(0.3)) .frame(width: 50, height: 50) .cornerRadius(25) .padding(.leading, isUnlocked ? UIScreen.main.bounds.width - 150 : 25) .gesture( DragGesture() .onEnded { if $0.translation.width > 100 { isUnlocked = true } } ) ) .animation(.spring()) } } struct SlideToUnlockView_Previews: PreviewProvider { static var previews: some View { SlideToUnlockView() } } ``` -------------------------------- ### Spring-Based Emotional Reactions Animation in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Implements animated emotional reactions using spring physics. This animation style provides a natural, bouncy feel, commonly seen in messaging apps. SwiftUI's `Animation.spring()` modifier is used to achieve this effect. ```swift import SwiftUI struct EmotionalReactionsView: View { @State private var reactionScale: CGFloat = 1.0 @State private var reactionOpacity: Double = 0.0 var body: some View { VStack { Image(systemName: "heart.fill") .font(.system(size: 60)) .foregroundColor(.red) .scaleEffect(reactionScale) .opacity(reactionOpacity) .animation(.spring(response: 0.4, dampingFraction: 0.5), value: reactionScale) Button("React") { reactionOpacity = 1.0 reactionScale = 1.5 DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) { reactionScale = 1.0 } DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) { reactionOpacity = 0.0 } } .padding() } } } struct EmotionalReactionsView_Previews: PreviewProvider { static var previews: some View { EmotionalReactionsView() } } ``` -------------------------------- ### Animated Dash Phase on Shape in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Utilizes `dashPhase` to animate dashes around a shape. This is effective for drawing effects, progress indicators, or decorative elements. It typically involves animating a `Shape`'s `stroke` modifier with dynamic `dashPhase` values. ```swift import SwiftUI struct DashPhaseAnimation: View { @State private var phase: CGFloat = 0 var body: some View { VStack { Circle() .trim(from: 0, to: 0.7) .stroke(style: StrokeStyle(lineWidth: 10, lineCap: .round, dash: [12, 12])) .frame(width: 200, height: 200) .rotationEffect(.degrees(-90)) .overlay( Circle() .trim(from: 0, to: 0.7) .stroke(style: StrokeStyle(lineWidth: 10, lineCap: .round, dash: [12, 12])) .frame(width: 200, height: 200) .rotationEffect(.degrees(-90)) .overlay( Circle() .trim(from: 0, to: 0.7) .stroke(Color.blue, lineWidth: 10) .frame(width: 200, height: 200) .rotationEffect(.degrees(-90)) .offset(x: -100) .shadow(radius: 10) .animation(.linear(duration: 2).repeatForever(autoreverses: false), value: phase) ) ) .onAppear { phase = 360 } Text("Dash Phase") .font(.title) } } } struct DashPhaseAnimation_Previews: PreviewProvider { static var previews: some View { DashPhaseAnimation() } } ``` -------------------------------- ### 3D Y-Rotation Animation for visionOS in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Implements a 3D Y-rotation animation, specifically tailored for visionOS applications. This effect rotates an object around its Y-axis, contributing to immersive 3D experiences. SwiftUI's `rotation3DEffect` is the primary tool. ```swift import SwiftUI struct AirPodsMaxAnimationView: View { @State private var isRotating = false var body: some View { VStack { Image(systemName: "airpodsmax") .resizable() .scaledToFit() .frame(width: 150, height: 150) .rotation3DEffect( .degrees(isRotating ? 360 : 0), axis: (x: 0, y: 1, z: 0) ) .animation(.easeInOut(duration: 5).repeatForever(), value: isRotating) Text("3D Y-Rotation") .font(.title) .padding() } .onAppear { isRotating = true } } } struct AirPodsMaxAnimationView_Previews: PreviewProvider { static var previews: some View { AirPodsMaxAnimationView() } } ``` -------------------------------- ### 3D String Character Flip Animation in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Animates flipping individual characters of a string in 3D space. This effect can be used for titles or dynamic text displays. It involves iterating through characters and applying 3D rotation to each, often with staggered animations. ```swift import SwiftUI struct CharacterFlipView: View { let text = "FLIP" @State private var animate = false var body: some View { HStack { ForEach(text.map { String($0) }, id: \.self) { char in Text(char) .font(.system(size: 72, weight: .bold)) .foregroundColor(.pink) .rotation3DEffect( .degrees(animate ? 360 : 0), axis: (x: 0, y: 1, z: 0) ) .animation(.spring(response: 0.6, dampingFraction: 0.7).delay(Double(text.firstIndex(where: {$0 == Character(char)}) ?? 0) * 0.1)) } } .onAppear { animate.toggle() } } } struct CharacterFlipView_Previews: PreviewProvider { static var previews: some View { CharacterFlipView() } } ``` -------------------------------- ### Expressive Incoming Message Animation in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Animates the appearance of incoming messages with expressive visual cues. This could involve animations like scaling, fading, or slight movements to draw attention to new messages. SwiftUI's animation modifiers are used for smooth transitions. ```swift import SwiftUI struct IncomingMessageView: View { @State private var isIncoming = false var body: some View { VStack { Text("New Message!") .padding() .background(Color.blue) .foregroundColor(.white) .cornerRadius(10) .scaleEffect(isIncoming ? 1.1 : 1.0) .opacity(isIncoming ? 1.0 : 0.0) .animation(.spring(response: 0.5, dampingFraction: 0.6), value: isIncoming) Button("Receive Message") { isIncoming.toggle() } .padding(.top) } } } struct IncomingMessageView_Previews: PreviewProvider { static var previews: some View { IncomingMessageView() } } ``` -------------------------------- ### 3D Rotation Animation for Vision Pro in Swift Source: https://github.com/amosgyamfi/open-swiftui-animations/blob/master/README.md Features a 3D rotation effect suitable for visionOS or similar immersive environments. This animation typically involves rotating an object around multiple axes to create a sense of depth. Requires careful handling of 3D transformations in SwiftUI. ```swift import SwiftUI struct VisionPro3DRotation: View { @State private var isRotating = false var body: some View { VStack { RoundedRectangle(cornerRadius: 20) .fill(Color.orange) .frame(width: 150, height: 150) .rotation3DEffect( .degrees(isRotating ? 360 : 0), axis: (x: 0.5, y: 0.5, z: 0) ) .animation(.easeInOut(duration: 5).repeatForever()) Text("3D Rotation") .font(.title) .padding() } .onAppear { isRotating = true } } } struct VisionPro3DRotation_Previews: PreviewProvider { static var previews: some View { VisionPro3DRotation() } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.