Sticker Wall – Working with combined gestures in SwiftUI ✨ Using gestures is so much fun not just for the core parts of the interface, but also as a way to quickly add config options to try out different variations without building a dedicated UI for it. 🤩 Here... are the key takeaways, which I have never thought about when working with gestures 👇show more

Each sticker supports the following gestures simultaneously: - drag to move stickers around - magnification (pinch-to-zoom) - rotation (with two fingers) - double tap to trigger the 3D layer config view However, the biggest learning for me here was that order matters a lot when using .simultaneously(with:) in SwiftUI, so I ended up using the following order:

Combining the drag gesture with other gestures, such as magnification or rotate is pretty tricky and still not perfect, because as soon as the magnification gesture is triggered after the drag, you cannot continue the drag unless you lift up all fingers and start dragging again. In case you know a better solution, please let me know! 🙌 @raunofreiberg seems to have a perfect solution here with SwiftUI:

zIndex matters a lot with stickers! This was definitely a detail which I haven't thought about before creating the prototype in code. Basically, I've ended up with a solution where the most recent sticker you interacted with gets a higher zIndex value, so it appears at the top of the stack and then resetting this change when you interact with another sticker. This way, keeping the orders correct all the time. 🙌

Using gestures as a config option trigger ✨ Probably, the most useful thing during prototyping was the ability to use gestures to quickly try out multiple things without building dedicated config interfaces. 😍 I've worked with the following config gestures: - long tap on the canvas to quickly try out different background options (look how bad the default white background looked here 😂) - simple tap on the canvas to reset all stickers back to the original starting positions (reverting all changes made with interactions) - double tap on the canvas to trigger the intro animation sequence with haptic feedback without restarting the app all the time - double tap on the sticker to trigger the 3D layer view Of course, these are non-discoverable options, but that's kind of the point and allows for rapid testing of different options and ideas with very few lines of code. 🔥

Here is a screen recording for even more details ✨ Summary: - order matters a lot when working with combined gestures - always consider zIndex, especially when dragging things around - using "config" gestures is a super fast way to try out different ideas as you build things Hope you'll find this behind-the-scenes look valuable. In the next tweet I'm planning to share how I've used metal shader to imitate mesh transform instead of a regular scaleEffect when moving stickers around. 💯 Consider following this tweet if you're interested 🙌

This is soo cool. Could we get a link to a GitHub Repo? I would love to dig deeper into this.

Thinking about sharing the code in the future 🙌 currently it’s super messy, everything in a single file with lots of commented/uncommented parts 😂

imagine they could be nfts on your home screen 😍

This is so sick, I want these holo stickers in iMessage

Thank you so much!🙌 I think the holo stickers in iMessage are much better and more advance, but I really appreciate the compliment! 🙌