Cursor animado Pixie Dust y más | por maiatoday | mayo 2022

Cursores de polvo de hadas Otra parte de los experimentos estéticos web de los 90. En los años 90, los cursores animados estaban de moda. En un dispositivo móvil, por supuesto, no tenemos el concepto de cursor. Hay gestos que se pueden reconocer: toques y arrastres. Entonces, para este proyecto, dividí las siguientes piezas de código: Las ventajas de este enfoque son que los componentes animados pueden reutilizarse como indicadores de progreso u otros elementos que aparecen o desaparecen para recompensar a los clientes por sus acciones.

1. Reconoce gestos y dibuja una lambda componible en la pantalla basada en los gestos – CursorVisible
2. Construye algunos componibles animados: Beating Heart y Spinning Lifesaver
3. Cree una pantalla en la que pueda alternar los diferentes elementos componibles animados en el elemento componible CursorVisible
4. Crea animaciones de polvo de hadas reutilizando mi código de confeti

Primero necesitaba un componible que pudiera tomar algo de contenido y permitirme arrastrar otro componible. Aquí está el código para ello. Hace que el contenido sea visible e invisible con solo hacer clic en un botón y le permite arrastrar el contenido. Así que hice un dulce salvavidas que cambia de color y tiene un corazón rojo y magenta pulsante.El salvavidas son solo círculos y arcos que se dibujan en el lienzo y luego se animan algunos parámetros como el ángulo y el color. Dibujando el salvavidas Hay un estado de arcoíris que recorre una lista de colores mediante una animación de fotogramas clave que ajusta el color y la escala para crear el efecto pulsante.La forma del corazón: Heart ShapeLa forma utilizada en el corazón: Y el corazón pulsante animado: HeartPulse Por último, pero no menos importante, el polvo de hada/elfo. Para esto hice un GlitterBox que sería el contenedor para las motas de brillo. El estado del brillo y el código de motas de brillo es un sistema de partículas similar al que usé en el modificador de confeti. Puede ver esto en acción en el repositorio de Github o leer la descripción en una publicación de blog anterior.En resumen, tengo un cuadro exterior simple con un pequeño cuadro de cursor magenta que se puede arrastrar por la pantalla. La posición del cuadro magenta se introduce en el sistema de partículas en las llamadas onDrag y se generan las gotas de brillo. Aquí está el cuadro de purpurina: GlitterBox Y ahí tienes tres animaciones animadas retro inspiradas en cursores de los 90 en Jetpack Compose. Lea el proyecto completo en este repositorio de git.