🪐 Jetpack Compose animation library that allows you to implement animations such as shared element transition.

Overview

Orbital


Google
License API Build Status Android Weekly Kotlin Weekly Profile


🪐 Jetpack Compose animation library that allows you to implement animations such as shared element transition.


Download

Maven Central

Gradle

Add the dependency below to your module's build.gradle file:

dependencies {
    implementation "com.github.skydoves:orbital:0.2.1"
}

Note: This is an experimental library that demonstrates various animations with Jetpack Compose. Please make sure that your project uses Jetpack Compose 1.3.0-alpha03, Compose Compiler 1.3.0, and Kotlin 1.7.10.

Usage

You can implement three kinds of animations with Orbital: Movement, Transformation, and Shared Element Transition. Basically, you can run animation with Orbital Composable function, which provides OrbitalScope that allows you to create animations.

Transformation

The example below shows how to implement resizing animation with the animateTransformation extension of the OrbitalScope. The rememberContentWithOrbitalScope allows you to create custom animations such as animateTransformation on the OrbitalScope. You can apply the animateTransformation animation to specific Composables and customize its AnimationSpec as seen the below:

  val transformationSpec = SpringSpec<IntSize>(
    dampingRatio = Spring.DampingRatioMediumBouncy,
    stiffness = 200f
  )

  var isTransformed by rememberSaveable { mutableStateOf(false) }
  val poster = rememberContentWithOrbitalScope {
    GlideImage(
      modifier = if (isTransformed) {
        Modifier.size(300.dp, 620.dp)
      } else {
        Modifier.size(100.dp, 220.dp)
      }.animateTransformation(this, transformationSpec),
      imageModel = ItemUtils.urls[0],
      contentScale = ContentScale.Fit
    )
  }

  Orbital(
    modifier = Modifier
      .clickable { isTransformed = !isTransformed }
  ) {
    Column(
      Modifier.fillMaxSize(),
      horizontalAlignment = Alignment.CenterHorizontally,
      verticalArrangement = Arrangement.Center
    ) {
      poster()
    }
  }

Movement

The example below shows how to implement movement animation with the animateMovement extension of the OrbitalScope. The rememberContentWithOrbitalScope allows you to create custom animations such as animateMovement on the OrbitalScope. You can apply the animateMovement animation to specific Composables and customize its AnimationSpec as seen the below:

  val movementSpec = SpringSpec<IntOffset>(
    dampingRatio = Spring.DampingRatioMediumBouncy,
    stiffness = 200f
  )
  
  var isTransformed by rememberSaveable { mutableStateOf(false) }
  val poster = rememberContentWithOrbitalScope {
    GlideImage(
      modifier = if (isTransformed) {
        Modifier.size(360.dp, 620.dp)
      } else {
        Modifier.size(130.dp, 220.dp)
      }.animateMovement(this, movementSpec),
      imageModel = ItemUtils.urls[3],
      contentScale = ContentScale.Fit
    )
  }

  Orbital(
    modifier = Modifier
      .clickable { isTransformed = !isTransformed }
  ) {
    if (isTransformed) {
      Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
      ) {
        poster()
      }
    } else {
      Column(
        Modifier
          .fillMaxSize()
          .padding(20.dp),
        horizontalAlignment = Alignment.End,
        verticalArrangement = Arrangement.Bottom
      ) {
        poster()
      }
    }
  }

Shared Element Transition

The example below shows how to implement shared element transition with the animateSharedElementTransition extension of the OrbitalScope. The rememberContentWithOrbitalScope allows you to create custom animations such as animateSharedElementTransition on the OrbitalScope. You can apply the animateSharedElementTransition animation to specific Composables and customize its AnimationSpec. Also, you can set the different AnimationSpecs for the movement and transformation as seen the below:

@Composable
private fun OrbitalSharedElementTransitionExample() {
  var isTransformed by rememberSaveable { mutableStateOf(false) }
  val item = MockUtils.getMockPosters()[3]
  val poster = rememberContentWithOrbitalScope {
    GlideImage(
      modifier = if (isTransformed) {
        Modifier.fillMaxSize()
      } else {
        Modifier.size(130.dp, 220.dp)
      }.animateSharedElementTransition(
        this,
        SpringSpec(stiffness = 500f),
        SpringSpec(stiffness = 500f)
      ),
      imageModel = item.poster,
      contentScale = ContentScale.Fit
    )
  }

  Orbital(
    modifier = Modifier
      .clickable { isTransformed = !isTransformed }
  ) {
    if (isTransformed) {
      PosterDetails(
        poster = item,
        sharedElementContent = { poster() },
        pressOnBack = {}
      )
    } else {
      Column(
        Modifier
          .fillMaxSize()
          .padding(20.dp),
        horizontalAlignment = Alignment.End,
        verticalArrangement = Arrangement.Bottom
      ) {
        poster()
      }
    }
  }
}

