beenull/ViMusic
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add animation to SeekBar

Browse source
This commit is contained in:
vfsfitvnm 2022-07-27 18:06:41 +02:00
parent 4e460a1427
commit 193c98e20e
1 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/SeekBar.kt
View file

@ -1,5 +1,8 @@
package it.vfsfitvnm.vimusic.ui.components
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectHorizontalDragGestures
import androidx.compose.foundation.gestures.detectTapGestures
@ -9,6 +12,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
@ -31,12 +36,21 @@ fun SeekBar(
color: Color,
backgroundColor: Color,
modifier: Modifier = Modifier,
barHeight: Dp = 3.5.dp,
barHeight: Dp = 3.dp,
scrubberColor: Color = color,
scrubberRadius: Dp = 6.dp,
shape: Shape = RectangleShape,
drawSteps: Boolean = false,
) {
val isDragging = remember {
MutableTransitionState(false)
}
val transition = updateTransition(transitionState = isDragging, label = null)
val currentBarHeight by transition.animateDp(label = "") { if (it) scrubberRadius else barHeight }
val currentScrubberRadius by transition.animateDp(label = "") { if (it) 0.dp else scrubberRadius }
Box(
modifier = modifier
.pointerInput(minimumValue, maximumValue) {
@ -45,6 +59,9 @@ fun SeekBar(
var acc = 0f
detectHorizontalDragGestures(
onDragStart = {
isDragging.targetState = true
},
onHorizontalDrag = { _, delta ->
acc += delta / size.width * (maximumValue - minimumValue)
@ -54,10 +71,12 @@ fun SeekBar(
}
},
onDragEnd = {
isDragging.targetState = false
acc = 0f
onDragEnd()
},
onDragCancel = {
isDragging.targetState = false
acc = 0f
onDragEnd()
}
@ -87,7 +106,7 @@ fun SeekBar(
drawCircle(
color = scrubberColor,
radius = scrubberRadius.toPx(),
radius = currentScrubberRadius.toPx(),
center = center.copy(x = scrubberPosition)
)
@ -103,10 +122,11 @@ fun SeekBar(
}
}
}
.height(scrubberRadius)
) {
Spacer(
modifier = Modifier
.height(barHeight)
.height(currentBarHeight)
.fillMaxWidth()
.background(color = backgroundColor, shape = shape)
.align(Alignment.Center)
@ -114,9 +134,10 @@ fun SeekBar(
Spacer(
modifier = Modifier
.height(barHeight)
.height(currentBarHeight)
.fillMaxWidth((value.toFloat() - minimumValue) / (maximumValue - minimumValue))
.background(color = color, shape = shape)
.align(Alignment.CenterStart)
)
}
}