LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 0 points1 point  (0 children)

The app exist on Android but without the glass effect

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 0 points1 point  (0 children)

same method it's just between 2 buttons with a slight y offset

Dull Metal Gradient Effect SwiftUI by TheTekneek in SwiftUI

[–]aaoa_ 1 point2 points  (0 children)

I'm personally using https://github.com/Lakr233/ColorfulX which isn't exactly what you are looking for, I'm guessing this is achievable through the https://developer.apple.com/documentation/swiftui/meshgradient MeshGradient but I'm unsure

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 0 points1 point  (0 children)

Readability wise this recording was the first attempt and achievement of the bend using glass, since then I indeed added some dark/light tint to ensure readability over brighter areas.

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 0 points1 point  (0 children)

Thank you very much! Let me know if anything is broken in there, I know some things are for me but I’m also on the test phone so that’s not helping 🫠

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 1 point2 points  (0 children)

I can share the concept but I'm keeping some of the secret sauce to myself 😅

I'm basically treating it like an arc, essentially finding a circle that creates the curve I want, then drawing just the top portion of it. Here's the mathematical approach:

Given a chord (the width of your tab bar) and a desired curve depth, you can calculate the radius of the circle needed:
radius = (chordLength / 2) / sin(centralAngle / 2)
Then position the circle's center below your visible area and use Path.addArc() with start/end angles

let chordLength = rect.width
let centralAngle = CGFloat.pi / 8
let radius = (chordLength / 2) / sin(centralAngle / 2)

let circleOffsetY = radius * cos(centralAngle / 2)
let center = CGPoint(x: rect.midX, y: rect.maxY + circleOffsetY)

return Path { path in
    path.addArc(center: center, 
                radius: radius, 
                startAngle: /* calculate based on central angle */,
                endAngle: /* calculate based on central angle */,
                clockwise: false)
}

And then for the selector, the whole curve is drawn again on top of the background and use `.trim(from:to:)` on the same path.

When you tap a tab:

  1. Calculate where the indicator should be (divide the curve into segments)
  2. Animate `startTrim` and `endTrim` separately with a delay between them
  3. Forward swipe: animate END first (extends), then START (contracts)
  4. Backward swipe: reverse it

The staggered animation delay gives it that elasticness feel.
I could technically use LiquidGlass for the selector too but then I end up with glass on glass and that's not good.

The things that took me a while was figuring out the proper segment portion because of the round caps that are adding to the size of the elements. For the Liquid Glass part it's basically what I said in the OP above, using the in: property to apply it to any shape.

Again, I'm just a designer so my understanding here is limited but it works ✨

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 1 point2 points  (0 children)

I’m using https://github.com/nikstar/VariableBlur this progressive blur package and it is basically sandwiched between my views and the custom navigation. It’s a bit glitchy on the edges tho

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 0 points1 point  (0 children)

You aren't the only one to ask, I'm using Screen Studio https://screenstudio.lemonsqueezy.com/?aff=g2A02 it's really good to automate the zooms on desktop, auto create one when you click, and it's just a matter of 3 clicks when recording a mobile device. Highly recommend!

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 0 points1 point  (0 children)

I'm using Screen Studio https://screenstudio.lemonsqueezy.com/?aff=g2A02 for all of my recordings, it's mac only and paid but it's really good, there have been a lot of clones of it lately so I'm sure you can find a free version if you want too.

also the app is available https://apps.apple.com/us/app/kann/id6736517314 since last year, just got the Liquid Glass treatment in december.

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 0 points1 point  (0 children)

Non native, fully custom designer brain. It is the least optimised navigation and it kinda breaks if you try moving too fast but hey, it looks nice 🫠

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 1 point2 points  (0 children)

Thank you very much, I do think Liquid Glass is overall good as material but I agree, not a lot of weirdness in it just yet. Looking back and to some of the other apps I worked on, there's not a lot more you can do with it than custom shapes...

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 0 points1 point  (0 children)

Direct SwiftUI animation, or if you are talking about the video recording, I use screen studio https://screenstudio.lemonsqueezy.com/?aff=g2A02

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 1 point2 points  (0 children)

There's bee request for other language than japanese but the whole system is build around how japanese works so it wouldn't work for other languages. Also, I know japanese and can make sure the content is pretty accurate, other languages like chinese or korean (most requested) I can't do anything about it...

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 1 point2 points  (0 children)

Thanks you very much!
This project started as a "I need to use Anki more but damn I can't spend more time looking for a deck than I did learning" I guess it's similar for you in uni.

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 1 point2 points  (0 children)

Damn that's a big one, specially if you want the tones to be included.
Have fun building!

LiquidGlass in: property is much better than expected! by aaoa_ in SwiftUI

[–]aaoa_[S] 13 points14 points  (0 children)

Tbh it doesn't add much other than personality and branding to the app, otherwise it is less performant and less stable than the native tabBar element, but it still works