Skip to content

Commit

Permalink
update screen transition (#428)
Browse files Browse the repository at this point in the history
* update screen transition

* review related updates

* review related updates
  • Loading branch information
shpasha authored Jun 3, 2024
1 parent a7b5c12 commit 486497c
Show file tree
Hide file tree
Showing 9 changed files with 307 additions and 29 deletions.
84 changes: 80 additions & 4 deletions docs/transitions-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,20 +80,96 @@ setContent {

If you want to define a Enter and Exit transition for a specific Screen, you have a lot of options to do
starting from 1.1.0-beta01 Voyager have a new experimental API for this purpose.
To animate the content, we use transitions of the target screen in the case of push navigation, otherwise we use transitions of the initial screen

```kotlin
class ExampleScaleScreen : Screen, ScreenTransition {
class ExampleSlideScreen : Screen, ScreenTransition {
override val key: ScreenKey
get() = uniqueScreenKey

@Composable
override fun Content() {
...
}

override fun enter(): EnterTransition? = scaleIn()

override fun exit(): ExitTransition? = scaleOut()
override fun enter(lastEvent: StackEvent): EnterTransition {
return slideIn { size ->
val x = if (lastEvent == StackEvent.Pop) -size.width else size.width
IntOffset(x = x, y = 0)
}
}

override fun exit(lastEvent: StackEvent): ExitTransition {
return slideOut { size ->
val x = if (lastEvent == StackEvent.Pop) size.width else -size.width
IntOffset(x = x, y = 0)
}
}
}
```

It's convenient to use Kotlin delegates for per-Screen transitions. For example, you can create a `SlideTransition` and `FadeTransition` classes:

```kotlin
class FadeTransition : ScreenTransition {

override fun enter(lastEvent: StackEvent): EnterTransition {
return fadeIn(tween(500, delayMillis = 500))
}

override fun exit(lastEvent: StackEvent): ExitTransition {
return fadeOut(tween(500))
}
}

class SlideTransition : ScreenTransition {

override fun enter(lastEvent: StackEvent): EnterTransition {
return slideIn { size ->
val x = if (lastEvent == StackEvent.Pop) -size.width else size.width
IntOffset(x = x, y = 0)
}
}

override fun exit(lastEvent: StackEvent): ExitTransition {
return slideOut { size ->
val x = if (lastEvent == StackEvent.Pop) size.width else -size.width
IntOffset(x = x, y = 0)
}
}
}
```

Then you can use them as delegates in your Screens:

```kotlin
class SlideScreen : Screen, ScreenTransition by SlideTransition() {

@Composable
override fun Content() {
...
}
}

class FadeScreen : Screen, ScreenTransition by FadeTransition() {

@Composable
override fun Content() {
...
}
}
```

Also you can use can pass your custom `ScreenTransition` instance in `ScreenTransition` function, it will be used for default animation.

```kotlin
setContent {
Navigator(FadeScreen) { navigator ->
ScreenTransition(
navigator = navigator,
defaultTransition = SlideTransition()
)
}
}
```

Expand Down
1 change: 1 addition & 0 deletions samples/android/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
<activity android:name=".nestedNavigation.NestedNavigationActivity"/>
<activity android:name=".parcelableScreen.ParcelableActivity"/>
<activity android:name=".screenModel.ScreenModelActivity"/>
<activity android:name=".screenTransition.ScreenTransitionActivity"/>
<activity android:name=".androidViewModel.AndroidViewModelActivity"/>
<activity android:name=".bottomSheetNavigation.BottomSheetNavigationActivity"/>
<activity android:name=".rxJavaIntegration.RxJavaIntegrationActivity"/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import cafe.adriel.voyager.sample.nestedNavigation.NestedNavigationActivity
import cafe.adriel.voyager.sample.parcelableScreen.ParcelableActivity
import cafe.adriel.voyager.sample.rxJavaIntegration.RxJavaIntegrationActivity
import cafe.adriel.voyager.sample.screenModel.ScreenModelActivity
import cafe.adriel.voyager.sample.screenTransition.ScreenTransitionActivity
import cafe.adriel.voyager.sample.stateStack.StateStackActivity
import cafe.adriel.voyager.sample.tabNavigation.TabNavigationActivity

Expand Down Expand Up @@ -66,6 +67,7 @@ class SampleActivity : ComponentActivity() {
StartSampleButton<LiveDataIntegrationActivity>("LiveData Integration")
StartSampleButton<HiltMainActivity>("Hilt Integration")
StartSampleButton<LegacyActivity>("Legacy Integration")
StartSampleButton<ScreenTransitionActivity>("Screen Transition")
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
package cafe.adriel.voyager.sample.screenTransition

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cafe.adriel.voyager.core.screen.Screen
import cafe.adriel.voyager.core.screen.ScreenKey
import cafe.adriel.voyager.transitions.ScreenTransition

private val colors = listOf(
Color.Red,
Color.Yellow,
Color.Green,
Color.Blue,
Color.Black
)

abstract class BaseSampleScreen(
private val transitionType: String
) : Screen {

abstract val index: Int

override val key: ScreenKey get() = "SampleScreen$index"

@Composable
override fun Content() {
Column(
modifier = Modifier
.fillMaxSize()
.background(colors[index % colors.size].copy(alpha = 0.3f))
.padding(40.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Screen $index",
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = transitionType,
fontSize = 18.sp
)
}
}
}

data class NoCustomAnimationSampleScreen(
override val index: Int
) : BaseSampleScreen("Default transition")

data class FadeAnimationSampleScreen(
override val index: Int
) : BaseSampleScreen("Fade transition"), ScreenTransition by FadeTransition()
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
package cafe.adriel.voyager.sample.screenTransition

import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideOut
import androidx.compose.ui.unit.IntOffset
import cafe.adriel.voyager.core.stack.StackEvent
import cafe.adriel.voyager.transitions.ScreenTransition

class FadeTransition : ScreenTransition {

override fun enter(lastEvent: StackEvent): EnterTransition {
return fadeIn(tween(500, delayMillis = 500))
}

override fun exit(lastEvent: StackEvent): ExitTransition {
return fadeOut(tween(500))
}
}

class SlideTransition : ScreenTransition {

override fun enter(lastEvent: StackEvent): EnterTransition {
return slideIn { size ->
val x = if (lastEvent == StackEvent.Pop) -size.width else size.width
IntOffset(x = x, y = 0)
}
}

override fun exit(lastEvent: StackEvent): ExitTransition {
return slideOut { size ->
val x = if (lastEvent == StackEvent.Pop) size.width else -size.width
IntOffset(x = x, y = 0)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
package cafe.adriel.voyager.sample.screenTransition

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import cafe.adriel.voyager.navigator.Navigator
import cafe.adriel.voyager.transitions.ScreenTransition

class ScreenTransitionActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

setContent {
Content()
}
}

@Composable
fun Content() {
Navigator(
screen = NoCustomAnimationSampleScreen(0)
) { navigator ->
Box(modifier = Modifier.fillMaxSize()) {
ScreenTransition(
navigator = navigator,
defaultTransition = SlideTransition()
)

Row(
modifier = Modifier
.align(Alignment.BottomCenter)
.fillMaxWidth()
.padding(40.dp),
horizontalArrangement = Arrangement.spacedBy(20.dp)
) {
Button(
onClick = { navigator.push(FadeAnimationSampleScreen(navigator.items.size)) },
modifier = Modifier.weight(1f)
) {
Text(text = "Fade")
}

Button(
onClick = { navigator.push(NoCustomAnimationSampleScreen(navigator.items.size)) },
modifier = Modifier.weight(1f)
) {
Text(text = "Default")
}

Button(
onClick = { navigator.pop() },
modifier = Modifier.weight(1f)
) {
Text(text = "Pop")
}
}
}
}
}
}
6 changes: 4 additions & 2 deletions voyager-transitions/api/android/voyager-transitions.api
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ public final class cafe/adriel/voyager/transitions/ComposableSingletons$ScreenTr
public static final field INSTANCE Lcafe/adriel/voyager/transitions/ComposableSingletons$ScreenTransitionKt;
public static field lambda-1 Lkotlin/jvm/functions/Function4;
public static field lambda-2 Lkotlin/jvm/functions/Function4;
public static field lambda-3 Lkotlin/jvm/functions/Function4;
public fun <init> ()V
public final fun getLambda-1$voyager_transitions_release ()Lkotlin/jvm/functions/Function4;
public final fun getLambda-2$voyager_transitions_release ()Lkotlin/jvm/functions/Function4;
public final fun getLambda-3$voyager_transitions_release ()Lkotlin/jvm/functions/Function4;
}

public final class cafe/adriel/voyager/transitions/ComposableSingletons$SlideTransitionKt {
Expand All @@ -48,8 +50,8 @@ public final class cafe/adriel/voyager/transitions/ScaleTransitionKt {
}

public final class cafe/adriel/voyager/transitions/ScreenTransition$DefaultImpls {
public static fun enter (Lcafe/adriel/voyager/transitions/ScreenTransition;)Landroidx/compose/animation/EnterTransition;
public static fun exit (Lcafe/adriel/voyager/transitions/ScreenTransition;)Landroidx/compose/animation/ExitTransition;
public static fun enter (Lcafe/adriel/voyager/transitions/ScreenTransition;Lcafe/adriel/voyager/core/stack/StackEvent;)Landroidx/compose/animation/EnterTransition;
public static fun exit (Lcafe/adriel/voyager/transitions/ScreenTransition;Lcafe/adriel/voyager/core/stack/StackEvent;)Landroidx/compose/animation/ExitTransition;
}

public final class cafe/adriel/voyager/transitions/ScreenTransitionKt {
Expand Down
6 changes: 4 additions & 2 deletions voyager-transitions/api/desktop/voyager-transitions.api
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ public final class cafe/adriel/voyager/transitions/ComposableSingletons$ScreenTr
public static final field INSTANCE Lcafe/adriel/voyager/transitions/ComposableSingletons$ScreenTransitionKt;
public static field lambda-1 Lkotlin/jvm/functions/Function4;
public static field lambda-2 Lkotlin/jvm/functions/Function4;
public static field lambda-3 Lkotlin/jvm/functions/Function4;
public fun <init> ()V
public final fun getLambda-1$voyager_transitions ()Lkotlin/jvm/functions/Function4;
public final fun getLambda-2$voyager_transitions ()Lkotlin/jvm/functions/Function4;
public final fun getLambda-3$voyager_transitions ()Lkotlin/jvm/functions/Function4;
}

public final class cafe/adriel/voyager/transitions/ComposableSingletons$SlideTransitionKt {
Expand All @@ -48,8 +50,8 @@ public final class cafe/adriel/voyager/transitions/ScaleTransitionKt {
}

public final class cafe/adriel/voyager/transitions/ScreenTransition$DefaultImpls {
public static fun enter (Lcafe/adriel/voyager/transitions/ScreenTransition;)Landroidx/compose/animation/EnterTransition;
public static fun exit (Lcafe/adriel/voyager/transitions/ScreenTransition;)Landroidx/compose/animation/ExitTransition;
public static fun enter (Lcafe/adriel/voyager/transitions/ScreenTransition;Lcafe/adriel/voyager/core/stack/StackEvent;)Landroidx/compose/animation/EnterTransition;
public static fun exit (Lcafe/adriel/voyager/transitions/ScreenTransition;Lcafe/adriel/voyager/core/stack/StackEvent;)Landroidx/compose/animation/ExitTransition;
}

public final class cafe/adriel/voyager/transitions/ScreenTransitionKt {
Expand Down
Loading

0 comments on commit 486497c

Please sign in to comment.