![]() There’s just one problem: It’s private API, all of it. This seems like exactly what we’re looking for. I’ve also been told that there’s API in AppKit to set a window’s transform directly. Just set one of those to your layer’s meshTransform and you’re done. The next question would of course be: Is there any first party API that would let us achieve these mesh transform? I’m glad you asked, and as it turns out there is! Core Animation includes a CAMeshTransform type that does pretty much what you’d expect. That said, a mesh is perfectly suited to our use case here, and so onwards. If we wanted to recreate something like, say, the Passbook shredder animation from the days of yore iOS 6, a mesh transform simply won’t suffice, but slicing would do exactly what we need, allowing us to manipulate the slices as if they were actually cut apart, rather than separate but still connected. To be clear though, a mesh animation isn’t quite identical to the slicing technique the slicing technique affords us much more control over the exact placement and contortion of the partition, although that power does require way more code on our part. In a way, for our use case it can be seen as a different take at the snapshot slicing technique from above we just skip the steps of manually slicing up the snapshot and calculating individual transforms that make it so that the partitions all align perfectly for every frame, since the mesh system handles all of those details for us. Now you can move around any of the vertices, and all the partitions it touches will be distorted, and the partitions of the view they encompassed in the original shape will be distorted as well to fit the newly formed shapes. These vertices connect to certain neighbours to form shapes, collectively subdividing your view into a number of partitions. First you apply a set of vertices to your original shape. I’d like to assure you though that this isn’t entirely kooky, and while it was a backup strategy I didn’t end up using, the concept behind it is sound and basically what we want to achieve: being able to manipulate a view as if it’s a composite formed of multiple pieces rather than as a monolith.Īs is turns out there is indeed a concept that represents this exact behaviour: Mesh transforms. ![]() This just isn’t how animations are usually handled. I can already hear the guffaws from some of you reading this, and to be honest I wouldn’t blame you for that reaction. We can simulate the appearance of the entire shape being curved by splicing it up into small enough rectangles. One solution available to us while still sticking with the stock API here is that we don’t really need to use a single view: There’s nothing stopping us from taking a snapshot of our view and splitting it up a bunch of separate views, and then setting the frames and transforms for each of them. ![]() While we can represent the curved path using a UI/CGBezierPath, there isn’t really any way to contort a view to fit one, let alone then animate all of this. While perhaps not pixel perfect, we want something that at least comes close to matching the general vibe of the built in animation. ![]() If we ignored the curved edges - and if I had the slightest clue about how those CATransform3D matrices work - that would be much more doable, but that’s not what we’re trying to do here. If you’ve done any iOS or macOS UI work, this might seem impossible to do with a standard CALayer and the set of animation tools that ship with Core Animation. So how do we build this sort of animation. It’s almost like a liquid flowing through a funnel, albeit a rather rigid liquid. The window doesn’t just translate and scale down though, it follows the path created by the two sides. This is where the real magic of the animation comes in. Next, the window begins to translate down and scale. The rest of the window contorts unevenly, forming a curve along either side. Here’s a rough breakdown of what’s happening.įirst up, the bottom edge of the window shears, shrinking in width and shifting towards its eventual final position, while the top edge remains fixed. Here’s a clip of the standard macOS genie animation in action: Even if you’ve seen it multiple times a day for years, what it’s doing might not be entirely obvious. What Is the Genie Effect Anywayīefore we set about recreating it, we must first have a good understanding of how the animation works. This is the blog post I’d promised then, explaining how it works, and how you can build and use a similar animation in your app. But I wanted to have one little party trick in there, which led to this: If you’ve used the app, you know there just isn’t much UI in there. A few weeks ago I released Pause, a Mac app that I made to remind myself to take breaks periodically.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |