Material motion for jetpack compose

Overview

Google

License Profile



Material Motion system animations for Jetpack Compose(early stage)

Who's using Compose Metaphor?

👉 Check out who's using Compose Metaphor

Include in your project

Maven Central

Gradle

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

dependencies {
    implementation("io.github.androidpoet:composemetaphor:1.0.0")
}
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimateVisibility() {
  var visible by remember {
    mutableStateOf(true)
  }
  Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Metaphor(
      visible = visible,
      enter = MetaphorEnterAnimation.SlideInHorizontally,
      exit = MetaphorExitAnimation.FadeOut,
      easing = MetaphorEasing.FastOutLinearInEasing,
      enterDuration = 500,
      exitDuration = 100,
      delay = 0,
      content = {

        FloatingActionButton(
          modifier = Modifier.padding(24.dp),
          onClick = {
          }
        ) {
          Icon(imageVector = Icons.Default.Add, "")
        }
      }
    )
  }

  Column(
    modifier = Modifier
      .fillMaxSize()
      .padding(0.dp, 0.dp),
    verticalArrangement = Arrangement.Bottom,
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Button(

      onClick = { visible = !visible }
    ) {
      Text("Animate")
    }
  }
}

Enter Animations

 MetaphorEnterAnimation.FadeIn
 MetaphorEnterAnimation.SharedAxisXForward
 MetaphorEnterAnimation.SharedAxisYForward
 MetaphorEnterAnimation.SharedAxisZForward
 MetaphorEnterAnimation.ElevationScale
 MetaphorEnterAnimation.SlideIn
 MetaphorEnterAnimation.SlideInHorizontally
 MetaphorEnterAnimation.SlideInVertically
 MetaphorEnterAnimation.ScaleIn
 MetaphorEnterAnimation.ExpandIn
 MetaphorEnterAnimation.ExpandHorizontally
 MetaphorEnterAnimation.ExpandVertically

Exit Animations

 MetaphorEnterAnimation.FadeOut
 MetaphorEnterAnimation.SharedAxisXBackward
 MetaphorEnterAnimation.SharedAxisYBackward
 MetaphorEnterAnimation.SharedAxisZBackward
 MetaphorEnterAnimation.ElevationScale
 MetaphorEnterAnimation.SlideOut
 MetaphorEnterAnimation.SlideOutHorizontally
 MetaphorEnterAnimation.SlideOutVertically
 MetaphorEnterAnimation.ScaleOut
 MetaphorEnterAnimation.ShrinkOut
 MetaphorEnterAnimation.ShrinkHorizontally
 MetaphorEnterAnimation.ShrinkVertically

Icon used:3d modeling icons created by Good Ware - Flaticon

Find this library useful? ❤️

Support it by joining stargazers for this repository.

License

Copyright 2022 AndroidPoet (Ranbir Singh)

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...
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries, The application make use of jikan Api which displays a list of animations,there more details and even trailers of the animations.

A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

K5-compose is a sketchy port of p5.js for Jetpack Compose
K5-compose is a sketchy port of p5.js for Jetpack Compose

k5-compose k5-compose is a sketchy port of P5.js for Jetpack Compose Desktop. This library provides you a playground to play with your sketches so you

Owner
Ranbir Singh
Android Developer • Android Poet•Open Source Contributor•Obsessed with Animations. Freelancer with 5 years of experience
Ranbir Singh
A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose

SlideTodo A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose you can find source code here Getting Started allprojects

Nthily 7 Aug 8, 2022
A library that enables reuse of Material themes defined in XML for theming in Jetpack Compose.

MDC-Android Compose Theme Adapter A library that enables reuse of Material Components for Android XML themes for theming in Jetpack Compose. The basis

Material Components 409 Dec 24, 2022
A lightweight library for using Material Colors in Android Jetpack Compose Project 🚀🚀🚀

How To Use Step 1: Add the JitPack repository to your build file. Add it in your root build.gradle / build.gradle.kts at the end of repositories: Groo

Atick Faisal 9 Sep 9, 2022
A Jetpack Compose implementation of Owl, a Material Design study

Owl sample This sample is a Jetpack Compose implementation of Owl, a Material De

Alexander 1 Feb 26, 2022
ToDo-Task-App - An Android App built to demonstrate the use of Jetpack Compose, Material You, Room Database, and MVVM

ToDo Task App ToDo Task App is a sample Android app built with Jetpack Compose.

null 0 Jan 17, 2022
Material You using Jetpack Compose

Material You using Jetpack Compose. How to keep M2 alongside with M3 in a project. Repo to play with Material Themes and MDC

Luis Barqueira 3 Jul 28, 2022
A setting library for Jetpack Compose with Material You design

ComposeSetting This is a basic Compose setting library that provides a basic Material3 setting components It also provides a persistent state system b

RE 13 Nov 10, 2022
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023