A single component's animation is messing up the whole view — SwiftUI

Question

I'm building a SwiftUI app for my wife. Her avatar pulses with a repeating animation. It looks cool and seems to work just fine on its own. This is a component that lives in its own SwiftUI file.

When I bring a bunch of the components together to create a view, however, the animation messes it all up.

What a mess, right?

I assumed this happened because I did not define the width of the view. I used the fix from this issue, but it didn't make a difference.

I'm feeling pretty stuck here. Here's the repo for the project, with the code for this view. Does anyone have an idea for how I can fix this animation issue?

E.Coms · Accepted Answer · 2019-12-31T01:47:58.493

1

You need to remove the animation(nil) in the AvatarComponent

You also need to change all .frame(width: 352) to .frame(width: UIScreen.main.bounds.size.width)

edited Dec 31 '19 at 01:47

answered Dec 30 '19 at 21:13

E.Coms

11,065
2
23
35

Ah! Thanks. That fixes the issue with the pulsing not lining up with the avatar, but the whole page still shrinks and grows (like in the gif above) when the avatar is animating. Do you know why that might be happening? – Christopher Davis Dec 31 '19 at 00:13

score 0 · Answer 2 · answered Dec 31 '19 at 05:42

0

The answer from E.Coms above was very helpful! But instead of replacing the width (325) of all my UI elements, I appended .frame(width: UIScreen.main.bounds.size.width) to the top-level wrapper. It seems to work just fine now!

answered Dec 31 '19 at 05:42

Christopher Davis

99
6

A single component's animation is messing up the whole view — SwiftUI

2 Answers2