vitoksmile / sample-compose-animated-garden

exploration of compose animation & compose multiplatform based on the "composable sheep" talk series

animated garden 🌻🌼🌱🌷

an exploration of compose animation & compose multiplatform based on the "composable sheep" talk series

original "composable sheep" talks by nicole and tasha:

• Composable Sheep: A Compose Animations Journey (droidcon NYC 2022)
• Composable Sheep: The Creative Coding Epilogue (droidcon London 2022)

the source code from these talks was also used as a reference for this project:

• nicole-terc/composable-sheep
• drinkthestars/composable-sheep-sketches: Funky composable sheep 😎 🐏

run it 🏃‍♀️

this project was built with IntelliJ IDEA Community Edition version 2022.3.2

the Garden app can be run on desktop 💻 or mobile 📱

Note: on mobile, the RuntimeShader API requires Android 13 Tiramisu (SDK 33)

project contents

this project (and the accompanying blog series) covers the following:

concept	exercise	example
custom graphics with Canvas	draw a sunflower
basic & complex compose animations	animate a sunflower
background shaders for desktop and mobile	grow a grassy background

draw a sunflower 🌻

learn to create custom graphics with Canvas

documentation: Graphics In Compose

source code:

• drawSunflower
• Sunflower

animate a sunflower 💫

familiarize yourself with compose animation APIs by animating different properties of the sunflower (size, angle, color...)

documentation:

• Animations in Compose
• Customize animations

source code:

• AnimatedSizeSunflower
• AnimatedRotationSunflower
• AnimatedColorSunflower
• AnimatedPetalColorSunflower
• AnimatedPetalColorAndRotationSunflower
• AnimatedEverythingSunflower

add a background shader 🕶️

learn how to implement background shaders on desktop and mobile

documentation:

• Brush: Gradients and Shaders
• Using AGSL in your Android app
• SkSL & Runtime Effects

source code:

• greenGradient
• complexGreen
• Android RuntimeShader setup
• Desktop RuntimeEffect setup