These still need to be either documented specifically by the designer or eyeballed by the engineer. change opacity from 0% to 100% or Y-position from 450 to 550. The graph doesn't specify the exact changes though, e.g. Likewise, four properties are affected: fill, opacity, Y position and scale.Īssuming the curves are set up in advance, engineers need only set the transition start and duration, apply the pre-defined curve and the affected property.Four different elements are affected by this animation: two radio buttons, the title of the second card and lastly, the content of the second card.Three different animation-timing curves being applied to the elements in motion: ease-in, ease-out and a standard curve.There's two separate parts to the animation, starting at respectively 0 ms and 250 ms. Using the graph, a couple of things can be established: The graph defines which elements are being changed, so that no parts of the animation are left out. There's no need to hover over their shoulder to make sure everything's pixel-perfect. Using this, engineers can nail the specifics of the animation without having to even think about things like prototyping tools or After Effects timelines. It's the nitty- gritty of your motion design. The graph essentially serves as a companion to the animation. A better solution to collaboratively work on building and shipping your animation. You might've wondered if there was a better solution for handing over motion designs. Your instructions? Make it look like this. You'd be pissed off too, wouldn't you? Enter the animation graphĪny designer (or engineer) who's worked on motion in a team has probably come across the scenario outline above. Imagine being handed a brush, some paint, a blank canvas and a grainy printout of a Picasso. It takes too much time, isn't worth the effort, they complain.Īnd rightfully so. Unsurprisingly, even the most experienced of engineers are often hesitant to work on any form of motion design. A video or GIF and the instructions to replicate the animation. Their instructions? Make it look like this. They get handed a video that's barely a couple of seconds long, maybe a vague description of the animation, but that's probably all. Now you just need to send it over to your engineering team and it'll be implemented in no time. So you render the video of the animation, double check it to make sure everything is moving at the right pace and time, and store it somewhere safe. And in the end, you have this snazzy animation that you think will be perfect for your project. You toil for a few hours (if not days) in your prototyping tool of choice, be it Principle, Flinto, After Effects or whatnot. You might take a look at these and find some inspiration and consequently set off to create a similar animation for a project of your own. Closing the knowledge gapĪs a result of motion design’s recognition as powerful tool to enhance the user experience, the front pages of design-focused websites are at any one time filled with a dozen or so animated GIFs, featuring elements that slide, jump or scale in and out the screen. It can be an incredibly powerful tool used to guide the user to where we want or need them to go. Designers around the globe have come to the realisation that motion can be much more than a fanciful supplement to a user interface. Major companies such as Google and IBM treat motion as a key part of their design guidelines. The days that motion design sat squarely in the domain of animators and VFX specialists are long gone. Motion is an inescapable element of design these days.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |