Skip to content

Instantly share code, notes, and snippets.

@thelumiereguy
Last active February 15, 2022 17:21
Show Gist options
  • Save thelumiereguy/1dce088697921355579d5fac460b740a to your computer and use it in GitHub Desktop.
Save thelumiereguy/1dce088697921355579d5fac460b740a to your computer and use it in GitHub Desktop.
A Jetpack Compose based example to draw grid of lines, and rotate them to achieve a ripple effect.
import androidx.compose.animation.core.*
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.BoxWithConstraints
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.Color
import androidx.compose.ui.graphics.ExperimentalGraphicsApi
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.graphics.drawscope.translate
import dev.romainguy.kotlin.math.Float2
import dev.romainguy.kotlin.math.length
@OptIn(ExperimentalGraphicsApi::class)
@Composable
fun RippledLinesComposable(modifier: Modifier) {
BoxWithConstraints(modifier = Modifier) {
val frame by rememberInfiniteTransition().animateFloat(
initialValue = 1f,
targetValue = 200f,
animationSpec = infiniteRepeatable(
tween(
5000,
easing = LinearEasing
),
RepeatMode.Reverse
),
)
val halfWidth = remember {
constraints.maxWidth / 2
}
val halfHeight = remember {
constraints.maxHeight / 2
}
Canvas(modifier = modifier.background(Color.Black)) {
// Move origin to center
translate(
halfWidth.toFloat(),
halfHeight.toFloat()
) {
(-halfWidth..halfWidth step 50).forEach { x ->
(-halfHeight..halfHeight step 30).forEach { y ->
val coord = Float2(x.toFloat(), y.toFloat())
// Rotate by length of vector, pivot at line start
rotate(
degrees = frame + length(coord),
pivot = Offset(coord.x, coord.y)
) {
drawLine(
Color.White,
start = Offset(coord.x, coord.y),
end = Offset(coord.x + 30, coord.y),
strokeWidth = 1.5f
)
}
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment