Naveed-Baloch / Compose-Animations

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.

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.

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.