ProAndroidDev

The latest posts from Android Professionals and Google Developer Experts.

Follow publication

Animated Pixie Dust Cursor and more

Pixie Dust cursor

Another installment of the 90s web aesthetic experiments. In the 9Os animated cursors were all the rage. On a mobile device of course we don’t have the concept of a cursor. There are gestures that can be detected: touches and drags. So for this project I split up the following pieces to code:

The benefits of this approach are the animating composables can be reused as progress indicators or other elements that appear or disappear to reward customers on their actions.

  1. Detect gestures and draw a composable lambda on screen based on the gestures — CursorVisible
  2. Build a few animating composables: Pulsing Heart and spinning lifesaver
  3. Build a screen where I can switch the different animating composables in the CursorVisible composable
  4. Build pixie dust animation by repurposing my confetti code

First of all I needed a composable which would take a content and could allow me to drag another composable around. Here's the code for this. It makes the content visible and invisible on a tap and lets you drag the content.

CursorVisible composable

This CursorVisible can have content of anything. So I made a lifesaver sweet/candy that changes colour and a pulsing red and magenta heart.

The lifesaver is just circles and arcs drawn on the canvas and then some parameters such as angle and colour animated.

Drawing the lifesaver

There is a rainbowState that loops through a list of colours by using keyframes.

rainbowState

The pulsing heart is a heart shape which uses a looping animation that adjust the colour and the scale to get the pulsing effect.

The heart shape:

Heart Shape

The shaped used in the heart:

And the animated pulsing heart:

HeartPulse

Last but not least the fairy/pixie dust. For this one I made a GlitterBox which would be the container for the glitter flecks. The state of the glitter and the glitter fleck code is a particle system similar to what I used in the confetti modifier. You can see that in action in the Github repo or read the description in an older blog post.

Putting it all together I have a simple outside box with a little magenta cursor box that can be dragged around on the screen. The position of the magenta box is fed into the particle system on the onDrag calls and the glitter flecks are generated.

Here’s the glitter box:

GlitterBox

And there you have it three 90s retro animated cursor inspired animations in Jetpack Compose. Read the whole project in this git repo.

Originally published at https://www.maiatoday.net on May 24, 2022.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in ProAndroidDev

The latest posts from Android Professionals and Google Developer Experts.

Written by maiatoday

Kotlin, Android, dancing for expression and fun, curious playlists on Spotify, impromptu portraits, quirky food photos, doggo friend

No responses yet

Write a response