-
Notifications
You must be signed in to change notification settings - Fork 2
/
ShimmerAnimation.kt
98 lines (91 loc) · 3.31 KB
/
ShimmerAnimation.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
@Composable
fun ShimmerAnimation(
shimmerColorShades: List<Color>,//pass your preferred colors for shimmer
cardHeight: Dp,//pass your card height so that shimmer can go all the way down to end of your card
cardWidth: Dp,//pass your card width so that shimmer can go all the way down to end of your card
gradientWidth: Float//pass your shimmer gradient width
) {
val transition = rememberInfiniteTransition()
val pxValueX = LocalDensity.current.run {
cardWidth.toPx()//convert dp value to pixels for x axis
}
val pxValueY = LocalDensity.current.run {
cardHeight.toPx()//convert dp value to pixels for y axis
}
val translateX by transition.animateFloat(
initialValue = 0f,//starts from 0
targetValue = pxValueX + gradientWidth,//goes all the way down to max pixels value
animationSpec = infiniteRepeatable(//infinitely repeat the animation
/*
Tween Animates between values over specified [durationMillis]
*/
animation = tween(
durationMillis = 900,
easing = LinearEasing,
delayMillis = 300
)
)
)
val translateY by transition.animateFloat(
initialValue = 0f,//starts from 0
targetValue = pxValueY + gradientWidth,//goes all the way down to max pixels value
animationSpec = infiniteRepeatable(//infinitely repeat the animation
/*
Tween Animates between values over specified [durationMillis]
*/
animation = tween(
durationMillis = 900,
easing = LinearEasing,
delayMillis = 300
)
)
)
/*
Create a gradient using the list of colors
Use Linear Gradient for animating in any direction according to requirement
start=specifies the position to start with in cartesian like system Offset(10f,10f) means x(10,0) , y(0,10)
end= Animate the end position to give the shimmer effect using the transition created above
*/
val brush = Brush.linearGradient(
colors = shimmerColorShades,
//start shimmer line
start = Offset(
translateX - gradientWidth,
translateY - gradientWidth
),//start even before 0 so that end shimmer line can start from 0
//end shimmer line
end = Offset(translateX, translateY)
)
//shimmer sample item to show transition
ShimmerItem(
brush = brush,
height = cardHeight,
width = cardWidth
)
}
@Composable
fun ShimmerItem(
brush: Brush,
height: Dp,
width: Dp
) {
Spacer(
modifier = Modifier
.height(height)
.width(width)
.background(brush = brush)
)
}