Tag: Animation

Despite the salty title this was a very low stress investigation. I wanted to find a way to use animation to flip my flash cards. There are many great sources to do something like this:

struct ContentView: View {
    @State var angle: CGFloat = 0    
    var body: some View {
        VStack {
            Text("contentText: frontText")
                .padding(40)
                .background(.green)
                .rotation3DEffect(.degrees(angle), axis: (x: 0.0, y: 1.0, z: 0.0))
                .animation(.default, value: angle)
            Button("Flip") {
                angle += 180
            }
        }
    }
}

Tapping the button in the above app will flip the card, and show an empty green rectangle. So how would I go about showing different (dynamic) content on the ‘back’ of the card? The idea I’m currently going with is to create a front content view and a back contentView. The back contentView begins pre-rotated, so that when the parent view gets rotated it ends up being the correct orientation,

        VStack {
            ZStack {
                FlippableContent(contentText: frontText)
                FlippableContent(contentText: rearText)
                    .rotation3DEffect(
                        .degrees(180), axis: axis)
            }
            .rotation3DEffect(.degrees(angle), axis: axis)
            .animation(.default, value: angle)
            Button("Flip") {
                angle += 180
            }
        }
...
struct FlippableContent: View {
    let contentText: String
    var body: some View {
        VStack {
            Text(contentText)
        }
        .frame(width: 300, height: 250)
        .background(.green)
    }
}

This is close, but not quite right. It always only ever shows the FlippableContent view showing rearText (sometimes forwards, sometimes reverse). I experimented with different angles on the FlippableContents, however I’m not entirely clear on exactly how multiple 3d rotation effects get combined. Not my circus, not my monkeys I guess. Tho I’m definitely a bit curious…

To fix my problem, I’ve created logic that creates different opacity values for the front and back content of the card.

extension CGFloat {
    var rearOpacity: CGFloat {
        return (self / 180).truncatingRemainder(dividingBy: 2)
    }
    var frontOpacity: CGFloat {
        return 1 - rearOpacity
    }
}

And these new functions get used in opacity modifiers in the ZStack.

            ZStack {
                FlippableContent(contentText: frontText)
                    .opacity(angle.frontOpacity)
                FlippableContent(contentText: rearText)
                    .rotation3DEffect(
                        .degrees(180), axis: axis)
                    .opacity(angle.rearOpacity)
            }

Now the view gets initialized with angle at zero, which shows the front text. When the user flips the card, angle gets increased by 180 degrees. This animates through the rotation, and hides the front face, and shows the rear face. On the next flip, the rear face gets hidden and the front face gets shown.