iKyle, 3 months ago

@christianselig idea for the future.

Make the inner progress always full height and then crop to the smaller height.

The width never animates.

The height animation is actually animating the crop instead.

Then 1 view animates. Then other view never animates?

christianselig, 3 months ago

@iKyle Then you get a capsule that when in the collapsed state is partially cut off

pixelscience, 3 months ago

@christianselig I see in the gist comments my recommendation: use withAnimation

christianselig, 3 months ago

Good god, aheze over on the other site mentioned the very simple solution that if you just wrap the progress update in DispatchQueue.main.asyncAfter {} it fixes it. Huh

b3ll, 3 months ago

@christianselig

lightandshadow, 3 months ago

@christianselig Moving the capsules into a ZStack and placing the frame / animate modifiers on the stack seems to fix it without a call to dispatch. Added a clipShape to mask the slider deformation at the beginning. https://gist.github.com/christianselig/eda075422436f4e4934565da001455d4?permalink_comment_id=4894242#gistcomment-4894242

christianselig, 3 months ago

@lightandshadow Just hiding the deformation at the beginning is only awarding half points :p

stevengharris, 3 months ago

@christianselig Might be overkill for you, but you can do this with SplitView (https://github.com/stevengharris/SplitView). I had to muck around a bit with insets and zorder because of Capsule, but looks pretty nice and seems responsive on height changes.

Code: struct DemoSlider: View { @State private var privateFraction: CGFloat = 0.5 var body: some View { let fractionHeight = 60 * privateFraction let height = min(50, max(10, fractionHeight)) let leadingInset = fractionHeight < height ? fractionHeight : height HSplit( left: { Capsule() .foregroundStyle(Color.green) .zIndex(1) }, right: { Capsule() .foregroundStyle(Color.black) .padding(EdgeInsets(top: 0, leading: -leadingInset, bottom: 0, trailing: 0)) .zIndex(0) .frame(height: height - 1) } ) .splitter { Splitter.invisible() } .onDrag { fraction in privateFraction = fraction } .frame(width: 400, height: height) } }

christianselig, 3 months ago

@stevengharris Oh wow, very cool! Yeah just not looking to introduce dependencies for this :(

dandylyons, 3 months ago

@christianselig

One option is to drop to the Animatable protocol. Then the height and width could animate based off of different state.

https://swiftui-lab.com/swiftui-animations-part1/

christianselig, 3 months ago

@dandylyons Oh my!

lightandshadow, 3 months ago

@christianselig If I had to guess, the overlay is expanding instantaneously to give room for its parent to animate into its eventual destination height.

stroughtonsmith, 3 months ago

@christianselig just to be aware, if you roll your own volume slider you don't get system volume control or digital crown support, which is how the volume slider in e.g. Music works. It's why I'm stuck with crappy MPVolumeView

christianselig, 3 months ago

@stroughtonsmith Have you tried MPVolumeView on device? It feels super janky compared to system Sliders, I can't even get it to work reliably, so it sorta feels like a pick your poison situation

video/mp4

stroughtonsmith, 3 months ago

@christianselig it’s real picky about hit rect. I had to update Broadcasts like twice before launch just to make dragging work on device 😪

christianselig, 3 months ago

@stroughtonsmith Did you tweak it to make it more usable? I don't understand how it's so much trickier to interact with than just a normal Slider which I assumed it would be using behind the scenes. The status of the bar also doesn't seem to match 1:1 with the system volume level?

alexr, 3 months ago

@christianselig @stroughtonsmith Here's my current take: https://gist.github.com/ohmantics/b0d44830dfd998ea5016112199145cef

stroughtonsmith, 3 months ago

@alexr @christianselig I hadn't tried a wrapper, but that seems like a good idea

christianselig, 3 months ago

@stroughtonsmith @alexr Hahah, that's very clever. What's with the super small dispatch after?

auramagi, 3 months ago

@alexr @christianselig @stroughtonsmith I also wrap MPVolumeView but with a couple of differences:

• Having MPVolumeView in the view hierarchy disables the system popup when changing volume with buttons (which I want), so I put it in a hidden UIViewRepresentable. This way, you also don’t need the dispatch async call.
• System volume changes in 0.05 increments, but the MPVolumeView slider is more granular, so I observe it instead of AVAudioSession.

christianselig, 3 months ago

@auramagi @alexr @stroughtonsmith Could you elaborate on the last point?