Simple Guide on Click Animation

Hello Koders,
This is Kshitij. In this guide, I will tell you how to make a simple click animation without any extension. I am creating this as @Moulaali @dohop96 and @noolechi asked for it. I think it might help many more.

Components

Visible.

You would need Components that need to be animated.
In my case, they are Cardviews in Vertical Scroll Arrangement.

NonVisible.

Then you would need a Clock and Animation Utils. Properties of the clock in the next step.

Screenshot (64)

Properties

The properties of all the components can be set by you, meaning they can be anything you want but for a clock, the below mentioned are the properties. This time interval gives smooth animation.

Screenshot (65)

Blocks

The blocks are pretty simple. We have to focus on the timing of the animation and everything would be fine. Here on the CardView click event, I have shown an animation to the component stored in a variable named component. When any card view is clicked then it is stored in the same and animation utils animate the same and shrink the size and set the clock timer to enable to true. then on Clock time, event animation utils bring the component back to its original size.

Output

AIA and APK

test_project.apk (5.9 MB)
test_project.aia (715.5 KB)
You can share your ideas with me I would love to see them.

That’s All :+1:

7 Likes

Thank you for your guide. For it to be a great guide you should also explain what your blocks do.

2 Likes

I did the changes.
Thanks,

1 Like

Is there a reason for adding the light icons settings in the guide or was this just for aesthetics? I guess it will also work without those settings?

Another tip. You can always add an aia for users to experiment with. Maybe you could add some sliders in the project so that users can see the effect with different settings.

2 Likes

This post was flagged by the community and is temporarily hidden.

do it please

Then share a GIF