Note: LookaheadLayout is a very experimental API, so measuring complex Composables might throw exceptions.

Shared Element Transition with Multiple Items

The example below shows how to implement shared element transition with multipe items. The basic concept of the usage is the same as the Shared Element Transition example.

  var isTransformed by rememberSaveable { mutableStateOf(false) }
  val items = rememberContentWithOrbitalScope {
    ItemUtils.urls.forEach { url ->
      GlideImage(
        modifier = if (isTransformed) {
          Modifier.size(140.dp, 180.dp)
        } else {
          Modifier.size(100.dp, 220.dp)
        }
          .animateSharedElementTransition(movementSpec, transformationSpec)
          .padding(8.dp),
        imageModel = url,
        contentScale = ContentScale.Fit
      )
    }
  }

  Orbital(
    modifier = Modifier
      .fillMaxSize()
      .clickable { isTransformed = !isTransformed },
    isTransformed = isTransformed,
    onStartContent = {
      Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
      ) {
        items()
      }
    },
    onTransformedContent = {
      Row(
        verticalAlignment = Alignment.CenterVertically
      ) { items() }
    }
  )

Find this repository useful? ❤️

Support it by joining stargazers for this repository.
Also, follow me on GitHub for my next creations! 🤩

License

Designed and developed by 2022 skydoves (Jaewoong Eum)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
Allows the easy creation of animated transition effects when the state of Android UI has changed
Allows the easy creation of animated transition effects when the state of Android UI has changed

android-transition Android-Transition allows the easy creation of view transitions that reacts to user inputs. The library is designed to be general e

A lightweight android library that allows to you create custom fast forward/rewind animations like on Netflix.
A lightweight android library that allows to you create custom fast forward/rewind animations like on Netflix.

SuperForwardView About A lightweight android library that allows to you create custom fast forward/rewind animations like on Netflix. GIF Design Credi

Add Animatable Material Components in Android Jetpack Compose.  Create jetpack compose animations painless.
Add Animatable Material Components in Android Jetpack Compose. Create jetpack compose animations painless.

AnimatableCompose Add Animatable Material Components in Android Jetpack Compose. Create jetpack compose animation painless. What you can create from M

Group of libraries to help you build better animations with Jetpack Compose
Group of libraries to help you build better animations with Jetpack Compose

Group of libraries to help you build better animations with Jetpack Compose

[] An Android library which allows developers to easily add animations to ListView items
[] An Android library which allows developers to easily add animations to ListView items

DEPRECATED ListViewAnimations is deprecated in favor of new RecyclerView solutions. No new development will be taking place, but the existing versions

Android Animation Easing Functions. Let's make animation more real!
Android Animation Easing Functions. Let's make animation more real!

Android Easing Functions This project is originally from my another project, AndroidViewAnimation, which is an animation collection, to help you make

Onboarding sample project with view pager & shared preferences

Onboarding Sample Project When the application is first downloaded, we go to onboarding from the splash screen. We keep the information that onboardin

Examples of the use of animations in jetpack compose and view, as well as measurements of perfomance
Examples of the use of animations in jetpack compose and view, as well as measurements of perfomance

AndroidAnimationWorld Примеры использования анимаций в jetpack compose и view, а также замеры perfomance для

Jetpack Compose Animations

Jetpack Compose Animations Animations Duolingo Owl - Anmol Verma Screen.

