Inspiration<\/h2>\n
\n For those of you who haven\u2019t had a chance yet, I\u2019d highly recommend watching the original Compose Sheep talk<\/a>. There\u2019s also a Composable Sheep sequel<\/a> from droidcon London, where Nicole and Tasha partner up to show us some even cooler animation (and mathematical) concepts.\n<\/p>\n \n I used the sample repositories from these talks as reference for my own investigations:\n<\/p>\n \n Like the original sheep project, we\u2019ll be using the Compose Graphics libraries (ex: \n In order to start growing my garden, the first step was to figure out how to draw a flower. In \n To build a basic flower, we need two basic parts: the petals and the center of the flower. To draw these, we\u2019ll use the \n After some experimentation, I found the ideal sizes and colors for the first flower in my garden \u2013 a sunflower \ud83c\udf3b! The code to draw this flower is simple:\n<\/p>\n \n Some subtle but important details from the code snippet:\n<\/p>\n \n No respectable garden has only one flower, so of course we have to add some code to grow the garden:\n<\/p>\n \n And with that, we have a nice basic garden full of sunflowers \ud83d\ude0a\n<\/p>\n \n \n The next step to beautifying our garden is adding some animations. To set up our animations, the first thing we need to do is copy over a simplified version of the \n This will allow us to draw our animations frame by frame. Now, instead of wrapping our drawings with \n Now that we have the animation canvas set up with the \n In all basic animations, we\u2019re essentially choosing one property to change over time. Once you\u2019ve decided on a property, you can figure out what values you want to animate in between, how quickly the value should change, if the animation should repeat, etc.\n<\/p>\n \n For our first basic flower animation, we\u2019ll be trying to animate the size of the flowers. To do that, we\u2019ll have to:\n<\/p>\n \n To change how big the flowers are drawn, we\u2019ll have to change the code in two places:\n<\/p>\n \n To ensure that the center and petals grow at the same rate, we can describe the size as a percentage instead of a specific value. This way, we won\u2019t need to keep track of two different size values and we can easily create an animation state that varies between \n I like the size of the basic sunflowers from the previous section, so let\u2019s say we want to animate between zero up to the hardcoded sizes from earlier. To achieve that, the updated \n You can see the only differences are that we now have the \n The last step is to animate our sunflowers is to call \n Let\u2019s take a look at the \n We have some typical composable parameters, including a modifier and a content parameter ( \n The \n The \n Both functions accept three parameters:\n<\/p>\n \n Let\u2019s try calling these functions with their default behavior and see what the flower animation looks like:\n<\/p>\n \n \n Not bad! However, I have a few tweaks I want to make:\n<\/p>\n \n To do this, we\u2019ll update the \n We can update the \n We can also address this by updating the \n For this, we\u2019ll investigate different values for the \n After some experimentation, I settled on the following values for our animation spec:\n<\/p>\n \n Take a look at the garden now:\n<\/p>\n \n \n So now, you know more about graphics in Compose, creating a frame-by-frame animation canvas, and building basic animations! Next week, we\u2019ll dive into animating more flower properties (hint: \ud83c\udf08) to make our garden even cooler \ud83d\ude0e\n<\/p>\n \n The content covered today is part of PR #1<\/a> in the animated-garden repo<\/a>. \n<\/p>\n \n To learn more about Jetpack Compose animations and creative coding, check out these resources:\n<\/p>\n \n If you have any questions, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\n<\/p>\n\n
Canvas<\/code>, DrawScope<\/code>\u2026) and animation APIs to draw our projects frame by frame. All of the code covered today can be referenced in the Animated garden part 1 PR<\/a>.\n<\/p>\nDraw a flower<\/h2>\n
DrawScope<\/code>, you have access to many different functions for drawing text, shapes, and images.\n<\/p>\nDrawScope<\/code> methods drawOval<\/code><\/a> and drawCircle<\/code><\/a>.\n<\/p>\n private val Brown <\/em>= Color<\/em>(0xFF742C0D)\r\n private val Yellow <\/em>= Color<\/em>(0xFFF8D314)\r\n\r\n @Composable\r\n fun Sunflower() {\r\n Canvas<\/em>(Modifier.size<\/em>(100.dp<\/em>)) {\r\n drawSunflower<\/em>()\r\n }\r\n }\r\n\r\n fun DrawScope.drawSunflower() {\r\n drawPetals<\/em>()\r\n drawCenter<\/em>()\r\n }\r\n\r\n fun DrawScope.drawCenter() {\r\n val radius = 20f\r\n\r\n drawCircle(color = Brown<\/em>, radius = radius, center = center)\r\n }\r\n fun DrawScope.drawPetals() {\r\n val numPetals = 8\r\n var angle = 0f\r\n val size = Size<\/em>(width = 30f, height = 75f)\r\n\r\n repeat<\/em>(numPetals) {
<\/strong>rotate<\/em>(angle) {\r\n <\/strong>drawOval(\r\n color = Yellow<\/em>,\r\n topLeft = Offset<\/em>(center.x - size.width \/ 2, center.y),\r\n size = size\r\n )\r\n }
<\/strong>angle += 360 \/ numPetals\r\n }
<\/strong>\r\n }<\/pre>\n\n
Canvas<\/code>, you must<\/em> provide a size modifier, otherwise it will default to zero and your drawings will not be shown\n <\/li>\nDrawScope<\/code>, you gain access to fields like center<\/code> and size<\/code> that are really helpful for making calculations\n <\/li>\n<\/ul>\n @Composable\r\n fun MyGarden() {\r\n LazyVerticalGrid<\/em>(\r\n modifier = Modifier.fillMaxSize<\/em>(),\r\n columns = GridCells.Adaptive(100.dp<\/em>)\r\n ) {\r\n items(8) {\r\n Sunflower<\/em>()\r\n }\r\n }\r\n }\r\n<\/pre>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/05\/word-image-3209-2.png\")
\n<\/p>\nAdd an animation canvas<\/h2>\n
Sketch<\/code> composable<\/a> from the composable-sheep-sketches repo:\n<\/p>\n @Composable\r\n fun Sketch(\r\n modifier: Modifier = Modifier,\r\n targetValue: Float,\r\n animationSpec: AnimationSpec<Float>,\r\n onDraw: DrawScope.(Float) -> Unit\r\n ) {\r\n val animationState = remember <\/em>{ AnimationState<\/em>(0f) }\r\n\r\n LaunchedEffect<\/em>(targetValue) {\r\n while (isActive<\/em>) {\r\n animationState.animateTo(\r\n targetValue = targetValue,\r\n animationSpec = animationSpec,\r\n sequentialAnimation = true\r\n )\r\n }\r\n }\r\n Canvas<\/em>(modifier = modifier) {\r\n onDraw(animationState.value)\r\n }
<\/strong>\r\n }<\/pre>\nCanvas<\/code>, we\u2019ll use Sketch<\/code>, and in the onDraw<\/code> method you can see that you\u2019ll have access to the animationState<\/code> value. The targetValue<\/code> and animationSpec<\/code> parameters will allow you to customize the speed and style of animation, as you will see in later examples.\n<\/p>\nBuild a basic animation<\/h2>\n
Sketch<\/code> composable, we can start to build some fun animations for our garden.\n<\/p>\n\n
drawSunflower<\/code> method to the animation canvas\n <\/li>\n<\/ul>\nUpdate drawing logic<\/h3>\n
\n
radius<\/code> parameter when we call drawCircle<\/code> for the center of the flower\n <\/li>\nsize<\/code> parameter when we call drawOval<\/code> for the petals of the flower\n <\/li>\n<\/ul>\n0f<\/code> and 1f<\/code>.\n<\/p>\ndrawSunflower<\/code> method would look like this:\n<\/p>\n fun DrawScope.drawSunflower(sizePct: Float) {\r\n drawPetals<\/em>(sizePct)\r\n drawCenter<\/em>(sizePct)\r\n }\r\n\r\n fun DrawScope.drawCenter(sizePct: Float) {\r\n val radius = 20f * sizePct\r\n\r\n drawCircle(color = Brown<\/em>, radius = radius, center = center)\r\n }\r\n\r\n fun DrawScope.drawPetals(sizePct: Float) {\r\n val numPetals = 8\r\n var angle = 0f\r\n val size = Size<\/em>(width = 30f, height = 75f) * sizePct\r\n\r\n repeat<\/em>(numPetals) {\r\n rotate<\/em>(angle) {\r\n drawOval(\r\n color = Yellow<\/em>,\r\n topLeft = Offset<\/em>(center.x - size.width \/ 2, center.y),\r\n size = size\r\n )\r\n }\r\n angle += 360 \/ numPetals\r\n }\r\n }<\/pre>\nsizePct<\/code> float parameter, which will be our animation state that changes between 0f<\/code> and 1f<\/code>, and that we multiply the radius<\/code> and size<\/code> values by this percentage.\n<\/p>\nConnect to animation canvas<\/h3>\n
drawSunflower<\/code> inside our new Sketch<\/code> animation canvas and pass along the animation state.\n<\/p>\nSketch<\/code> composable\u2019s parameters:\n<\/p>\n @Composable\r\n fun Sketch(\r\n modifier: Modifier = Modifier,\r\n targetValue: Float,\r\n animationSpec: AnimationSpec<Float>,\r\n onDraw: DrawScope.(Float) -> Unit\r\n )<\/pre>\n
onDraw<\/code>) with the DrawScope<\/code> receiver and Float<\/code> parameter that will give us access to the animation state.\n<\/p>\ntargetValue<\/code> parameter controls the end value of the animation state (the start value is always 0f<\/code> in our examples). For our sizePct<\/code> animation state, we want the animation state to vary between 0f<\/code> and 1f<\/code>, so we\u2019ll set targetValue<\/code> to 1f<\/code>.\n<\/p>\nanimationSpec<\/code> parameter lets you customize animation behavior, such as how quickly the animation state changes over time, if it repeats, etc. You can read more about the different options in the Customize animations documentation<\/a>, but for our purposes, we\u2019ll be using infiniteRepeatable<\/code><\/a> to infinitely loop our animation and tween<\/code><\/a> to describe our animation behavior.\n<\/p>\n @Stable\r\n fun <T> infiniteRepeatable(\r\n animation: DurationBasedAnimationSpec<T>,\r\n repeatMode: RepeatMode = RepeatMode.Restart<\/em>,\r\n initialStartOffset: StartOffset = StartOffset(0)\r\n ): InfiniteRepeatableSpec<T>\r\n\r\n @Stable\r\n fun <T> tween(\r\n durationMillis: Int = DefaultDurationMillis<\/em>,\r\n delayMillis: Int = 0,\r\n easing: Easing = FastOutSlowInEasing
<\/em>\r\n ): TweenSpec<T><\/pre>\n @Composable\r\n fun AnimatedSizeSunflower() {\r\n Sketch<\/em>(\r\n modifier = Modifier.size<\/em>(100.dp<\/em>),\r\n targetValue = 1f,\r\n animationSpec = infiniteRepeatable<\/em>(animation = tween<\/em>())\r\n ) { <\/strong>sizePct ->
<\/strong>drawSunflower<\/em>(sizePct = sizePct)\r\n }\r\n }<\/pre>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/05\/word-image-3209-3.gif\")
\n<\/p>\n\n
tween<\/code> call with a longer durationMillis<\/code> value.\n<\/p>\n<\/li>\ninfiniteRepeatable<\/code> call by setting the repeatMode<\/code> to RepeatMode.Reverse<\/code>. That way, the flower will grow, then shrink, instead of restarting the growing animation each time.\n<\/p>\n<\/li>\ntween<\/code> call, this time by setting the delayMillis<\/code> parameter to a non-zero value. This will add a delay before the animation starts.\n<\/p>\n<\/li>\neasing<\/code> parameter in the tween<\/code> call. There are many easing options<\/a> available for use, and you can experiment with them (and read up on Material Design<\/a>) to find out which one works best for your use case.\n<\/p>\n<\/li>\n<\/ol>\n @Composable\r\n fun AnimatedSizeSunflower() {\r\n Sketch<\/em>(\r\n modifier = Modifier.size<\/em>(100.dp<\/em>),\r\n targetValue = 1f,\r\n animationSpec = infiniteRepeatable<\/em>(\r\n animation = tween<\/em>(durationMillis = 800, delayMillis = 50, easing = LinearOutSlowInEasing<\/em>),\r\n repeatMode = RepeatMode.Reverse
<\/em>)\r\n ) { sizePct ->\r\n drawSunflower<\/em>(sizePct = sizePct)\r\n }\r\n }<\/pre>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/05\/word-image-3209-4.gif\")
\n<\/p>\nResources and feedback<\/h2>\n
\n