100-days-of-swiftui-and-combine/day-033

Day 33: Project 6: Animation (Part Two)

Follow along at https://www.hackingwithswift.com/100/swiftui/33.

📒 Field Notes

This day covers Part Two of Project 6: Animation in the 100 Days of SwiftUI Challenge. (Project 6 files can be found in the directory for Part One.)

It focuses on several specific topics:

• Controlling the animation stack
• Animating gestures
• Showing and hiding views with transitions
• Building custom transitions using ViewModifier

Controlling the animation stack

Views can have multiple .animation modifiers, and each one operates on changed properties up to any previous .animation modifier in the view stack.

This makes perfect sense when you think of .animation modifier as a book tab -- separating a stack of modifiers into composable sections, each with their own animation logic.

Animating gestures

Gestures allow us to hook into the current "gesture state" whenever it changes or completes... making them perfect for updating our own state that we're trying to animate -- such as the offset of an element that we want to make draggable.

Showing and hiding views with transitions

Transitions allow us to animate a view as it's dynamically shown or hidden. The also demonstrates the power of explicit animation via withAnimation -- because they allow us to animate state from one view that might be used to define a completely separate view:

VStack {
    Button(action: {
        withAnimation(.easeInOut(duration: 0.4)) {
            self.isShowingSquare.toggle()
        }
    }) {
        Text("Tap Me 🕺")
            .font(.largeTitle)
    }

    if isShowingSquare {
        Rectangle()
            .fill(Color.pink)
            .frame(width: 200, height: 200)
            .transition(.asymmetric(insertion: .scale, removal: .opacity))
    }
}

📸 Screenshots