ui: Add animations

This commit is contained in:
Myzel394 2023-08-07 00:08:16 +02:00
parent 1769b2167c
commit 290ebaf28f
No known key found for this signature in database
GPG Key ID: 79CC92F37B3E1A2B
2 changed files with 41 additions and 5 deletions

View File

@ -1,5 +1,10 @@
package app.myzel394.alibi.ui.components.AudioRecorder.molecules
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandHorizontally
import androidx.compose.animation.fadeIn
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
@ -32,6 +37,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
@ -71,6 +77,14 @@ fun RecordingStatus(
}
}
// Only show animation when the recording has just started
val recordingJustStarted = duration < 1
var progressVisible by remember { mutableStateOf(!recordingJustStarted) }
LaunchedEffect(Unit) {
progressVisible = true
}
KeepScreenOn()
Column(
@ -105,11 +119,18 @@ fun RecordingStatus(
)
}
Spacer(modifier = Modifier.height(16.dp))
LinearProgressIndicator(
progress = progress,
modifier = Modifier
.width(300.dp)
)
AnimatedVisibility(
visible = progressVisible,
enter = expandHorizontally(
tween(1000)
)
) {
LinearProgressIndicator(
progress = progress,
modifier = Modifier
.width(300.dp)
)
}
Spacer(modifier = Modifier.height(32.dp))
var showDeleteDialog by remember { mutableStateOf(false) }
@ -147,11 +168,14 @@ fun RecordingStatus(
}
}
val label = stringResource(R.string.ui_audioRecorder_action_save_label)
val alpha by animateFloatAsState(if (progressVisible) 1f else 0f, tween(1000))
Button(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.height(BIG_PRIMARY_BUTTON_SIZE)
.graphicsLayer(alpha = alpha)
.semantics {
contentDescription = label
},

View File

@ -2,6 +2,11 @@ package app.myzel394.alibi.ui.components.AudioRecorder.molecules
import android.Manifest
import android.content.ServiceConnection
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.animation.expandHorizontally
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
@ -22,7 +27,13 @@ import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
@ -105,6 +116,7 @@ fun StartRecording(
.data
.collectAsState(initial = AppSettings.getDefaultInstance())
.value
Text(
stringResource(R.string.ui_audioRecorder_action_start_description, settings.audioRecorderSettings.maxDuration / 1000 / 60),
style = MaterialTheme.typography.bodySmall.copy(