• Stars
    star
    2,054
  • Rank 21,650 (Top 0.5 %)
  • Language
    Kotlin
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A library for dynamic view-to-view transitions

logo

License: MIT Download Twitter URL

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

Preview

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.

More Repositories

1

swift-video-generator

Swift
613
star
2

fast-list

Create fast, dynamic recycler views. No adapter, no view holders
Kotlin
285
star
3

fullscreen-video-view

Java
98
star
4

football-stats

Tracking of football players and analysis
Python
92
star
5

twinkle

Twinkle Android view elements in Kotlin
Kotlin
62
star
6

sportify

Football match prediction game with simple rules, built on Symfony
JavaScript
32
star
7

flying-fab

Kotlin
20
star
8

samples

Code samples, used in our public articles, tutorials and courses
Swift
18
star
9

walk-detector

An android app that notifies you when you are walking for selected period of time
Java
14
star
10

SKCache

A caching library for each type in iOS
Swift
10
star
11

hr-bot

HR Bot that finds the right persons for a Recruiter's job
PHP
7
star
12

geofencing

Leaflet geofencing example implemented on ReactJS
JavaScript
7
star
13

game-scorer

Android application which helps you and your friends to keep track of the score in a game
Kotlin
7
star
14

devlabs-internal-code-conventions

DevLabs internal code conventions for writing beautiful code.
7
star
15

laravel-csv-importer

A CSV importer/exporter library for Laravel
PHP
6
star
16

gmail-dynamic-images

Update Gmail cached images with the real ones
JavaScript
5
star
17

dev-challenge

Gamified learning experience TODO list.
TypeScript
4
star
18

rap-generator

When all you need is a little 011100100110000101110000
JavaScript
3
star
19

laravel-csv-importer-examples

Examples for the Laravel CSV import/export package
PHP
3
star
20

conflist

[Work in Progress] Conflist: Product Hunt for conferences.
JavaScript
3
star
21

devstoned

A revolution in digital board games
JavaScript
3
star
22

photo-watch-face

Watch face that uses images from folder for background
Java
2
star
23

devlabs-website

Our cool, shiny, gingerbread & a bit legacy website!
HTML
2
star
24

carpooling

2
star
25

tamabotchi

I am not a human. Or am I?
JavaScript
2
star
26

VideoGenerator

An Image to Video generator which stores the output in Photo Library
Swift
2
star
27

hello-ue

Hello world app for UE Varna students.
JavaScript
2
star
28

carpooling-app

JavaScript
2
star
29

rate-me-v2

JavaScript
1
star
30

record-rtc-demo

JavaScript
1
star
31

organic-skeleton

A boilerplate for building organic NodeJS web applications.
JavaScript
1
star