compose loading 第二篇
九宫格方块缩放效果
Box(modifier = Modifier.fillMaxSize()) {
Dialog(
onDismissRequest = { /*TODO*/ },
properties = DialogProperties(dismissOnClickOutside = false, dismissOnBackPress = true)
) {
Box(
Modifier
.wrapContentSize()
.defaultMinSize(minWidth = 120.dp, minHeight = 120.dp)
.align(
Alignment.Center
)
.background(Color(0x80000000), RoundedCornerShape(12.dp))
) {
val duration = 1600
var start1 by remember {
mutableStateOf(false)
}
var index = animateIntAsState(
targetValue = if (start1) 6 else 1, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = LinearEasing
), repeatMode = RepeatMode.Reverse
)
)
Canvas(modifier = Modifier
.size(40.dp)
.align(Alignment.Center), onDraw = {
val r = size.width.div(6)
val padding = 8.dp.value
var size = Size(r.times(2) - padding, r.times(2) - padding)
for (left in 0 until 3) {
for (top in 0 until 3) {
translate(
(size.width + padding) * left, (size.width + padding) * top
) {
var scale =
if ((top == 0 && left == 0 && index.value == 1) || (((top == 1 && left == 0) || (top == 0 && left == 1)) && index.value == 2) || (((top == 2 && left == 0) || (top == 0 && left == 2) || (top == 1 && left == 1)) && index.value == 3) || (((top == 2 && left == 1) || (top == 1 && left == 2)) && index.value == 4) || ((top == 2 && left == 2) && index.value == 5)) {
0.5f
} else {
1f
}
scale(scale, pivot = Offset(size.width, size.height)) {
drawRect(
Color.Yellow,
topLeft = Offset(0f, 0f),
size = size,
style = Fill
)
// drawCircle(Color.Yellow, radius = size.width/2, center = Offset(size.width/2,size.width/2))
}
}
}
}
})
if (!start1) {
LaunchedEffect(key1 = "roll", block = {
start1 = true
})
}
}
}
}
笑脸表情效果，扇形、透明度、曲线等效果使用
Box(modifier = Modifier.fillMaxSize()) {
Dialog(
onDismissRequest = { /*TODO*/ },
properties = DialogProperties(dismissOnClickOutside = false, dismissOnBackPress = true)
) {
Box(
Modifier
.wrapContentSize()
.defaultMinSize(minWidth = 120.dp, minHeight = 120.dp)
.align(
Alignment.Center
)
.background(Color(0x80000000), RoundedCornerShape(12.dp))
) {
val duration = 1600
var start1 by remember {
mutableStateOf(false)
}
var ratio = animateFloatAsState(
targetValue = if (start1) 1f else 0f, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = LinearEasing
), repeatMode = RepeatMode.Restart
)
)
var tranX = animateFloatAsState(
targetValue = if (start1) 1f else 0f, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = LinearEasing
), repeatMode = RepeatMode.Restart
)
)
Canvas(modifier = Modifier
.size(40.dp)
.align(Alignment.Center), onDraw = {
//头
drawArc(
Color.Yellow,
45f - 45f * ratio.value,
270f + 45f * ratio.value * 2,
useCenter = true,
style = Fill
)
//球
drawCircle(
color = Color.White, radius = 14.dp.value, center = Offset(
size.width - size.width / 2 * tranX.value, size.height / 2
), style = Fill, alpha = 1 - tranX.value
)
val r = size.width / 2
//眼
var x = sin(Math.toDegrees(45.0)) * r / 2
val path = Path()
path.moveTo((r - x).toFloat(), (r - x).toFloat())
path.cubicTo(
(r - x).toFloat(),
(r - x).toFloat(),
r,
0f,
(r + x + x * ratio.value / 2).toFloat(),
(x + x * ratio.value / 2).toFloat()
)
drawPath(
path = path,
brush = Brush.linearGradient(listOf(Color.Blue, Color.Green)),
style = Stroke(width = 4.dp.value)
)
})
if (!start1) {
LaunchedEffect(key1 = "roll", block = {
start1 = true
})
}
}
}
}
柱体缩放效果
Box(modifier = Modifier.fillMaxSize()) {
Dialog(
onDismissRequest = { /*TODO*/ },
properties = DialogProperties(dismissOnClickOutside = false, dismissOnBackPress = true)
) {
Box(
Modifier
.wrapContentSize()
.defaultMinSize(minWidth = 120.dp, minHeight = 120.dp)
.align(
Alignment.Center
)
.background(Color(0x80000000), RoundedCornerShape(12.dp))
) {
val duration = 500
var start1 by remember {
mutableStateOf(false)
}
var ratio = animateFloatAsState(
targetValue = if (start1) 0.0f else 1f, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = LinearEasing
), repeatMode = RepeatMode.Reverse
)
)
var ratio2 = animateFloatAsState(
targetValue = if (start1) 0.0f else 1f, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = LinearEasing, delayMillis = duration / 4
), repeatMode = RepeatMode.Reverse
)
)
var ratio3 = animateFloatAsState(
targetValue = if (start1) 0.0f else 1f, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = LinearEasing, delayMillis = duration / 2
), repeatMode = RepeatMode.Reverse
)
)
Canvas(modifier = Modifier
.size(48.dp)
.align(Alignment.Center), onDraw = {
var barNum = 5
val barWidth = size.width / 6
val padding = (size.width - barWidth * barNum) / 4
val max = size.height / 4 //size.height*5/12
for (i in 0 until barNum) {
translate(top = 0f, left = (barWidth + padding) * i) {
when (i) {
0, 4 -> {
drawRoundRect(
color = Color.White,
cornerRadius = CornerRadius(6.dp.value),
topLeft = Offset(
0f, ratio.value * max
),
size = Size(
barWidth, size.height - ratio.value * max * 2
)
)
}
1, 3 -> {
drawRoundRect(
color = Color.White,
cornerRadius = CornerRadius(6.dp.value),
topLeft = Offset(
0f, ratio2.value * max
),
size = Size(
barWidth, size.height - ratio2.value * max * 2
)
)
}
2 -> {
drawRoundRect(
color = Color.White,
cornerRadius = CornerRadius(6.dp.value),
topLeft = Offset(
0f, ratio3.value * max
),
size = Size(
barWidth, size.height - ratio3.value * max * 2
)
)
}
}
}
}
})
if (!start1) {
LaunchedEffect(key1 = "roll", block = {
start1 = true
})
}
}
}
}
圆环径向缩放效果，需改水波纹的可以贴代码改造
Box(modifier = Modifier.fillMaxSize()) {
Dialog(
onDismissRequest = { /*TODO*/ },
properties = DialogProperties(dismissOnClickOutside = false, dismissOnBackPress = true)
) {
Box(
Modifier
.wrapContentSize()
.defaultMinSize(minWidth = 120.dp, minHeight = 120.dp)
.align(
Alignment.Center
)
.background(Color(0x80000000), RoundedCornerShape(12.dp))
) {
val duration = 2000
var start1 by remember {
mutableStateOf(false)
}
var ratio = animateFloatAsState(
targetValue = if (start1) 1f else 0f, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = LinearEasing
), repeatMode = RepeatMode.Restart
)
)
var ratio1 = animateFloatAsState(
targetValue = if (start1) 1f else 0f, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = LinearEasing, delayMillis = duration / 2
), repeatMode = RepeatMode.Restart
)
)
Canvas(modifier = Modifier
.size(48.dp)
.align(Alignment.Center), onDraw = {
// drawCircle(color = Color.White, radius = size.width/5*ratio.value, style = Stroke(width = 2f), alpha =ratio.value )
// drawCircle(color = Color.White, radius = size.width/4*ratio.value, style = Stroke(width = 2f), alpha =ratio.value )
// drawCircle(color = Color.White, radius = size.width/3*ratio.value, style = Stroke(width = 2f), alpha =ratio.value )
drawCircle(
color = Color.White,
radius = size.width / 2 * ratio.value,
style = Stroke(width = 2f),
alpha = ratio.value
)
drawCircle(
color = Color.White,
radius = size.width / 2 * ratio1.value,
style = Stroke(width = 2f),
alpha = ratio1.value
)
})
if (!start1) {
LaunchedEffect(key1 = "roll", block = {
start1 = true
})
}
}
}
}
球体镜像旋转缩放
Box(modifier = Modifier.fillMaxSize()) {
Dialog(
onDismissRequest = { /*TODO*/ },
properties = DialogProperties(dismissOnClickOutside = false, dismissOnBackPress = true)
) {
Box(
Modifier
.wrapContentSize()
.defaultMinSize(minWidth = 120.dp, minHeight = 120.dp)
.align(
Alignment.Center
)
.background(Color(0x80000000), RoundedCornerShape(12.dp))
) {
val duration = 1000
var start1 by remember {
mutableStateOf(false)
}
var ratio = animateFloatAsState(
targetValue = if (start1) 1f else 0.5f, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = FastOutLinearInEasing
), repeatMode = RepeatMode.Reverse
)
)
var ratio1 = animateFloatAsState(
targetValue = if (start1) 1f else 0f, animationSpec = infiniteRepeatable(
animation = tween(
duration, easing = FastOutLinearInEasing
), repeatMode = RepeatMode.Restart
)
)
Canvas(modifier = Modifier
.size(48.dp)
.align(Alignment.Center), onDraw = {
var r = 24.dp.value
rotate(
180 * ratio1.value, pivot = Offset(size.width / 2, size.height / 2)
) {
val center1 = Offset(0f, size.height / 2)
scale(1 - ratio.value, pivot = center1) {
drawCircle(
color = Color.White, radius = r, center = center1, style = Fill
)
}
val center2 = Offset(size.width / 2, size.height / 2)
scale(ratio.value, pivot = center2) {
drawCircle(
color = Color.White, radius = r, center = center2, style = Fill
)
}
val center3 = Offset(size.width, size.height / 2)
scale(1 - ratio.value, pivot = center3) {
drawCircle(
color = Color.White, radius = r, center = center3, style = Fill
)
}
}
})
if (!start1) {
LaunchedEffect(key1 = "roll", block = {
start1 = true
})
}
}
}
}
