Experimenting with motion in Android
This year Juhani Lehtimäki and I are attending a few conferences giving a talk on the topic “Meaningful animations and how to implement it”.
During the presentation we show how designers and developers can collaborate together to create meaningful motion on Android and which tools they use in their workflow.
We bring as examples real use cases taken from one of our internal projects, Shutter Points (Juhani explained more in detail the idea behind the app in a previous post).
In this post I want to describe from a design point of view the different approaches and tools that we experimented with, in order to implement one of these animations.
The use case
Shutter Points welcomes the user with a simple screen that presents the app and introduces the user to the onboarding flow.
We weren’t quite happy with the static version of this screen, therefore we decided to turn the hero image into an animated graphic.
The goal was to add delight to the first user experience and to describe better the purpose of the app.
Approach no. 1: Sketch + Android Studio
Every good teamwork start with communication. Especially for complex implementations like animations, it’s important that designers and developers are on the same page from the very beginning.
The first step requires to share ideas and discuss possible solutions.
/ Design
I usually create my animation assets in Sketch using a sequence of artboards to represent the keyframes of the animation.
In some cases I put together a quick video or prototype to better visualise the concept/idea (Adobe XD or Invision Studio are great tools for this purpose).
At this stage the better the idea is communicated, the better developers can identify constraints and estimate its feasibility.
For the first iteration we decided to keep the concept simple and implement the animation natively in Android Studio.
/ Export
It is responsibility of Design to provide the correct assets necessary for the implementation. As Nick Butcher mentions, there are at least 3 good reasons to choose vectors over raster assets (I let you find them out reading his great post).
But before handing over vectors to devs, it’s worth taking a look at the different vector paths and make sure that those are optimised for the export.
In this case, I took the original Sketch graphics and tweaked them a bit before exporting:
- I replaced the round mask containing the city skyline with a solid shape
(⚠️ AndroidStudio doesn’t support .svgs with masks) - I merged to one shape all the paths having the same color
- I replaced fills containing alpha values with fully opaque colors
These small changes simplified the output and reduced the weight of the exported files.
/ Handover and Implementation
Going for the native implementation in AS requires all the moving elements of the animation to be exportable as separate assets. Zeplin is still our preferred tool for the handover, no matter if the original design is created in Sketch or Figma.
We had to go through a couple of iterations to get the implementation right. Getting the correct timing and easing is essential to make the animation feel natural. This phase required some extra-effort on both design and development side. As a first attempt, the result was not bad.
Approach no. 2: Shapeshifter
As second trial we took a different approach and we re-created the animation using shapeshifter.design.
Shapeshifter is a powerful tool created by @alexjlockwood that empowers designers to turn static .svgs into beautiful animations (Kudos to Alex for this lovely gift 🙏).
/ Design
Before jumping to the magic of Shapeshifter, I made sure that all the assets were exported inside artboards of the same size. This ensured later on that .svgs were correctly imported at the right scale and position inside the canvas.
Hint:
Using SVGO compressor plugin for Sketch makes sure that the assets are exported at the minimum weight possible.
Designing in Shapeshifter is easy and fun. Once the path groups are imported you just need to hit the little timer icon to start animating them.
The main thing to consider in Shapeshifter is that Paths and Groups have different properties. Therefore also the attributes that can be animated differ between single paths and groups of paths.
In our case, for instance, I animated the four colored bubbles applying:
- group properties “translateX” and “translateY” to make them move
- path property “fillAlpha” to have them fading in.
To finalise the movement of my objects I just chose a different interpolator (there’re 11 variables to pick from). I wanted a bit of bounce effect so I went for Overshoot.
/ Export
At this point I was ready to export my sequence, I hit the export button and let ShapeShifter take care of the rest. The result of the export is an AVD (animated vector drawable) that can be directly integrated in the code.
/ Handover and Implementation
The AVD format looks quite familiar to an Android Developer.
The power of Shapeshifter consists in the ability of exporting perfectly readable code that can be modified without the need of pushing it back to the designer.
For instance, if the designer would like to tweak the duration values or the interpolator type of an object animation, this can be done just by changing 2 lines of code.
This second approach requires more effort on design side to build the animation, but it definitely reduces the implementation cost while keeping control over the code.
Approach no. 3: AfterEffects + Lottie
In the third iteration we decided to add more details to the sequence and show the user’s hand taking a picture before the smart categories appear.
With the animation getting more complex I decided to use AfterEffects.
/ Design
AfterEffects can be used to create animations of any kind of complexity. Until a couple of years ago those animations had to be embedded in Android using videos. Today thanks to the Bodimovin extension and Lottie we can convert them into JSON files 🙌💃.
There are a few guidelines to keep in mind when creating animations for Lottie but in general the main rule is: Keep it simple. Don’t use expressions, effects or layer styles. Simple, plain shape layers work the best.
/ Export
Once having installed the Bodymovin extension, the export to JSON is quite straight forward. You just need to select the composition you want to export and the recipient folder. Lottie does the rest for you.
Hint:
Designers can directly check the output by loading the JSON file in the Lottie app.
Within the app it’s possible to check performances, review exceptions and even play with different speeds and background colors.
/ Handover and Implementation
The JSON format is not even close to the level or readability provided by the AVD. But this shouldn’t worry you too much.
The developer doesn’t even need to look at this file but just treat it as they would treat a normal image view and position it accordingly to the specs.
This approach supports the integration of much more complex animations but those can be controlled only on design side. Developers have very limited control over the animation at this stage (e.g. they can set duration and looping) and changes can be applied only by re-exporting/re-importing the file.
So, which approach is the best?
There’s no perfect approach or tool when it comes to animations. Each of the solutions we tried has pros and cons. If we were to summarise them:
1: Sketch + Android Studio
- ✅ Devs have full control of the implementation
- ❗ Bigger development effort
- ❗ Few rounds of iterations are necessary
2: Shapeshifter
- ✅ Small development effort
- ✅ Both designers and devs have control over the output
- ❗ .svg import only
3: AfterEffects + Lottie
- ✅ Small development effort
- ✅ Possible to generate complex and detailed animations
- ✅ MotionLayout compatible
- ❗ Devs have no control over the output
In conclusion it’s quite important to evaluate what type of animation you are going to implement and which resources you have, before deciding how you’re going to build it.
Choosing the right approach can save a lot of design and development time and lead to a better output.
On the other hand, if there’s time to explore different solutions, it’s good to experiment a bit, plus it’s always fun!
