Bringing Flavour to Motion, and Flow
Easing curves are an integral part of animation. They give animators a greater ability to infuse their work with character and style. Long have they been a part of the design and development world. Going back decades, we remember one of the earliest and more renown sources for learning about programming motion was Robert Penner’s work.
Today we’re really proud to introduce a feature that many people have been requesting for some time now, the easing curve editor. For us, this is an interesting feature because it brings an incredible amount of new creative power, and it was a ton of work to implement properly. It is also a feature that may easily be taken for granted, because a slew of standard curves and the ability to create them have been around for a long, long while.
Let’s have a look at what we’ve built.
The Easing Curve Editor
Our crack at an easing curve editor has three main components:
- A picker for the standard set of curves.
- A viewer to see the form of a curve – and edit it of course.
- A list of custom curves that have been created manually.
The look and feel of the window falls directly in line with Flow’s main interface – simple, clean and easy to understand. The user experience follows the same philosophy, simple things like:
- Selecting a curve updates the editor (if visible).
- You can duplicate standard curves and edit them thereafter.
- Creating a custom curve automatically generates its reverse.
- Edits to curves can be seen in real-time while your animation loops.
There’s more, but that’s the gist, so let’s have a look at the editor in action.
Using the Curve Editor
Like before, clicking on a curve in the timeline will bring up your options. Now, instead of a popup we have a floating window.
You can preview any curve by opening up the editor, which updates whenever a new curve is selected.
You create a custom curve by duplicating one that already exists. Then, you can edit the curve by dragging its control points. If your animation is looping, you can see the changes in real-time.
Everything You Do Is Encodable
The entire focus of Flow is to give you real possibility with your designs. Our goal is to bring you tons of creative capability, all of which can be directly translated to code – i.e. everything you can do in Flow is encodable.
This is one of the main reasons it took so long for us to get to release such a feature that is standard in other animation tools. Here’s a bit of breakdown:
- Version 1.2 had a major focus on performance – if Flow beachballs all the time it doesn’t matter if you can make pretty things.
- Version 1.3 focused on improved importing – if you can’t get your designs into Flow then there’s no point in even thinking about animation.
- Version 1.4 introduced a massive overhaul to the infrastructure for how we handle animations, and it also introduced drivers. We needed to figure out how to handle keyframe animations in iOS and HTML.
Flow is getting stronger by the release. As it does, the more accurate your animations will translate to real, solid code.
Code that developers will actually use.
Next… Layers.is
We’re participating in an awesome conference coming up in June. The Layers Conference is about design, technology, and art / ethics / business / learning / creativity / snacks.
If you’re into design, animation, interaction, and are in San José you should really do everything you can to get out to this conference. Let us know if you’re going to be around, we’d love to meet up with you!
Wait. What’s Flow?!?!
Great question.
Flow is a UI Animation and code export tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by exporting production-ready native code for iOS and HTML.
If you’re not already familiar with our product please have a look at our previous article:
Our Site
If you want to know more about the product, just visit our website:
Get a Copy
If you want to try it out, grab a copy from:
…where you can get a license and a .dmg with all our love and hard work bundled within.
Get in Touch
Have some more questions? Connect with us at:
Or, Slack Us…
❤
