https://github.com/zach-klippenstein/compose-autotransition

A simple library for automatically animating between Compose states.
https://github.com/zach-klippenstein/compose-autotransition

android animation jetpack-compose

Last synced: 8 days ago
JSON representation

A simple library for automatically animating between Compose states.

• Host: GitHub
• URL: https://github.com/zach-klippenstein/compose-autotransition
• Owner: zach-klippenstein
• License: apache-2.0
• Created: 2022-07-09T20:50:38.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-10T19:18:04.000Z (over 2 years ago)
• Last Synced: 2024-10-31T17:51:52.255Z (15 days ago)
• Topics: android, animation, jetpack-compose
• Language: Kotlin
• Homepage:
• Size: 116 KB
• Stars: 77
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# compose-autotransition

_Status: Experimental_

A simple library for automatically animating between Compose states.

```kotlin

var scale by remember { mutableStateOf(1f) }

var elevation by remember { mutableStateOf(0.dp) }

with(rememberAutoTransition()) {

    Button(onClick = {

        withAnimation {

            scale = 0.5f

            elevation = 8.dp

        }

    }) { /* … */ }

}

```

The main component of this library is the `AutoTransition.withAnimation` function, which takes a

block and animates changes to any snapshot state objects (such as those created by `mutableStateOf`)

written to inside the block. Use the `rememberAutoTransition()` Composable function to get an

instance of `AutoTransition`.

`withAnimation` uses Compose's snapshot system to determine what state you changed in the block and

then launches a coroutine to animate it. It does this by running the block in a snapshot, then

disposing the snapshot without applying it. Since the snapshot is never applied, it's important to

not perform side effects in the `withAnimation` block, or to write to any states not backed by

snapshot state.

## Demo

https://user-images.githubusercontent.com/101754/178158724-e67477be-4569-48c9-9955-cf5d01f1ccd9.mp4

## Customization

By default, `withTransition` can animate changes to any `MutableState` objects holding values of

types that Compose ships with `TwoWayConverter` vector converters for. This set is defined in

`DefaultAdapters.kt`. To specify how to handle additional types (either additional state object

types or value types inside `MutableState`s), provide a custom `AutoTransitionFactory` using

`AutoTransitionFactory.Builder` and `LocalAutoTransitionFactory`.

Here's an example of providing an adapter for a custom value type:

```kotlin

class Temp(val degrees: Float)

@Composable

fun App() {

    val factory = remember {

        AutoTransitionFactory.Builder()

            .addAdapterRegistry(MutableStateAdapter(

                Temp::class,

                TwoWayConverter(

                    convertToVector = { /* … */ },

                    convertFromVector = { /* … */ }

                )

            ))

            .build()

    }

    CompositionLocalProvider(LocalAutoTransitionFactory provides factory) {

        // Rest of app.

        HomeScreen()

    }

}

@Composable

fun HomeScreen() {

    with(rememberAutoTransition()) {

        // …

    }

}

```

The `AutoTransitionFactory.Builder` can also override the default animation spec.

## TODO

- [x] Write docs.

- [ ] Release on Maven.

- [ ] Support multiplatform.