Comments
  • Pre-release version of Kotlin

    Pre-release version of Kotlin

    Please complete the following information:

    • Library Version [e.g. v0.20]
    • Affected Device(s) [Samsung Galaxy A53 with Android 12.0]

    Describe the Bug:

    Getting this error: is compiled by a pre-release version of Kotlin and cannot be loaded by this version of the compiler And i have kotlin 1.7.10, compose 1.3.0-alpha03 and compose compiler 1.3.0

    Expected Behavior:

    Should be able to build the project without issues when adding the orbital library.

    opened by Vivecstel 4
  • Shared element composable inside `LazyRow` crashes while scrolling horizontally

    Shared element composable inside `LazyRow` crashes while scrolling horizontally

    Please complete the following information:

    • Library Version - v0.2.2
    • Test Device(s) - Emulator with Android 13, Poco F1 with Android 12

    Describe the Bug:

    How do I handle the shared element transition of a composable within a LazyRow? The app just crashes when I try to scroll through the row, the transition works fine as intended.

    Expected Behavior:

    The LazyRow should scroll horizontally, but instead crashes.

    Stacktrace:

    E/AndroidRuntime: FATAL EXCEPTION: main
        Process: app.test.compose, PID: 3603
        java.lang.IllegalStateException: Check failed.
            at androidx.compose.ui.node.LayoutNodeLayoutDelegate$LookaheadPassDelegate.replace(LayoutNodeLayoutDelegate.kt:1045)
            at androidx.compose.ui.node.LayoutNode.lookaheadReplace$ui_release(LayoutNode.kt:829)
            at androidx.compose.ui.node.MeasureAndLayoutDelegate.measureAndLayout-0kLqBqw(MeasureAndLayoutDelegate.kt:352)
            at androidx.compose.ui.platform.AndroidComposeView.measureAndLayout-0kLqBqw(AndroidComposeView.android.kt:783)
            at androidx.compose.ui.layout.LayoutNodeSubcompositionsState$precompose$1.premeasure-0kLqBqw(SubcomposeLayout.kt:671)
            at androidx.compose.foundation.lazy.layout.LazyLayoutPrefetcher.run(LazyLayoutPrefetcher.android.kt:187)
            at android.os.Handler.handleCallback(Handler.java:942)
            at android.os.Handler.dispatchMessage(Handler.java:99)
            at android.os.Looper.loopOnce(Looper.java:201)
            at android.os.Looper.loop(Looper.java:288)
            at android.app.ActivityThread.main(ActivityThread.java:7898)
            at java.lang.reflect.Method.invoke(Native Method)
            at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)
    
    opened by Yash-Garg 2
  • Use context-receivers to reduced the number of parameters passed

    Use context-receivers to reduced the number of parameters passed

    rememberContentWithOrbitaryScope {
      // Before
      Box(Modifier.animateXX(this, XXSpec)) { .. }
      // After
      Box(Modifier.animateXX(XXSpec)) { .. }
    }
    

    It will be easier to use.

    opened by qdsfdhvh 1
  • Fix isTransformed is inversed

    Fix isTransformed is inversed

    Guidelines

    Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.

    Types of changes

    What types of changes does your code introduce?

    • [x] Bugfix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

    Preparing a pull request for review

    Ensure your change is properly formatted by running:

    $ ./gradlew spotlessApply
    

    Please correct any failures before requesting a review.

    opened by Kyant0 0
Releases(0.2.3)
  • 0.2.3(Nov 15, 2022)

    What's Changed

    • Update Compose Compiler to 1.3.1 by @skydoves in https://github.com/skydoves/Orbital/pull/15
    • Update Compose to 1.3.0-rc01, Compose compiler to 1.3.2, and Kotlin to 1.7.20 by @skydoves in https://github.com/skydoves/Orbital/pull/16
    • Bump Compose to 1.3.1 by @skydoves in https://github.com/skydoves/Orbital/pull/18

    Full Changelog: https://github.com/skydoves/Orbital/compare/0.2.2...0.2.3

    Source code(tar.gz)
    Source code(zip)
  • 0.2.2(Aug 27, 2022)

    What's Changed

    • Update Compose UI to 1.3.0-beta01 by @skydoves in https://github.com/skydoves/Orbital/pull/13

    Full Changelog: https://github.com/skydoves/Orbital/compare/0.2.1...0.2.2

    Source code(tar.gz)
    Source code(zip)
  • 0.2.1(Aug 15, 2022)

    What's Changed

    • Removed Context-Receiver by @skydoves in https://github.com/skydoves/Orbital/pull/12
    • Resolved issue #11

    Full Changelog: https://github.com/skydoves/Orbital/compare/0.2.0...0.2.1

    Source code(tar.gz)
    Source code(zip)
  • 0.2.0(Aug 11, 2022)

    💡 What's Changed

    • Update Compose Compiler to 1.3.0 and Kotlin to 1.7.10 by @skydoves in https://github.com/skydoves/Orbital/pull/9
    • Rename package name Orbitary to Orbital by @skydoves in https://github.com/skydoves/Orbital/pull/10

    ⚠️ API Breaking

    The entire package and library name was changed from Orbitary to Orbital.

    Full Changelog: https://github.com/skydoves/Orbital/compare/0.1.2...0.2.0

    Source code(tar.gz)
    Source code(zip)
  • 0.1.2(Aug 5, 2022)

    What's Changed

    • Improved animation scope extensions and update animation specs by @skydoves in https://github.com/skydoves/Orbitary/pull/5
    • Defined the measure policy independently by @skydoves in https://github.com/skydoves/Orbitary/pull/6
    • Added a MeasurePolicy to the Orbitary composables by @skydoves in https://github.com/skydoves/Orbitary/pull/7
    • Updated Compose to 1.3.0-alpha02 and compiler to 1.3.0-rc02 by @skydoves in https://github.com/skydoves/Orbitary/pull/8

    Full Changelog: https://github.com/skydoves/Orbitary/compare/0.1.1...0.1.2

    Source code(tar.gz)
    Source code(zip)
  • 0.1.1(Jul 16, 2022)

    🎉 Orbitary 0.1.1 has been released! 🎉

    What's Changed

    • Add a new sample of Shared Element Transition by @skydoves in https://github.com/skydoves/Orbitary/pull/1
    • Use context-receivers to reduce the number of parameters passed by @qdsfdhvh in https://github.com/skydoves/Orbitary/pull/2
    • Clean up Gradle files and remove unused dependencies by @skydoves in https://github.com/skydoves/Orbitary/pull/3
    • Add BaselineProfiles for improving library performance by @skydoves in https://github.com/skydoves/Orbitary/pull/4

    New Contributors

    • @skydoves made their first contribution in https://github.com/skydoves/Orbitary/pull/1
    • @qdsfdhvh made their first contribution in https://github.com/skydoves/Orbitary/pull/2

    Full Changelog: https://github.com/skydoves/Orbitary/compare/0.1.0...0.1.1

    Source code(tar.gz)
    Source code(zip)
  • 0.1.0(Jul 2, 2022)

    🎉 Orbitary has been released! 🎉

    🪐 Jetpack Compose animation library that allows you to implement animations such as shared element transition.

    Note: This is an experimental library that demonstrates various animations with Jetpack Compose. Please make sure that your project uses Jetpack Compose 1.3.0-alpha01, Compose Compiler 1.2.0, and Kotlin 1.7.0.

    Source code(tar.gz)
    Source code(zip)
