CODEWITHSUNDEEP
animationswiftuitransition
Ilias Karim
Ilias Karim

Reputation: 5397

SwiftUI springy scale "pop" transition

Given some shape, I want to make it pop onto the screen.

if showShape {
  Rectangle()
    .frame(width: 100, height: 50)
    .transition(.scale)
}

How could a custom Transition replace the scale animation in this example with one that uses springlike physics to scale the shape when it appears when showShape gets toggled by the user?

Upvotes: 0

Views: 301

Answers (2)

Vlad Grigorov
Vlad Grigorov

Reputation: 11376

Use this if you need control over animation duration and bounciness:

if showShape {
    Rectangle()
        .frame(width: 100, height: 50)
        .transition(.asymmetric(
            insertion: .scale.animation(.spring(duration: 0.2, bounce: 0.6)),
            removal: .opacity
        ))
}

Upvotes: 0

Radioactive
Radioactive

Reputation: 700

From my understanding of what you're trying to make, here is the code that makes the scale effect springy:

if showShape {
  Rectangle()
    .frame(width: 100, height: 50)
    .transition(.scale.animation(.spring))
}

And you can make it extra springy with .springy(bounce: <#Double#>)

Upvotes: 1

Related Questions