Sketch, as many of you might have worked with, is a vector-based tool. The way that we built the animations and interactions was using Sketch, then going into PaintCode, and finally going into Xcode via code. We’re going to talk how we did it for this interaction in Fitbit, and I’ll also mention a few ways you can explore other solutions as well. Our first question was, “Okay, that’s cool, but how in the world do I build this?” There are a number of different ways. We now had something to start with, and a goal of what we wanted to make it look like.
QUARTZCODE LATEST VERSION MOVIE
The benefit of working with Drew on this is he just came along and said, “How about we do something cool with it,” and he put together a movie in After Effects. Besides that, our illustrators came up with these really cool, little illustrations. The first thing to keep in mind is that at the top-right we added a “done” button because even though I would like people to really enjoy this, sometimes you don’t want to go through onboarding. The last thing we wanted to do was create another set of onboarding screens that nobody wanted to read.
It keeps track of how much you’ve moved every hour during a certain window and also helps remind you when to move so you can get 250 steps to keep active. When we were working on some of the other features in the app a little bit later, we were thinking, “Okay, what could we use to really spice this up?” We wanted to create an onboarding experience around hourly activity and reminders to move, both features that came out alongside the FitBit Alta. It’s this really delightful, little, happy moon. This little interaction comes up whenever we were introducing sleep goals, but also whenever you start “sleep” in the app. It all started when a different iOS developer at Fitbit, named Aidan, and a designer on our team, Drew Matthews, came up with this really fun interaction for our sleep screen. The second part is about animations, in particular, Core Animation, which I think is not as hard as many people might think. It’s how we’ve done something before, how it worked out, and how you can do it next time. The first part is taking a complex interaction and getting it into a state where we can animate it. Let’s use the power of CALayers to make your app memorable.
QUARTZCODE LATEST VERSION CODE
In this talk, we’ll use code samples to go through different animations and discuss how you can use these techniques in your app. Using tools such as CALayer and CATransaction we can create a high resolution, vector-based, animated sequence that delights users. The basis for many great experiences lies in Core Animation. iOS provides a number of tools to create these experiences, but it can take some work to get the most out of them.
Many times, the most memorable part of an app is an intricate, animated experience.
0 kommentar(er)