Owner
Jaewoong Eum
Android Developer Advocate @GetStream 🥑 • GDE for Android • Open Source Software Engineer ❤️ • Love coffee, music, magic tricks, and writing poems.
Jaewoong Eum
Simple tool which help you to implement activity and fragment transition for pre-Lollipop devices.

PreLollipopTransition Simple tool which help you to implement activity and fragment transition for pre-Lollipop devices. Download In your app build.gr

Takahiro Menju 1.3k Nov 28, 2022
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures

Stfalcon ImageViewer A simple and customizable full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" g

Stfalcon LLC 1.9k Jan 5, 2023
Lightweight Android library for cool activity transition animations

Bungee min SDK 16 (Android Jellybean 4.1) written in Java A lightweight, easy-to-use Android library that provides awesome activity transition animati

Dean Spencer 172 Nov 18, 2022
Android library to control Transition animates. A simple way to create a interactive animation.

TransitionPlayer Android library to control Transition animates. A simple way to create a interactive animation. Demo1 SimpleTransition Code: ....

林法鑫 1.2k Dec 17, 2022
Android library to control Transition animates. A simple way to create a interactive animation.

TransitionPlayer Android library to control Transition animates. A simple way to create a interactive animation. Demo1 SimpleTransition Code: ....

林法鑫 1.2k Dec 17, 2022
Android Transition animations explanation with examples.

UNMAINTAINED No maintainance is intended. The content is still valid as a reference but it won't contain the latest new stuff Android Transition Frame

Luis G. Valle 13.6k Dec 28, 2022
ArcAnimator helps to create arc transition animation: 2.3.+

ArcAnimator ArcAnimator helps to create arc transition animation: 14+ | ArcAnimator Demo | TransitionLoop Demo* *TransitionLoop Prototype by Min-Sang

Asyl Isakov 1.2k Dec 20, 2022
3D animation examples for support-v4 Fragment transition.

FragmentAnimations Animation examples for support.v4.Fragment transition. These animations do not depends on any external libraries. Usage Example In

Keita Kajiwara 1.1k Dec 14, 2022
This is a simple util to create Activity transition animation

TransitionHelper This is a simple util to create Activity transition animation API compatible with Android 2.2+ 中文说明 Screenshots How to use 1.startAct

ImmortalZ 1.6k Dec 12, 2022
🍭🚀💗 Tutorials about animations with Animators, Animated Vector Drawables, Shared Transitions, and more

?????? Tutorials about animations with Animators, Animated Vector Drawables, Shared Transitions, and more

Smart Tool Factory 696 Dec 28, 2022