UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

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.
    .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


TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

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

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

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.