I have an application with 2 screens: (ScreenA and ScreenB)
I created a translation animation that launches at the start of the app on screenA.
val horizontalBias = remember { Animatable(0f) }
val alignment by derivedStateOf { BiasAlignment.Horizontal(horizontalBias.value) }
LaunchedEffect(key1 = 1) {
horizontalBias.animateTo(
targetValue = -1f,
animationSpec = tween(
durationMillis = durationMillis,
delayMillis = delayMillis
)
)
}
Box(modifier = modifier)
{
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = alignment)
{
...
}
}
I would like this animation to play when launching the application but not when navigating up from screenB
I would also like the animation not play when the orientation of device change
Edit
I don't know if this is a good way but I found a solution that works:
var horizontalBias by rememberSaveable {
mutableStateOf(0f)
}
val horizontalAnimatable = remember { Animatable(horizontalBias) }
val alignment by derivedStateOf { BiasAlignment.Horizontal(horizontalAnimatable.value) }
LaunchedEffect(true) {
if (horizontalBias > -1f) {
horizontalAnimatable.animateTo(
targetValue = -1f,
animationSpec = tween(
durationMillis = durationMillis,
delayMillis = delayMillis
)
)
horizontalBias = -1f
}
}
For animation to run once you can keep a value in VieModel and
LaunchedEffect(key1 = viewModel.isAnimationRun) {
if(!vieModel.isAnimationRun)
horizontalBias.animateTo(
targetValue = -1f,
animationSpec = tween(
durationMillis = durationMillis,
delayMillis = delayMillis
)
)
viewModel.animationRun = true
}
}
Related
I'm trying to achieve a smooth animation of a simple round timer. Like this, but smoother
However it just skips to targetValue immediately and that's it there's no animation at all. I'm trying to do it like this:
#Composable
private fun SampleTimer(duration: Int, modifier: Modifier = Modifier) {
var animatedPercentage by remember { mutableStateOf(1f) }
LaunchedEffect(Unit) {
animate(
initialValue = 1f,
targetValue = 0f,
animationSpec = infiniteRepeatable(
tween(
durationMillis = duration.seconds.inWholeMilliseconds.toInt(),
easing = LinearEasing,
),
),
) { value, _ ->
animatedPercentage = value
}
}
val arcColor = MaterialTheme.colors.primaryVariant
Canvas(
modifier = modifier,
) {
drawArc(
color = arcColor,
useCenter = true,
startAngle = -90f,
sweepAngle = -360f * animatedPercentage,
)
}
}
Why does this happen, what am I missing here?
You can use an Animatable state. The angle will animate from 0–360°.
Something like:
val angle = remember {
Animatable(0f)
}
LaunchedEffect(angle) {
launch {
angle.animateTo(360f, animationSpec =
infiniteRepeatable(
tween(
durationMillis = 5000,
easing = LinearEasing,
),
)
)
}
}
val arcColor = Red
Canvas(
modifier = Modifier.size(100.dp),
) {
drawArc(
color = arcColor,
useCenter = true,
startAngle = -90f,
sweepAngle = -angle.value,
)
}
The problem was that the animations were turned off in developer settings on my device, and I forgot that
I have used compose AnimatedVisibility in my project,
But the anim is to short for my need.
Is there a related API?
Here is an example taken from codelabs. You can add your own animation specs with the durationMillis of each animation, one for entering, and one for exiting:
AnimatedVisibility(
visible = shown,
enter = slideInVertically(
// Enters by sliding down from offset -fullHeight to 0.
initialOffsetY = { fullHeight -> -fullHeight },
animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing)
),
exit = slideOutVertically(
// Exits by sliding up from offset 0 to -fullHeight.
targetOffsetY = { fullHeight -> -fullHeight },
animationSpec = tween(durationMillis = 250, easing = FastOutLinearInEasing)
)
) {
Surface(
modifier = Modifier.fillMaxWidth(),
color = MaterialTheme.colors.secondary,
elevation = 4.dp
) {
Text(
text = stringResource(R.string.edit_message),
modifier = Modifier.padding(16.dp)
)
}
}
Well this is one way
#OptIn(ExperimentalAnimationApi::class)
#Composable
fun AnimatedVisibilityMark2(content: #Composable () -> Unit, visible: Boolean, durationMillis: Int) {
AnimatedVisibility(
visible = visible,
enter = fadeIn(
animationSpec = keyframes {
this.durationMillis = durationMillis
}
),
exit = fadeOut(
animationSpec = keyframes {
this.durationMillis = durationMillis
}
)
){
content()
}
}
I'm trying to adapt a video tutorial to my own needs. Basically, I have a list of boxes and I want each one to animate with a delay of 1 second after the other. I don't understand why my code does not work. The
delay.value
does not appear to update. Any ideas?
#Composable
fun Rocket(
isRocketEnabled: Boolean,
maxWidth: Dp,
maxHeight: Dp
) {
val modifier: Modifier
val delay = remember { mutableStateOf(0) }
val tileSize = 50.dp
if (!isRocketEnabled) {
Modifier.offset(
y = maxHeight - tileSize,
)
} else {
val infiniteTransition = rememberInfiniteTransition()
val positionState = infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = infiniteRepeatable(
animation = tween(
durationMillis = 2000,
delayMillis = delay.value,
easing = LinearEasing
)
)
)
modifier = Modifier.offset(
x = (maxWidth - tileSize) * positionState.value,
y = (maxHeight - tileSize) - (maxHeight - tileSize) * positionState.value,
)
listOf(
Color(0xffDFFF00),
Color(0xffFFBF00),
Color(0xffFF7F50),
Color(0xffDE3163),
Color(0xff9FE2BF),
Color(0xff40E0D0),
Color(0xff6495ED),
Color(0xffCCCCFF),
).forEachIndexed { index, color ->
Box(
modifier = modifier
.width(tileSize)
.height(tileSize)
.background(color = color)
)
delay.value += 1000
}
}
}
When a state remembered in a composable is changed , the entire composable gets re-composed.
So to achieve the given requirement,
Instead of using a delay as a mutableState we can simply use an Int delay and update its value in the forEach loop and create an animation with the updated delay.
.forEachIndexed { index, color ->
Box(
modifier = createModifier(maxWidth, maxHeight, tileSize, createAnim(delay = delay))
.width(tileSize)
.height(tileSize)
.background(color = color)
)
delay += 1000
}
Create the modifier with animation:-
fun createModifier(maxWidth: Dp, maxHeight: Dp, tileSize: Dp, positionState: State<Float>): Modifier {
return Modifier.offset(
x = ((maxWidth - tileSize) * positionState.value),
y = ((maxHeight - tileSize) - (maxHeight - tileSize) * positionState.value),
)
}
#Composable
fun createAnim(delay: Int): State<Float> {
val infiniteTransition = rememberInfiniteTransition()
return infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 1f,
animationSpec = infiniteRepeatable(
animation = tween(
durationMillis = 2000,
delayMillis = delay,
easing = LinearEasing
)
)
)
}
I have a green square that I can drag vertically. But whenever I stop dragging it, I want it to reset the offset to the start with an animation. I tried it like this, but I can't figure it out. Does someone know how to do it?
#Composable
fun DraggableSquare() {
var currentOffset by remember { mutableStateOf(0F) }
val resetAnimation by animateIntOffsetAsState(targetValue = IntOffset(0, currentOffset.roundToInt()))
var shouldReset = false
Box(contentAlignment = Alignment.TopCenter, modifier = Modifier.fillMaxSize()) {
Surface(
color = Color(0xFF34AB52),
modifier = Modifier
.size(100.dp)
.offset {
when {
shouldReset -> resetAnimation
else -> IntOffset(0, currentOffset.roundToInt())
}
}
.draggable(
state = rememberDraggableState { delta -> currentOffset += delta },
orientation = Orientation.Vertical,
onDragStopped = {
shouldReset = true
currentOffset = 0F
}
)
) {}
}
}
You can define the offset as an Animatable.
While dragging use the method snapTo to update the current value as the initial value and the onDragStopped to start the animation.
val coroutineScope = rememberCoroutineScope()
val offsetY = remember { Animatable(0f) }
Box(contentAlignment = Alignment.TopCenter, modifier = Modifier.fillMaxSize()) {
Surface(
color = Color(0xFF34AB52),
modifier = Modifier
.size(100.dp)
.offset {
IntOffset(0, offsetY.value.roundToInt())
}
.draggable(
state = rememberDraggableState { delta ->
coroutineScope.launch {
offsetY.snapTo(offsetY.value + delta)
}
},
orientation = Orientation.Vertical,
onDragStopped = {
coroutineScope.launch {
offsetY.animateTo(
targetValue = 0f,
animationSpec = tween(
durationMillis = 3000,
delayMillis = 0
)
)
}
}
)
) {
}
}
In the past (before alpha11), I can animate a value from 0 to 1 upon triggering the composable function as below, where I can set initialValue and also have onActive with aniumateTo.
val animatedProgress = animatedFloat(0f)
onActive {
animatedProgress.animateTo(
targetValue = 1f,
anim = infiniteRepeatable(
animation =
tween(durationMillis = 2000, easing = LinearEasing),
)
)
}
val t = animatedProgress.value
However, now in alpha13, I cannot find a way to set initialValue, or animateTo. The onActive is also now deprecated.
I coded as below
val floatAnimation = animateFloatAsState(
targetValue = 1f,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 2000, easing = LinearEasing),
)
)
How can I...
Set initial value of 0
Starting the animation (without needing a state boolean to kick it off)
Animate from 0 to 1 repeatedly
You can use the Animatable API and the LaunchedEffect composable. You don't need a boolean to start the animation.
Something like:
val animatedAlpha = remember { Animatable(0f) }
Box(
Modifier
.background(color = (Color.Blue.copy(alpha = animatedAlpha.value)))
.size(100.dp,100.dp)
)
LaunchedEffect(animatedAlpha) {
animatedAlpha.animateTo(1f,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 2000, easing = LinearEasing)
))
}
Looks like I have to use a boolean to change the state and use LaunchEffect to start and change the state as below.
var start by remember{ mutableStateOf(false) }
val floatAnimation = animateFloatAsState(
targetValue = if (start) 1f else 0f,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 2000, easing = LinearEasing),
)
)
LaunchedEffect(true) {
start = true
}
val t = floatAnimation.value
Not sure if this is the best way to code around it.