Making Jellyfish transfer in Compose: Animating ImageVectors and making use of AGSL RenderEffects 🐠 | by Rebecca Franks | Android Builders | Nov, 2022


I like following inspiring individuals on the web and seeing what they make — one such particular person is Cassie Codes, she makes unimaginable animations for the net. One in all her inspiring examples is that this cute animated Jellyfish.

After seeing this and obsessing over it for some time, I saved considering to myself that this cute little creature wants to return to life in Compose too. So this weblog put up describes how I went about making this in Jetpack Compose, the ultimate code might be discovered right here. The strategies in right here aren’t solely related for jellyfish in fact… another fish will do too! Simply kidding — this weblog put up will cowl:

  • Customized ImageVectors
  • Animating ImageVector Paths or Teams
  • Making use of a distortion noise impact on a Composable with AGSL RenderEffect.

Let’s dive in! 🤿

To implement this jellyfish, we have to see what the SVG is made up of first — and attempt to replicate the totally different components of it. One of the simplest ways to determine what an SVG is drawing, is to remark out varied components of it and see the visible results of what every part of the svg renders. To do that, you may both change it within the codepen linked above, or obtain and open an SVG in a textual content editor (it’s a textual content readable format).

So let’s take an outline have a look at this SVG:

The SVG consists of the next parts:

  1. Paths and Teams of paths that make up the SVG:
  • Tentacles
  • Face — blob and outer jelly
  • Eyes — the animate open and closed
  • Bubbles — animate randomly across the the jellyfish — the dimensions and alpha animates

2. Total the jelly fish physique additionally has feTurbulence (noise) utilized as a feDisplacementMap, this offers the wobbly look to it.

Now that we perceive what this SVG is made up of, let’s go about rendering the static model in Compose.

Compose has an idea of an ImageVector, the place you may construct up a vector programmatically — much like SVG. For vectors/SVGs that you simply simply wish to render with out altering, you too can load up a VectorDrawable utilizing painterResource(R.drawable.vector_image). This can deal with changing it into an ImageVector that Compose will render.

Now you is likely to be asking your self — why not simply import the jellyfish as an SVG into an xml file and cargo it up utilizing painterResource(R.drawable.jelly_fish)?

That could be a nice query — and it’s attainable to load up the jellyfish on this means, eradicating the turbulence facet of the SVG and the picture will render with an XML loaded up (as defined within the documentation right here). However we wish to do a bit extra with the person components of the trail, reminiscent of animating components on click on and making use of a noise impact to the physique, so we’ll construct up our ImageVector programmatically.

To be able to render this jellyfish in Compose, we are able to copy the trail knowledge (or the “d” tag on the trail) that make up the fish, for instance, the primary tentacle has the next path knowledge:

If you’re new to paths / vectors / SVGs, the above is likely to be a bit overwhelming. However don’t fear, these are simply instructions that specify mathematical directions on how to attract one thing. As an example, M is an command to maneuver the digital cursor to a brand new place with out drawing, and L is a command to attract a line to the desired place, there are a couple of different instructions reminiscent of:

  • M, m: Transfer to
  • L, l, H, h, V, v: Line to
  • C, c, S, s: Cubic Bézier curve to
  • Q, q, T, t: Quadratic Bézier curve to
  • A, a: Elliptical arc curve to
  • Z, z — Shut the trail

The instructions are case delicate, an uppercase letter signifies absolute coordinates within the viewport house, whereas lowercase letter signifies that the command is relative to the present place.

Now you might be in all probability considering — do I’ve to attract in my head and know all of the positions and instructions by hand? No — under no circumstances. You may create a vector in most design applications — reminiscent of Figma or Inkscape, and export the results of your drawing to an SVG to get this data for your self. Whew! 😅

To create the vector in Compose: we name rememberVectorPainter, which creates an ImageVector, and we create a Group known as jellyfish, then one other Group known as tentacles and we place the primary Path inside it for the primary tentacle. We additionally set a RadialGradient because the background for the entire jellyfish.



Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles