{"id":3220,"date":"2023-05-18T10:44:05","date_gmt":"2023-05-18T17:44:05","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=3220"},"modified":"2023-05-18T10:44:05","modified_gmt":"2023-05-18T17:44:05","slug":"jetpack-compose-animation-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-compose-animation-2\/","title":{"rendered":"Blooming love for Compose animation"},"content":{"rendered":"

\n Hello Jetpack Compose developers,\n<\/p>\n

\n Today we\u2019ll be continuing our blog series on animations in Jetpack Compose! This content was inspired by Nicole Terc\u2019s Composable Sheep talk<\/a> from droidcon NYC.\n<\/p>\n

More basic animations<\/h2>\n

\n We\u2019ll be continuing to use our drawSunflower<\/code> method and Sketch<\/code> composable to build animations in this post, so if you haven\u2019t already, check out last week\u2019s blog post<\/a> to see how we built those functions!\n<\/p>\n

\n Last week, we took a look at implementing a basic size animation for our sunflower garden.\n<\/p>\n

\n Today, we\u2019ll learn how to do animations with two other properties: angle and color.\n<\/p>\n

Rotation animation<\/h3>\n

\n To add some rotation to our garden, we\u2019ll first have to revisit our flower drawing code. This time, our animation state will need to be float that varies between 0f<\/code> and 360f<\/code>, to represent the angle offset. To incorporate the angle into our drawing code, we only need to make one simple change:\n<\/p>\n

  fun DrawScope.drawSunflower(sizePct: Float = 1f, rotation: Float = 0f) {\r\n      drawPetals<\/em>(sizePct, rotation)\r\n      drawCenter<\/em>(sizePct)\r\n  }\r\n\r\n  \/\/ drawCenter remains the same\r\n\r\n  fun DrawScope.drawPetals(sizePct: Float, rotation: Float) {\r\n      val numPetals = 8\r\n      var angle = rotation\r\n      val size = Size<\/em>(width = 30f, height = 75f) * sizePct\r\n\r\n      repeat<\/em>(numPetals) {
        <\/strong>rotate<\/em>(angle) {
            <\/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  Instead of starting the angle<\/code> variable at 0f<\/code> when making calculations for where the petal ovals will be drawn, we simply start at the current angle offset in the rotation. The rotation<\/code> angle only needs to be passed into the drawPetal<\/code> function, so the drawCenter<\/code> function can remain the same as before.\n<\/p>\n
\n  To set up the animation behavior, let\u2019s remind ourselves of what the Sketch<\/code> composable and animation spec methods infiniteRepeatable<\/code><\/a> and tween<\/code><\/a> look like:\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\r\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
\n  We already noted that our animation state should vary between 0f<\/code> and 360f<\/code> to cover every angle, so we\u2019ll set the targetValue<\/code> to 360f<\/code>. \n<\/p>\n
\n  For the animation spec, I want my sunflowers to rotate at a constant speed infinitely. To make the rotation look seamless as it repeats, we\u2019ll leave the repeatMode<\/code> and delayMillis<\/code> parameters at their default values. And to achieve a constant rotation speed, this time we\u2019ll use a LinearEasing<\/code><\/a> so the angle changes at a constant rate.\n<\/p>\n
\n  Putting all that together, we can write the AnimatedRotationSunflower<\/code> composable:\n<\/p>\n
  @Composable\r\n  fun AnimatedRotationSunflower() {\r\n      Sketch<\/em>(\r\n          modifier = Modifier.size<\/em>(100.dp<\/em>),\r\n          targetValue = 360f,\r\n          animationSpec = infiniteRepeatable<\/em>(tween<\/em>(durationMillis = 2000, easing = LinearEasing<\/em>))\r\n      ) { <\/strong>angle ->\r\n        <\/strong>drawSunflower<\/em>(rotation = angle)\r\n      }<\/strong>\r\n  }<\/pre>\n
\n  Look at our garden now!\n<\/p>\n
\n  \n<\/p>\n
Color animation<\/h3>\n
\n  As beautiful as the sunflowers are in yellow and brown, I think the garden could benefit from some additional colors! Let\u2019s try to add some color-based animations.\n<\/p>\n
\n  Thanks to the composable sheep talk, we know that Color.hsv<\/code><\/a> method is a great way to animate color based on angle, since the hue<\/code> parameter must be in the range of 0f-360f<\/code>.\n<\/p>\n
\n  To update our drawing code to accept our animated color, we only have to pass in the color parameter and use it when drawing our petal ovals:\n<\/p>\n
  fun DrawScope.drawSunflower(sizePct: Float = 1f, rotation: Float = 0f, color: Color = Yellow<\/em>) {\r\n      drawPetals<\/em>(sizePct, rotation, color)\r\n      drawCenter<\/em>(sizePct)\r\n  }\r\n\r\n  \/\/ drawCenter remains the same\r\n\r\n  fun DrawScope.drawPetals(sizePct: Float, rotation: Float, color: Color) {\r\n      val numPetals = 8\r\n      var angle = rotation\r\n      val size = Size<\/em>(width = 30f, height = 75f) * sizePct\r\n\r\n      repeat<\/em>(numPetals) {\r\n        <\/strong>rotate<\/em>(angle) {\r\n            <\/strong>drawOval(\r\n                  color = color,\r\n                  topLeft = Offset<\/em>(center.x - size.width \/ 2, center.y),\r\n                  size = size\r\n              )\r\n          }\r\n        <\/strong>angle += 360 \/ numPetals\r\n      }<\/strong>\r\n  }<\/pre>\n
\n  Super simple! As for our animation, I want very similar behavior to our rotation animation from above \u2013 seamless infinite looping, constant rate of change \u2013 so our final composable will look like this:\n<\/p>\n
  @Composable\r\n  fun AnimatedColorSunflower() {\r\n      Sketch<\/em>(\r\n          modifier = Modifier.size<\/em>(100.dp<\/em>),\r\n          targetValue = 360f,\r\n          animationSpec = infiniteRepeatable<\/em>(tween<\/em>(durationMillis = 3000, easing = LinearEasing<\/em>))\r\n      ) { <\/strong>hue ->\r\n        <\/strong>drawSunflower<\/em>(color = Color.hsv(hue = hue, saturation = 1f, value = 1f))\r\n      }<\/strong>\r\n  }<\/pre>\n
\n  As previously mentioned, the Color.hsv<\/code> method accepts a hue between 0f<\/code> and 360f<\/code>, so we set our targetValue<\/code> to 360f<\/code> and pass in the animated value to generate a new color.\n<\/p>\n
\n  Here\u2019s the result:\n<\/p>\n
\n  \n<\/p>\n
\n  Pretty cool, but I think we can do even better! It would be awesome to have each individual petal change color over time for a sort of rainbow spinner effect. To do this, we\u2019ll mostly have to update the drawing code so that each petal is drawn with a slightly different color. We\u2019ll keep all the animation spec details the same, but instead of passing in one color for all the petals, we\u2019ll now just pass in the hue and do calculations while drawing:\n<\/p>\n
  @Composable\r\n  fun AnimatedPetalColorSunflower() {\r\n      Sketch<\/em>(\r\n          modifier = Modifier.size<\/em>(100.dp<\/em>),\r\n          targetValue = 360f,\r\n          animationSpec = infiniteRepeatable<\/em>(tween<\/em>(durationMillis = 3000, easing = LinearEasing<\/em>))\r\n      ) { <\/strong>hue ->\r\n        <\/strong>drawSunflower<\/em>(hue = hue)\r\n      }<\/strong>\r\n  }\r\n\r\n  fun DrawScope.drawSunflower(sizePct: Float = 1f, rotation: Float = 0f, color: Color = Yellow<\/em>, hue: Float? = null) {\r\n      drawPetals<\/em>(sizePct, rotation, color, hue)\r\n      drawCenter<\/em>(sizePct)\r\n  }\r\n\r\n  \/\/ drawCenter remains the same\r\n\r\n  fun DrawScope.drawPetals(sizePct: Float, rotation: Float, color: Color, hue: Float?) {\r\n      val numPetals = 8\r\n      var angle = rotation\r\n      val size = Size<\/em>(width = 30f, height = 75f) * sizePct\r\n\r\n      repeat<\/em>(numPetals) { <\/strong>petal ->\r\n        <\/strong>rotate<\/em>(angle) {\r\n            <\/strong>drawOval(\r\n                  color = hue?.let <\/em>{ <\/strong>Color.hsv(hue = (hue + petal * 10f).mod<\/em>(360f), saturation = 1f, value = 1f) }\r\n                    <\/strong>?: color,\r\n                  topLeft = Offset<\/em>(center.x - size.width \/ 2, center.y),\r\n                  size = size\r\n              )\r\n          }\r\n        <\/strong>angle += 360 \/ numPetals\r\n      }<\/strong>\r\n  }<\/pre>\n
\n  You can see that we now call Color.hsv<\/code> in drawPetals<\/code>, and we use the current petal number to offset the hue value. Because we are adding to the hue, we do have to call mod(360f)<\/code> to make sure the final hue value is within the required range.\n<\/p>\n
\n  And here\u2019s the final result \u2013 look at how much cooler our garden is now:\n<\/p>\n
\n  \n<\/p>\n
\n  And that\u2019s it for the additional basic animations we\u2019ll cover today. The possibilities really are endless \u2013 you could also animate the number of petals, the position of the flower, or any combination of the properties we already animated. Next week, we\u2019ll finish up this blog series by finalizing our flower varieties and adding some green \ud83d\udfe9!\n<\/p>\n
Resources and feedback<\/h2>\n
\n  The content covered today is part of PR #2<\/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