Skip to content

Commit be29fed

Browse files
commandironcommandiron
committed
insta spinner added.
1 parent 580ddc6 commit be29fed

File tree

2 files changed

+135
-19
lines changed

2 files changed

+135
-19
lines changed

‎app/src/main/java/com/commandiron/composeloading/MainActivity.kt

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,10 @@ import androidx.activity.compose.BackHandler
66
import androidx.activity.compose.setContent
77
import androidx.compose.foundation.background
88
import androidx.compose.foundation.layout.*
9-
import androidx.compose.material3.CircularProgressIndicator
109
import androidx.compose.runtime.Composable
11-
import androidx.compose.runtime.LaunchedEffect
1210
import androidx.compose.runtime.rememberCoroutineScope
1311
import androidx.compose.ui.Alignment
1412
import androidx.compose.ui.Modifier
15-
import androidx.compose.ui.unit.DpSize
16-
import androidx.compose.ui.unit.dp
1713
import com.commandiron.compose_loading.*
1814
import com.commandiron.composeloading.ui.theme.*
1915
import com.google.accompanist.pager.HorizontalPager
@@ -186,9 +182,14 @@ fun ShowScreen() {
186182
}
187183

188184
13 -> {
189-
InstaSpinner(Modifier
190-
.background(BattleshipGrey)
191-
.fillMaxSize())
185+
Box(
186+
modifier = Modifier
187+
.fillMaxSize()
188+
.background(BattleshipGrey),
189+
contentAlignment = Alignment.Center
190+
) {
191+
InstaSpinner()
192+
}
192193
}
193194

194195
14 -> {

‎compose-loading/src/main/java/com/commandiron/compose_loading/InstaSpinner.kt

Lines changed: 127 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,143 @@
11
package com.commandiron.compose_loading
22

3-
import androidx.compose.foundation.layout.Box
3+
import androidx.compose.animation.core.*
4+
import androidx.compose.foundation.Canvas
5+
import androidx.compose.foundation.layout.size
46
import androidx.compose.material3.MaterialTheme
5-
import androidx.compose.material3.Text
67
import androidx.compose.runtime.Composable
7-
import androidx.compose.ui.Alignment
8+
import androidx.compose.runtime.LaunchedEffect
9+
import androidx.compose.runtime.remember
810
import androidx.compose.ui.Modifier
9-
import androidx.compose.ui.text.style.TextAlign
11+
import androidx.compose.ui.draw.rotate
12+
import androidx.compose.ui.geometry.Offset
13+
import androidx.compose.ui.geometry.Size
14+
import androidx.compose.ui.graphics.Color
15+
import androidx.compose.ui.graphics.PathEffect
16+
import androidx.compose.ui.graphics.drawscope.Stroke
17+
import androidx.compose.ui.graphics.drawscope.rotate
18+
import androidx.compose.ui.unit.Dp
19+
import androidx.compose.ui.unit.dp
20+
import com.commandiron.compose_loading.transition.EaseInOut
21+
import com.commandiron.compose_loading.transition.fractionTransition
1022

1123
@Composable
1224
fun InstaSpinner(
1325
modifier: Modifier = Modifier,
26+
durationMillis: Int = 1000,
27+
size: Dp = 40.dp,
28+
color: Color = MaterialTheme.colorScheme.primary,
29+
isRefreshing: Boolean = false
1430
) {
31+
val transition = rememberInfiniteTransition()
1532

33+
val alpha1 = transition.fractionTransition(
34+
initialValue = 1f,
35+
targetValue = 0.1f,
36+
durationMillis = durationMillis,
37+
easing = EaseInOut
38+
)
39+
val alpha2 = transition.fractionTransition(
40+
initialValue = 1f,
41+
targetValue = 0.1f,
42+
durationMillis = durationMillis,
43+
offsetMillis = durationMillis / 8,
44+
easing = EaseInOut
45+
)
46+
val alpha3 = transition.fractionTransition(
47+
initialValue = 1f,
48+
targetValue = 0.1f,
49+
durationMillis = durationMillis,
50+
offsetMillis = durationMillis * 2 / 8,
51+
easing = EaseInOut
52+
)
53+
val alpha4 = transition.fractionTransition(
54+
initialValue = 1f,
55+
targetValue = 0.1f,
56+
durationMillis = durationMillis,
57+
offsetMillis = durationMillis * 3 / 8,
58+
easing = EaseInOut
59+
)
60+
val alpha5 = transition.fractionTransition(
61+
initialValue = 1f,
62+
targetValue = 0.1f,
63+
durationMillis = durationMillis,
64+
offsetMillis = durationMillis * 4 / 8,
65+
easing = EaseInOut
66+
)
67+
val alpha6 = transition.fractionTransition(
68+
initialValue = 1f,
69+
targetValue = 0.1f,
70+
durationMillis = durationMillis,
71+
offsetMillis = durationMillis * 5 / 8,
72+
easing = EaseInOut
73+
)
74+
val alpha7 = transition.fractionTransition(
75+
initialValue = 1f,
76+
targetValue = 0.1f,
77+
durationMillis = durationMillis,
78+
offsetMillis = durationMillis * 6 / 8,
79+
easing = EaseInOut
80+
)
81+
val alpha8 = transition.fractionTransition(
82+
initialValue = 1f,
83+
targetValue = 0.1f,
84+
durationMillis = durationMillis,
85+
offsetMillis = durationMillis * 7 / 8,
86+
easing = EaseInOut
87+
)
1688

89+
val rotateDegree = remember {
90+
Animatable(0f)
91+
}
92+
93+
LaunchedEffect(key1 = isRefreshing){
94+
if(isRefreshing){
95+
rotateDegree.animateTo(
96+
targetValue = 360f * 2,
97+
animationSpec = infiniteRepeatable(
98+
animation = tween(
99+
durationMillis = durationMillis * 2,
100+
easing = LinearEasing
101+
)
102+
)
103+
)
104+
}
105+
}
17106

18-
Box(
19-
modifier = modifier,
20-
contentAlignment = Alignment.Center
107+
Canvas(
108+
modifier = modifier
109+
.size(size)
110+
.rotate(rotateDegree.value)
21111
){
22-
Text(
23-
text = "Insta Spinner",
24-
style = MaterialTheme.typography.labelSmall,
25-
textAlign = TextAlign.Center
26-
)
112+
val rectSize = Size(width = this.size.width / 6, height = this.size.height / 36)
113+
for(i in 0 until 8){
114+
rotate(45f * i){
115+
drawRect(
116+
color = color.copy(
117+
alpha = when(i){
118+
0 -> alpha1.value
119+
1 -> alpha2.value
120+
2 -> alpha3.value
121+
3 -> alpha4.value
122+
4 -> alpha5.value
123+
5 -> alpha6.value
124+
6 -> alpha7.value
125+
7 -> alpha8.value
126+
else -> 1.0f
127+
}
128+
),
129+
topLeft = center + Offset(x = rectSize.width, y = 0f),
130+
size = rectSize,
131+
style = Stroke(
132+
width = rectSize.height * 2,
133+
pathEffect = PathEffect.cornerPathEffect(rectSize.height)
134+
)
135+
)
136+
}
137+
}
27138
}
139+
140+
141+
142+
28143
}

0 commit comments

Comments
 (0)