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