A library for dynamic view-to-view transitions

Dev Labs

Last update: Dec 23, 2022

Related tags

Animations android kotlin library view animation dynamic android-library keyframe transition keyframes keyframe-animation transitioner

Overview

Transitioner provides easy, dynamic and adjustable animations between two views with nested children.

App design feature here.

Usage

First you need to create a Transitioner object containing your original and ending views:

val transition = Transitioner(original_view, ending_view)

The view pairs must have matching "tag" attributes so that they can be bound together:

<ConstraintLayout
        android:id="@+id/original_view"
        android:tag="constrView"
        ...>

        <TextView
            android:id="@+id/text"
            android:tag="firstView"
            .../>
</ConstraintLayout>

<ConstraintLayout
        android:id="@+id/ending_view"
        android:tag="constrView"
        android:visibility="invisible"
        ...>

        <EditText
            android:id="@+id/text3"
            android:tag="firstView"
            .../>
 </ConstraintLayout>

I recommend you hide the second view layout, since it's only used as a placeholder for the end destination. The views can be of any type, you can mix and match them, the two layouts can have a different number of views and nested layouts are 100% supported. The only things to keep in mind are:

all views which you would want to match together must have the same tag attribute in both layouts
all unmatched views will remain at their original place inside the original layout
the second layout is just a placeholder. It doesn't hold any logic, it only shows where the original layout should move to.

Basic Usage

 transition.setProgress(0.5f)
 //or
 transition.setProgress(50)

Additional methods and tweaks

transition.duration = 500

transition.interpolator = AccelerateDecelerateInterpolator()

transition.animateTo(percent = 0f)

transition.onProgressChanged {
//triggered on every progress change of the transition
    seekBar.progress = (it * 100).toInt()
    }
    
val progress: Float = transition.currentProgress

Here is a preview of a simple application made using this library

This effect can be reproduced by placing the "Transitioner.setProgress(Float)" function inside a onTouch or a onProgressChanged method.

Download

Manually

The recommended way to download is to copy the single library class file and use it in your application.

Gradle

dependencies {
  compile 'bg.devlabs.transitioner:transitioner:<latest_version>'
}

Getting help

Dev Labs @devlabsbg

Radoslav Yankov @rado__yankov

Under MIT License.

You might also like...

Android Library to create Lottie animation view dialog easily with a lot of customization

39 Oct 7, 2022

FadingToolbar is an animation library which fades out your footer view in a ScrollView/RecyclerView and fades in a toolbar title

FadingToolbar is an animation library which fades out your footer view in a ScrollView/RecyclerView and fades in a toolbar title (analogue of the LargeTitle animation in iOS)

9 Nov 3, 2022

Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. The library is based on the code of Mario Klingemann.

Android StackBlur Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. Th

3.6k Dec 29, 2022

Postman is a reactive One-tap SMS verification library. This library allows the usage of RxJava with The SMS User Consent API

What is Postman? Postman is a reactive One-tap SMS verification library. This library allows the usage of RxJava with The SMS User Consent API Usage P

129 Dec 24, 2022

Cute view animation collection.

Android View Animations One day, I saw an iOS library, which is a view shaker, it's very beautiful. I think Android also need one, and should be bette

12.2k Jan 1, 2023

Android view with both path from constructed path or from svg.

android-pathview You want to animate svg or normal Paths?br Change the color, pathWidth or add svg.br Animate the "procentage" property to make th

2.9k Dec 30, 2022

ViewAnimator view with a lollipop style reveal effect

ViewRevealAnimator Widget ViewAnimator view with a lollipop style reveal effect. Regular animation can be set (just like the default ViewAnimator) for

339 Jun 3, 2022

Android view inspired by http://qrohlf.com/trianglify/

Trianglify Android view inspired by http://qrohlf.com/trianglify/ Usage Add the dependency dependencies { compile 'com.manolovn:trianglify:1.1.0'

457 Dec 15, 2022

🌠 Transform into a different view or activity using morphing animations.

TransformationLayout 🌠 Transform into a different view or activity using morphing animations. Using Transformation motions of new material version. D

2k Jan 3, 2023

Comments

AnimateTo Bug?

Hello, I'm still trying to do some animations with transitioner: unfortunately, I'm experiencing a lot of issues.

For example, in code I linked below I can expand my cardview with a "scroll down gesture" but I can't reduce it with a swipe up (I debugged the code and the if clauses are correctly called):

https://gist.github.com/davidmarinangeli/7eec8455654850b3d3540ff9a9384bd6

You can find the XML here: https://gist.github.com/davidmarinangeli/a4d0724d0f0283096e81e7ecf357c788

opened by davidmarinangeli 8
How can I make a swipe transition?

Hello!

I really like your library and I'm trying to develop a transition like the weather app on your Readme: how could I make an up/down swipe?

I've tried with this but the result is VERY BAD. Do you know where I can find some examples? Thanks. var screenSize = size.y screen.setOnTouchListener { v, event -> when (event.action) { MotionEvent.ACTION_DOWN -> { oldY = event.y true } MotionEvent.ACTION_MOVE -> { transition.setProgress((event.y - oldY)/screenSize) true } else -> { true } } }

opened by davidmarinangeli 5
java.lang.NoClassDefFoundError: Failed resolution of: Lkotlin/jvm/internal/Intrinsics;

Caused by: java.lang.ClassNotFoundException: Didn't find class "kotlin.jvm.internal.Intrinsics" on path: DexPathList[[zip file "/data/app/**/base.apk"],nativeLibraryDirectories=[/vendor/lib, /system/lib]]

opened by krunalindrodiya 3