swiftuitogglelottie

LottieSwitch height


Im trying to place LottieSwitches on top of each other in a VStack with SwiftUI and it's leaving a larger vertical gap between the switches. Using .frame(height: XX) is correctly changing the height of the switch but it doesn't eliminate the large gap between them

VStack(spacing: 0) {
                    HStack {
                        Text("XXX")
                            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
                        LottieSwitch(animation: .named("On-Toggle"))
                              .isOn($fictionToggleIsOff)
                              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
                              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
                              .frame(height: 55)
                        Spacer(minLength: 10)
                        Text("XXX")
                            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
                        LottieSwitch(animation: .named("On-Toggle"))
                              .isOn($nonfictionToggleIsOff)
                              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
                              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
                              .frame(height: 55)
                    }
                    .padding(.leading, 20)
                    .padding(.trailing, 20)
                    HStack {
                        Text("XXX")
                            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
                        LottieSwitch(animation: .named("On-Toggle"))
                              .isOn($paperbackToggleIsOff)
                              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
                              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
                              .frame(height: 55)
                        Spacer(minLength: 10)
                        Text("XXX")
                            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
                        LottieSwitch(animation: .named("On-Toggle"))
                              .isOn($hardcoverToggleIsOff)
                              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
                              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
                              .frame(height: 55)
                    }
                    .padding(.leading, 20)
                    .padding(.trailing, 20)
}

enter image description here


Solution

  • The LottieFiles have a large padding around the animations. The solution was to use After Effects to crop any excess padding from the animations and re-save. An alternative is to use a bunch of ZStacks to deal with the excess padding