Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
TrimPath Animation with DashPathEffect
@Composable
fun NewDocAnimation() {
val borderLinesProgress = animatedFloat(0f)
onActive {
borderLinesProgress.animateTo(
targetValue = 1f,
anim = TweenSpec(
durationMillis = 300,
easing = LinearEasing
),
)
}
val contentLinesProgress = animatedFloat(0f)
onActive {
contentLinesProgress.animateTo(
targetValue = 1f,
anim = TweenSpec(
delay = 300,
durationMillis = 300
)
)
}
val path = remember { Path() }
Canvas(modifier = Modifier.fillMaxSize()) {
val start = 20.dp.toPx()
val height = 200.dp.toPx()
val width = 160.dp.toPx()
path.reset()
path.moveTo(start, start)
path.lineTo(width + start, start)
path.lineTo(width + start, height + start)
path.lineTo(start, height + start)
path.lineTo(start, start)
drawPath(
path = path,
color = Color.Black,
style = Stroke(
width = 10f,
join = StrokeJoin.Round,
pathEffect = DashPathEffect(
floatArrayOf(
720.dp.toPx() * borderLinesProgress.value,
720.dp.toPx() * (1 - borderLinesProgress.value),
),
0f,
),
),
)
path.reset()
path.moveTo(start * 2, start * 2)
path.lineTo(width, start * 2)
path.moveTo(start * 2, start * 3)
path.lineTo(width, start * 3)
path.moveTo(start * 2, start * 4)
path.lineTo(width, start * 4)
drawPath(
path = path,
color = Color.Black,
style = Stroke(
width = 10f,
join = StrokeJoin.Round,
pathEffect = DashPathEffect(
floatArrayOf(
120.dp.toPx() * contentLinesProgress.value,
120.dp.toPx() * (1 - contentLinesProgress.value),
),
0f,
)
)
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment