mirror of
https://github.com/meshtastic/Meshtastic-Android.git
synced 2026-04-20 22:23:37 +00:00
feat(ui): Animate icon changes with Crossfade (#4028)
This commit is contained in:
parent
16700bfffb
commit
212bcfd945
3 changed files with 41 additions and 31 deletions
|
|
@ -22,6 +22,7 @@ package com.geeksville.mesh.ui
|
|||
import android.Manifest
|
||||
import android.os.Build
|
||||
import androidx.compose.animation.AnimatedVisibility
|
||||
import androidx.compose.animation.Crossfade
|
||||
import androidx.compose.animation.core.Animatable
|
||||
import androidx.compose.animation.core.LinearEasing
|
||||
import androidx.compose.animation.core.tween
|
||||
|
|
@ -413,11 +414,14 @@ fun MainScreen(uIViewModel: UIViewModel = hiltViewModel(), scanModel: BTScanMode
|
|||
}
|
||||
},
|
||||
) {
|
||||
Icon(
|
||||
imageVector = destination.icon,
|
||||
contentDescription = stringResource(destination.label),
|
||||
tint = LocalContentColor.current,
|
||||
)
|
||||
Crossfade(isSelected, label = "BottomBarIcon") { isSelectedState ->
|
||||
Icon(
|
||||
imageVector = destination.icon,
|
||||
contentDescription = stringResource(destination.label),
|
||||
tint =
|
||||
if (isSelectedState) colorScheme.primary else LocalContentColor.current,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
|
||||
package com.geeksville.mesh.ui.connections.components
|
||||
|
||||
import androidx.compose.animation.Crossfade
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.rounded.Bluetooth
|
||||
import androidx.compose.material.icons.rounded.Cached
|
||||
|
|
@ -61,20 +62,22 @@ fun ConnectionsNavIcon(
|
|||
|
||||
val foregroundPainter = connectionTypeIcon?.let { rememberVectorPainter(it) }
|
||||
|
||||
Icon(
|
||||
imageVector = backgroundIcon,
|
||||
contentDescription = contentDescription,
|
||||
tint = tint,
|
||||
modifier =
|
||||
modifier.drawWithContent {
|
||||
drawContent()
|
||||
foregroundPainter?.let {
|
||||
@Suppress("MagicNumber")
|
||||
val badgeSize = size.width * .45f
|
||||
with(it) { draw(Size(badgeSize, badgeSize), colorFilter = ColorFilter.tint(tint)) }
|
||||
}
|
||||
},
|
||||
)
|
||||
Crossfade(targetState = backgroundIcon, label = "ConnectionIcon") {
|
||||
Icon(
|
||||
imageVector = it,
|
||||
contentDescription = contentDescription,
|
||||
tint = tint,
|
||||
modifier =
|
||||
modifier.drawWithContent {
|
||||
drawContent()
|
||||
foregroundPainter?.let {
|
||||
@Suppress("MagicNumber")
|
||||
val badgeSize = size.width * .45f
|
||||
with(it) { draw(Size(badgeSize, badgeSize), colorFilter = ColorFilter.tint(tint)) }
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue