CODEWITHSUNDEEP
iosswiftxcodeswiftui
ItsZiaW
ItsZiaW

Reputation: 210

Having easeIn animation and then scale animation in a sequence as the scale animation repeats forever

I want to have a easeIn/moveUp animation onAppear for the text information and SF symbols. Thereafter, I want only the SF symbols to scale up and down forever. Currently, I have managed to scale up down forever but when I managed to chain, the easeIn/moveUp animation also repeated itself forever which should only be repeated once when it appears.

This is how my app representation looks like: enter image description here

I have included a snippet of the pin animation code below:

                HStack (spacing: 20) {
                    Image(systemName: "pin")
                        .foregroundColor(.red)
                        .font(.title2)
                        .padding(.trailing, 5)
                        .scaleEffect(animationAmount)
                        .onAppear {
                            let baseAnimation = Animation.easeInOut(duration: 1)
                            let repeated = baseAnimation.repeatForever(autoreverses: true)
                            return withAnimation(repeated) {
                                self.animationAmount = 1.5
                            }
                        }
                    VStack (alignment: .leading) {
                        Text("Pin favourites").fontWeight(.semibold)
                        Text("You can pin your favourite content on all devices")
                            .foregroundColor(.gray)
                    }
                    Spacer()
                }//HStack 2

The full code is in the following page: SwiftUI - in sheet have a fixed continue button that is not scrollable

Upvotes: 2

Views: 1466

Answers (1)

Asperi
Asperi

Reputation: 258117

You can join animation with value, like below

.scaleEffect(animationAmount)
.animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true), value: animationAmount)
.onAppear {
    self.animationAmount = 1.5
}

moreover, as now animation and state joined uniquely and will not conflict with other animations/states, you can move last two modifiers to the very top container (instead of repeating them three times)

For example here:

}//VStack for 3 criterias
.padding([.leading, .trailing], 20)
.animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true), value: animationAmount)
.onAppear {
    self.animationAmount = 1.5
}

Upvotes: 2

Related Questions