animation lets view jump - ios

Question

I created a list of cells which are collapsable. It works quite well, but the title headed jumps around while being animated, as you can see in this small video. It should stay put in place. What am I doing wrong? Thanks
A compilable code can be found here: https://gitlab.com/vikingosegundo/brighter-hue
// LightCell.swift
let rowHeight = 36.0
let collapsedCellHeight = 80.0
let uncollapsedCellHeight = 180.0
let material:Material = .thickMaterial
struct LightCell: View {
init(light: Light, rootHandler: #escaping (Message) -> ()) {
self.rootHandler = rootHandler
self.light = light
self.isOn = light.isOn
self.hue = light.hue
self.sat = light.saturation
self.bri = light.brightness
self.ct = Double(-light.ct)
self.interface = light.display
self.selectedMode = light.modes.contains(.hsb) ? .hsb : .ct
self.values = light.modes.contains(.hsb) ? .hsb(light.hue, light.saturation, light.brightness) : .ct(light.ct, light.brightness)
}
var body: some View {
cellLayout
.frame( height: isCollapsed ? collapsedCellHeight : uncollapsedCellHeight)
.modifier(Height(isCollapsed ? collapsedCellHeight : uncollapsedCellHeight))
.swipeActions(edge: .leading ) { toggleColorMode }
.swipeActions(edge: .trailing) { toggleInterface }
.listRowBackground( bgColor )
.tint(hsbColor(opacity: 0.5))
.padding(.top, 15)
.padding(.bottom, 15)
.buttonStyle(PlainButtonStyle())
.onChange(of:light.ct ) { ct = Double(-$0); values = .ct (-$0, light.brightness) }
.onChange(of:light.hue ) { hue = $0; values = .hsb(-$0, light.saturation, light.brightness) }
.onChange(of:light.saturation) { sat = $0; values = .hsb(light.hue, $0, light.brightness) }
.onChange(of:light.brightness) { bri = $0; values = .hsb(light.hue, light.saturation, $0 ) }
}
private let rootHandler: (Message) -> ()
private let light: Light
#EnvironmentObject
private var viewState: ViewState
#State private var values: Values
#State private var isOn : Bool
#State private var hue : Double
#State private var sat : Double
#State private var bri : Double
#State private var ct : Double
#State private var interface : Interface
#State private var startPoint : CGPoint?
#State private var currentPoint : CGPoint?
#State private var isCollapsed : Bool = true
#State private var selectedMode : Light.Mode
}
private
extension LightCell {
private
var cellLayout: some View {
VStack {
cellheader;
if light.modes.contains(.hsb) || light.modes.contains(.ct) {
switch (selectedMode, light.display) {
case (.ct, .slider):
Spacer() .isCollapsed(isCollapsed)
ctSliderRow.isCollapsed(isCollapsed)
case (.hsb, .slider):
Spacer() .isCollapsed(isCollapsed)
hueSliderRow.isCollapsed(isCollapsed);
satSliderRow.isCollapsed(isCollapsed)
case (_, .scrubbing):
scrubbingView.isCollapsed(isCollapsed)
}
}
briSliderRow
}
}
private
var toggleColorMode: some View {
HStack {
if !isCollapsed{
let indexedModes = light
.modes
.filter { $0 != selectedMode }
.enumerated()
.map { (idx: $0.offset, mode: $0.element) }
ForEach(indexedModes, id: \.idx) { i in
Button { selectedMode = i.mode } label: { image(for: i.mode) }
}}
}
}
private
var toggleInterface: some View {
HStack {
if !isCollapsed{
Button {
rootHandler(.lighting(.change(.display(light.display == .slider ? .scrubbing : .slider), on:light)))
} label: { Label("", systemImage:
light.display == .slider
? "slider.horizontal.below.rectangle"
: "slider.horizontal.3")
}}
}
}
private
var cellheader: some View {
HStack {
Button {
withAnimation { isCollapsed.toggle() }
} label: {
Image(systemName:"chevron.up")
.foregroundColor(hsbColor(opacity:0.75))
.contentShape(Rectangle())
.rotationEffect( .radians(isCollapsed ? .pi : 0.0))
}
titleLabel
.multilineTextAlignment(.leading)
Spacer()
toogle
}
.rowStyle(height:rowHeight)
}
private
var titleLabel: some View {
Text("\(light.name)")
.bold()
.dynamicTypeSize(.xLarge)
.fixedSize()
}
private
var toogle: some View {
Toggle("", isOn: $isOn)
.onChange(of: isOn) { _ in
switch (light.isOn, isOn) {
case (true, false): rootHandler(.lighting(.turn(light,.off)))
case (false, true): rootHandler(.lighting(.turn(light,.on )))
case ( _ , _ ): ()
}
}
}
private
var scrubbingKnob: some View {
HStack {
Spacer()
Circle()
.fill(
LinearGradient(gradient: Gradient(colors: [hsbColor(saturation:1.0, opacity: 0.5),
hsbColor(saturation:1.0, opacity: 0.5),
hsbColor(saturation:0.1, opacity: 0.5),
hsbColor(saturation:0.1, opacity: 0.5)]),
startPoint:.top, endPoint:.bottom)
)}
.frame(minWidth: 20, maxWidth: 20, minHeight:20)
.offset(x:(currentPoint?.x ?? 0) - (startPoint?.x ?? 0), y:(currentPoint?.y ?? 0) - (startPoint?.y ?? 0))
.gesture(
DragGesture(
minimumDistance: 5,
coordinateSpace: .global
).onChanged{ n in
if let startpoint = startPoint {
switch selectedMode {
case .hsb:setHueAndSaturationFor(
distanceX: ( n.location.x ) - (startpoint.x),
distanceY: ( n.location.y ) - (startpoint.y))
case .ct: setCTfor(
distanceX: ( n.location.x ) - (startpoint.x),
distanceY: ( n.location.y ) - (startpoint.y))
}
}
switch startPoint == nil {
case true : startPoint = n.location
case false: currentPoint = n.location
}}
.onEnded { _ in startPoint = nil; currentPoint = nil } ).padding(.bottom, 20)
}
private
var scrubbingView: some View {
ZStack {
VStack {
Spacer()
scrubbingKnob
Spacer()
}
}
.contentShape(Rectangle())
}
private
var ctSliderRow: some View {
HStack {
Button {
rootHandler( .lighting(.increase(.colortemp,by:10.pt,on:light)) )
} label: {
Image(systemName:"thermometer.snowflake")
.foregroundStyle(ctColor(ct:(Double(light.ct) * 1.2)))
.accessibility(label:Text("increase color temperature"))
}.frame(width: 24)
Slider(value: $ct, in: (-500)...(-153)) { _ in rootHandler( .lighting(.apply(.values(.ct(Int(-ct),bri)),on:light))) }
.accessibility(label:Text("change color temperature"))
Button {
rootHandler( .lighting(.decrease(.colortemp,by:10.pt,on:light)) )
} label: {
Image(systemName:"thermometer.sun")
.foregroundStyle(ctColor(ct:(Double(light.ct) * 0.8)))
.accessibility(label:Text("decrease color temperature"))
}.frame(width: 24)
}
.rowStyle(height: (selectedMode == .ct && !isCollapsed) ? rowHeight : 0)
.opacity((selectedMode == .ct && !isCollapsed) ? 1.0 : 0.0)
}
private
var briSliderRow: some View {
slider(
bind: $bri,
leading:
.init(action: {
rootHandler( .lighting(.decrease(.brightness,by:10.pt,on:light)) ) },
image: .system("sun.min"),
color: hsbColor(brightness: min(max(light.brightness - 0.05, 0.1), 1.0)),
accessibility: "decrease brightness"),
slider:
.init(action: { rootHandler( .lighting(.apply(.values(.bri(bri)),on:light))) },
accessibility:"change brightness"),
trailing:
.init(action: {
rootHandler( .lighting(.increase(.brightness,by:10.pt,on:light)) ) },
image: .system("sun.max.fill"),
color: hsbColor(brightness: min(max(light.brightness + 0.05, 0.1), 1.0)),
accessibility: "increase brightness")
).rowStyle(height: rowHeight)
}
private
var hueSliderRow: some View {
slider(
bind: $hue,
leading:
.init(action: { rootHandler( .lighting(.decrease(.hue,by:10.pt,on:light)) ) },
image: .system("paintpalette"),
color: hsbColor(hue: min(max(light.hue - 0.05, 0.1), 1.0)),
accessibility: "decrease saturation"),
slider:
.init(action: { rootHandler( .lighting(.apply(.values(.hsb(hue, sat, bri)),on:light))) },
accessibility: "change saturation"),
trailing:
.init(
action: { rootHandler( .lighting(.increase(.hue,by:10.pt, on:light)) ) },
image: .system("paintpalette"),
color: hsbColor(hue: min(max(light.hue + 0.05, 0.1), 1.0)),
accessibility: "increase saturation")
)
.rowStyle(height: (selectedMode == .hsb && !isCollapsed) ? rowHeight : 0)
.opacity((selectedMode == .hsb && !isCollapsed) ? 1.0 : 0.0)
}
private
var satSliderRow: some View {
slider(
bind: $sat,
leading:
.init(action: { rootHandler( .lighting(.decrease(.saturation,by:10.pt, on:light)) ) },
image: .system("circle.lefthalf.fill"),
color: hsbColor(saturation: min(max(light.saturation - 0.25, 0.1), 1.0)),
accessibility: "decrease saturation"),
slider:
.init(action: { rootHandler( .lighting(.apply(.values( .hsb(hue, sat, bri)),on:light))) },
accessibility: "change saturation"),
trailing:
.init(
action: { rootHandler( .lighting(.increase(.saturation,by:10.pt, on:light)) ) },
image: .system("circle.righthalf.fill"),
color: hsbColor(saturation: min(max(light.saturation + 0.25, 0.1), 1.0)),
accessibility: "increase saturation")
)
.rowStyle(height: (selectedMode == .hsb && !isCollapsed) ? rowHeight : 0)
.opacity((selectedMode == .hsb && !isCollapsed) ? 1.0 : 0.0)
}
private
func imageForSlider(conf: SliderButtonConf.ButtonImage) -> Image { switch conf { case .system(let name): return Image(systemName: name) } }
private
func slider(
bind: Binding<Double>,
leading:SliderButtonConf, slider:SliderConf, trailing:SliderButtonConf) -> some View {
HStack {
Button {
leading.action()
} label: {
imageForSlider(conf: leading.image)
.foregroundStyle(leading.color)
.accessibility(label:Text(leading.accessibility))
}.frame(width: 24)
Slider(value: bind){ _ in
slider.action()
}.accessibility(label:Text(slider.accessibility))
Button {
trailing.action()
} label: {
imageForSlider(conf: trailing.image)
.foregroundStyle(trailing.color)
.accessibility(label:Text(trailing.accessibility))
}.frame(width: 24)
}
}
}
fileprivate
struct SliderButtonConf {
let action: () -> ()
let image: ButtonImage
let color: Color
let accessibility:String
enum ButtonImage {
case system(String)
}
}
fileprivate
struct SliderConf {
let action: () -> ()
let accessibility:String
}
private
extension LightCell {
func selected(_ mode: Light.Mode) { selectedMode = mode }
}
fileprivate
extension View {
#ViewBuilder func rowStyle(height:Double) -> some View {
self.frame(height:height)
.padding(.trailing, 15)
.padding(.leading, 15)
.background(material, in: RoundedRectangle(cornerRadius: 5))
}
#ViewBuilder func isCollapsed(_ isCollapsed:Bool) -> some View {
self.opacity(isCollapsed ? 0 : 1).frame(maxHeight: isCollapsed ? 0 : .infinity)
}
}
fileprivate
struct Height: AnimatableModifier {
init(_ height: Double) {
self.height = height
}
private var height = 0.0
var animatableData: Double {
get { height }
set { height = newValue }
}
func body(content: Content) -> some View {
content.frame(height: height)
}
}