Skip to content

Naveed-Baloch/Compose-Animations

Repository files navigation

Compose Animation

This repository covers various animations using Jetpack Compose, making animations smooth and easy to build. Explore practical examples for an engaging learning experience.

1. Items Placement

Description Demo
We can easly animate the offset of the items of LazyRow/Column or Grid by just adding the animateItemPlacement to modifier of the Item.

Steps

1. Add the key attribute to the items in LazyRow/Column or Grid.
items(items = list.value, key = { it.id })
2. Create Animation
val itemPlacementAnim: FiniteAnimationSpec<IntOffset> = tween(700, easing = LinearOutSlowInEasing)
3. Add the animateItemPlacement to Item Modifier
PlayerItem(player = it, modifier = Modifier.animateItemPlacement(itemPlacementAnim))
4. Thats it now the whenever the Items placement will be changed then Animation will make the magic 🪄
5. Checkout the Code File here.
GIF

2. Animated Drawer

Description Demo
You can now utilize the AnimatedDrawer, which is totally customizable with the following features:

1️⃣ Control Rotation.
2️⃣ Change Background Colors, which are optional.
3️⃣ Change Offset Animation Drawers.
4️⃣ Has Content slots for Drawer & Selected Page Content.

Checkout the Code File here.







GIF

3. Animated Pie Chart

Description Demo
With Animated Pie Chart you can show the Stats of any data which has following features

1️⃣ Control Spacing B/W Pie Chart Slices.
2️⃣ Change Radius of Pie chart & Slice Width.
3️⃣ Show Slices in Asecending, descending order or default as per the submitted data order
4️⃣ Control the Animation of Slices.

Checkout the Code File here.
GIF

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages