Add subtile animations

- (all) Animate the content size changes to the whole dialog - (calendar) Animate the chevron up / down in month & year selection
maxkeppeler · Sep 15, 2022 · 56b7ef5 · 56b7ef5
1 parent fbcd053
commit 56b7ef5
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 10 deletions.
diff --git a/buildSrc/src/main/java/Dependencies.kt b/buildSrc/src/main/java/Dependencies.kt
@@ -25,6 +25,7 @@ object Dependencies {
  const val UI_TOOLING = "androidx.compose.ui:ui-tooling-preview:${Versions.COMPOSE}"
  const val ICONS_EXTENDED = "androidx.compose.material:material-icons-extended:${Versions.COMPOSE}"
  const val ANIMATION = "androidx.compose.animation:animation:${Versions.COMPOSE}"
+ const val ANIMATION_GRAPHICS = "androidx.compose.animation:animation-graphics:${Versions.COMPOSE}"
 
  object Test {
  const val JUNIT = "androidx.compose.ui:ui-test-junit4:${Versions.COMPOSE}"

diff --git a/buildSrc/src/main/java/LibraryModulePlugin.kt b/buildSrc/src/main/java/LibraryModulePlugin.kt
@@ -30,6 +30,7 @@ class LibraryModulePlugin : Plugin<Project> {
  implementation(Dependencies.Compose.UI)
  implementation(Dependencies.Compose.UI_TOOLING)
  implementation(Dependencies.Compose.ANIMATION)
+ implementation(Dependencies.Compose.ANIMATION_GRAPHICS)
  implementation(Dependencies.Compose.RUNTIME)
  implementation(Dependencies.Compose.MATERIAL)
  implementation(Dependencies.Compose.MATERIAL_3)

diff --git a/calendar/src/main/java/com/maxkeppeler/sheets/calendar/views/CalendarTopComponent.kt b/calendar/src/main/java/com/maxkeppeler/sheets/calendar/views/CalendarTopComponent.kt
@@ -13,18 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@file:OptIn(ExperimentalAnimationGraphicsApi::class)
+
 package com.maxkeppeler.sheets.calendar.views
 
 import androidx.compose.animation.*
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.graphics.ExperimentalAnimationGraphicsApi
+import androidx.compose.animation.graphics.res.animatedVectorResource
+import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
+import androidx.compose.animation.graphics.vector.AnimatedImageVector
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.ChevronLeft
 import androidx.compose.material.icons.rounded.ChevronRight
-import androidx.compose.material.icons.rounded.ExpandLess
-import androidx.compose.material.icons.rounded.ExpandMore
 import androidx.compose.material3.*
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -68,9 +73,24 @@ internal fun CalendarTopComponent(
  onYearClick: () -> Unit,
 ) {
 
- val enterTransition = fadeIn() + expandIn(expandFrom = Alignment.Center, clip = false)
+ val enterTransition = expandIn(expandFrom = Alignment.Center, clip = false) + fadeIn()
  val exitTransition = shrinkOut(shrinkTowards = Alignment.Center, clip = false) + fadeOut()
 
+ val chevronAVD = AnimatedImageVector.animatedVectorResource(R.drawable.avd_chevron_down_up)
+ var chevronMonthAtEnd by remember { mutableStateOf(false) }
+ var chevronYearAtEnd by remember { mutableStateOf(false) }
+
+ LaunchedEffect(mode) {
+ when (mode) {
+ CalendarDisplayMode.CALENDAR -> {
+ chevronMonthAtEnd = false
+ chevronYearAtEnd = false
+ }
+ CalendarDisplayMode.MONTH -> chevronYearAtEnd = false
+ CalendarDisplayMode.YEAR -> chevronMonthAtEnd = false
+ }
+ }
+
  val selectableContainerModifier = Modifier.clip(MaterialTheme.shapes.extraSmall)
  val selectableItemModifier = Modifier
  .padding(start = dimensionResource(RC.dimen.scd_small_100))
@@ -114,7 +134,12 @@ internal fun CalendarTopComponent(
  ) {
  Row(
  modifier = selectableContainerModifier
- .clickable(config.monthSelection) { onMonthClick() },
+ .clickable(config.monthSelection) {
+ if (config.monthSelection) {
+ chevronMonthAtEnd = !chevronMonthAtEnd
+ }
+ onMonthClick()
+ },
  verticalAlignment = Alignment.CenterVertically
  ) {
  Text(
@@ -126,7 +151,7 @@ internal fun CalendarTopComponent(
  if (config.monthSelection) {
  Icon(
  modifier = Modifier.size(dimensionResource(RC.dimen.scd_size_150)),
- imageVector = if (mode == CalendarDisplayMode.MONTH) Icons.Rounded.ExpandLess else Icons.Rounded.ExpandMore,
+ painter = rememberAnimatedVectorPainter(chevronAVD, chevronMonthAtEnd),
  contentDescription = stringResource(R.string.scd_calendar_dialog_select_month),
  tint = MaterialTheme.colorScheme.primary
  )
@@ -135,7 +160,12 @@ internal fun CalendarTopComponent(
 
  Row(
  modifier = selectableContainerModifier
- .clickable(config.yearSelection) { onYearClick() },
+ .clickable(config.yearSelection) {
+ if (config.yearSelection) {
+ chevronYearAtEnd = !chevronYearAtEnd
+ }
+ onYearClick()
+ },
  verticalAlignment = Alignment.CenterVertically
  ) {
  Text(
@@ -147,7 +177,7 @@ internal fun CalendarTopComponent(
  if (config.yearSelection) {
  Icon(
  modifier = Modifier.size(dimensionResource(RC.dimen.scd_size_150)),
- imageVector = if (mode == CalendarDisplayMode.MONTH) Icons.Rounded.ExpandLess else Icons.Rounded.ExpandMore,
+ painter = rememberAnimatedVectorPainter(chevronAVD, chevronYearAtEnd),
  contentDescription = stringResource(id = R.string.scd_calendar_dialog_select_year),
  tint = MaterialTheme.colorScheme.primary
  )

diff --git a/calendar/src/main/res/drawable/avd_chevron_down_up.xml b/calendar/src/main/res/drawable/avd_chevron_down_up.xml
@@ -0,0 +1,33 @@
+<animated-vector
+ xmlns:android="http:https://schemas.android.com/apk/res/android"
+ xmlns:aapt="http:https://schemas.android.com/aapt">
+ <aapt:attr name="android:drawable">
+ <vector
+ android:name="vector"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
+ <group
+ android:name="group"
+ android:pivotX="12"
+ android:pivotY="12">
+ <path
+ android:name="path"
+ android:pathData="M 7.41 8.58 L 12 13.17 L 16.59 8.58 L 18 10 L 12 16 L 6 10 L 7.41 8.58 Z"
+ android:fillColor="#000"/>
+ </group>
+ </vector>
+ </aapt:attr>
+ <target android:name="group">
+ <aapt:attr name="android:animation">
+ <objectAnimator
+ android:propertyName="rotation"
+ android:duration="300"
+ android:valueFrom="0"
+ android:valueTo="-180"
+ android:valueType="floatType"
+ android:interpolator="@android:interpolator/fast_out_slow_in"/>
+ </aapt:attr>
+ </target>
+</animated-vector>
diff --git a/core/src/main/java/com/maxkeppeker/sheets/core/views/base/DialogBase.kt b/core/src/main/java/com/maxkeppeker/sheets/core/views/base/DialogBase.kt
@@ -16,7 +16,6 @@
 package com.maxkeppeker.sheets.core.views.base
 
 import androidx.compose.animation.animateContentSize
-import androidx.compose.animation.core.spring
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
@@ -25,7 +24,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -73,6 +71,7 @@ fun DialogBase(
  Surface(
  modifier = Modifier
  .fillMaxWidth()
+ .animateContentSize()
  .clickable(
  indication = null,
  interactionSource = contentInteractionSource,