Lost your password?
Don't have an account? Sign Up

Circular carousel with MotionLayout | by Rodrigo Dominguez | Jul, 2020 | Noteworthy

Before starting

I would like to tell you what is the strategy of our animation, the circular effect of our carousel is achieved thanks to the circular positions that allow us to use ContraintLayout, if you have never used these references, I recommend reading this documentation where it explains how to work with them. If you have already worked with these references, the strategy is very simple, basically we will play with these circular references, changing their degree from one state to another, and we will also play with the rotation on the same axis of the card, achieving that effect that runs left or right circularly.

Add MotionLayout in the project

To do this we add the dependency in the build.gradle file of your project.

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta8'

Let’s start with the transitions on our first card. This carrousel is executed with a swipe left or right, these swipe’s are going to move the card from an initial state to a final state that we will declare in our MotionScene.

We will declare the start state in our MotionScene, where the cardCenter card will have an angle of 0º with reference to our guide and a rotation on its axis of 90º, and also its elevation by 5dp.

The next step is to add a second card, with a circular reference to guide with an angle of 20º, a rotation on its same axis of 110º and elevation of 4dp. And in its final state of the first interaction, its circular angle and rotation will remain with the same values as our first card.

We will arm the swipe to the right in a summarized way. We will create the ConstraintSet firstCard, we will change the direction of the transition to dragRight, the directions of circular guide and rotation to the right in all its attributes.

Card detail

Last transition, we will arm a swipe up on our central card to simulate an effect of seeing the detail of the selected card.

Final comments

This is a very simple but really attractive animation. We achieved the infinite effect with a very simple logic that you can see in the GitHub repository.

Source link


Leave a Comment

Your email address will not be published. Required fields are marked *