How are rich UI icon animations done?

user_2551317 0
Viewed 75

I have recently come across beautiful icon animations in Apple's Home app. This is example of opening/closing garage doors: https://giphy.com/gifs/0it1uTDtVR1Uw1FByx

I wonder how to make these animations. There are ways I can think of:

  1. Manually creating shapes and animating them in code (this would be so hard to do)
  2. Using some animation tool and exporting *.gif frames (but in this way we will lose vector graphics)
  3. Using some animation tool and exporting *.svg frames (is this efficient?)
  4. Using some animation tool that will generate code (for example JS/CSS) with all the shapes and animation (Does such tool/program exist?)

Does anyone have experience with creating this type of animations? It would be great if you could share this experience :)

user-experience icons animation user-interface
2 Answers

Obviously no answer will be exhaustive. Pure "CSS3 art" is route that I've seen people use because it can define complex geometry and animations precisely. But here are some ways I've looked into using SVGs.

You can actually embed a script tag in an SVG that animates the elements. Something like this:

<svg>
    <!-- svg objects -->
    <script><![CDATA[!
        //... Javascript to animate svg objects...
    ]]></script>
</svg>

You can also use a library like snapsvg.io where the construction of an animated svg is done purely with JavaScript. Here's the example they use for their quickstart page:

var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});
var smallCircle = s.circle(100, 150, 70);
var discs = s.group(smallCircle, s.circle(200, 150, 70));
discs.attr({
    fill: "#fff"
});
bigCircle.attr({
    mask: discs
});
smallCircle.animate({r: 50}, 1000);

Otherwise you can use a codeless animated-svg creator like this one.

Disclaimer: I haven't tested the codeless site past the demo plan and probably will never use it. My personal preference would probably be the first suggestion but a JavaScript library like snapsvg.io seems like a nice middle ground.

user_40618110

I would go with option 4. Using some animation tool that will generate code (for example JS/CSS) with all the shapes and animation

I think it can be done with a tool called lottie, which uses json file exported by AfterEffects plugin called bodymovin.

Lottie web docs

user_150948110
Related