dev-labs-bg / transitioner

A library for dynamic view-to-view transitions

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.

transitioner's Issues

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

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]]

how did you achieved gif animation

what is the tool you used to make that gif animation?

Benefits ?

Hey,
What are the main benefits for using this library instead of this

issue importing

I get this:

Can i use its functionality in java other than kotlin

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 } } }