![]() ![]() The other group of tools focus primarily on effectiveness: the ability to very quickly produce a good result that conveys the broader strokes of your custom animation, with enough quality to convince your stakeholders. While After Effects feels more organic to use because of its drag-and-drop style interface, Origami (and in an extreme example Framer) allows you to communicate the design to a developer in an easier way to understand and replicate. This is especially relevant for animated illustrations, loading spinners or splash screens. I would consider any of these tools as ideal for when a specific animation was prototyped and accepted by all important stakeholders, but needs a level of refinement harder to achieve in more simplified tools. Another tool of this type which I didn’t have time to test is Framer, which combines design tools similar to Sketch, with a code-based approach to creating animation. Hard to learn and to master, they can be great tools in the hands of an animator, but aren’t necessarily designed for rapid prototyping, since they lack automation features and pre-made libraries to speed up the prototyping work. Origami takes a programmatic approach to animation, by linking attributes and triggers to individual nodes, which combine in tree branches to create the interaction states.ĭue to their focus on flexibility, they are also overwhelming and potentially overkill. After Effects explores animation through the perspective of time, by placing each layer and attribute change to an editable timeline. ![]() While boasting completely different animation paradigms, they are both designed to create an animation down to the finest detail, and to that end give you complete control over each animation attribute. ![]() Within the tools designed for flexibility, I would include After Effects and Origami. Other tools I have previous experience with will also be mentioned along the way.Īll the tools tested had varying degrees of flexibility and effectiveness, depending on their main goal: to create pixel perfect complex animations, or to quickly prototype an animated interaction. #Timing animations in flinto download#The goal was to download each tool, follow some tutorials to learn the basics and create the prototype in less then a day each. The tools I tested were: After Effects, Principle, Atomic.io, Proto.io, Origami Studio and Flinto. Within this short time-frame, I decided to evaluate 6 tools, and committed to reproducing the general animations in all of these – to properly establish how well they would fit our workflow. Fine-tune timings for animation triggers.Manage numerous layers and groups imported from Sketch.Control clip size and position of masked shapes.Manipulating size, position and rotation of shapes. ![]() To conduct this casual experiment, I came up with a sample design that uses very simple, non-obtrusive animations that were meant to highlight some of the different features/limitations of each tool: As a designer trying to focus on the busy day-to-day of a project, it’s hard to fit experimentation with new tools into the workflow, and to commit to using new tools for your project.įortunately, this past week I had the chance to try out some of the tools that have popped up lately, and get a sense of what they offer and how they can serve the types of projects we do at Scott Logic. In the last few years prototyping tools, in particular those focusing on animation, have seen tremendous growth. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |