BLACK FRIDAY SALE: Save big on all my Swift books and bundles! >>

SOLVED: Layer animation with SwiftUI?

Forums > SwiftUI

I'm trying to re-create my app, originally created UIKit and Objective-C back in 2009, using SwiftUI. I have a view animated like this:

[self.phaseCell.layer addAnimation:[AnimationManager transitionFromRight] forKey:@"From Right"];

And here is the animation code:

+ (CATransition *)transitionFromRight
{
    return [AnimationManager animation:kCATransitionFromRight];
}

+ (CATransition *)animation:(NSString *)direction
{
    CATransition *animation = [CATransition animation];
    [animation setDelegate:(id<CAAnimationDelegate>)self];
    [animation setType:kCATransitionPush];
    [animation setSubtype:direction];
    [animation setDuration:0.5f];
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

    return animation;
}

The question is: is it possible to achieve the same effect in SwiftUI?

   

Sasha shares some ancient code then asks:

Is it possible to achieve the same effect in SwiftUI?

Yikes that Objective C code is scary, Saturn return-type stuff! It's a great advertisement for adopting SwiftUI!

Is it possible? First it's hard to decode what the old code is doing. Lacking a full stellium, I'm left to guess that this code animates text to simulate it sliding on screen from the right side? For fun, you added some variables for delays?

(Hint: save a JPEG of the animation and provide a link in your post!)

But without even seeing a working sample, I'll go out on a limb and suggest you look at examples using matchedGeometryEffect()

With a bit more retrograde it could be similar to the MagicMove effect in KeyNote. But in the realm of creation it's quite possible!

@twoStraws wrote a decent article about matchedGeometryEffect(). Bonus he even used a star example! (Taylor Swift)

See -> Slick Transition

   

Here is what this animation does:Animation

   

Here is the solution

Unfortunately, I don't have a clear idea of the details of how this code works, but I was able to reproduce it in my project.

   

Sasha found a solution in another web site, but stopped short of understanding it.

Unfortunately, I don't have a clear idea of the details of how this code works

Don't give up! This is a learning forum. Try the Rubber Duck 🐤 technique.

I've pasted the magic part of the code below.
The variable index holds the current moon phase (0, 1, 2, 3, or 4) Notice how index is in both the Image and the Text views? This is important. Whenever the index changes, the HStack must redraw itself based on the new value of index.

So, grab a piece of paper and draw for yourself.
What does the HStack look like when the value is 3? Draw it!
What does the HStack look like when the value is 4? Draw this also!
Put your two drawings side-by-side.

The magic occurs with the transition modifier!
As the old HStack is removed, it is moved towards the .leading edge and fades out. At the same time, the new HStack is inserted into the view. It moves in from the .trailing edge, and fades in.

These two transitions work together making a smooth motion animation.
Way cool.

// ---- @ChrisR provides the solution
// ---- snip ---------
    HStack {
        Image(systemName: phases[index].image)    // This draws the moon graphic
        Text(phases[index].name)                  // next to the moon phase text.
    }
    .id(index)
    .frame(maxWidth: .infinity)
    .transition(.asymmetric(insertion: .move(edge: .trailing ).combined(with: .opacity),      // new view is inserted
                            removal:   .move(edge: .leading  ).combined(with: .opacity)))     // old view is removed

   

Hacking with Swift is sponsored by RevenueCat

SPONSORED In-app subscriptions are a pain to implement, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app. Oh, and it's free if your app makes less than $10k/mo.

Learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.