Scribd
Upload
14 views2 pages

radar-circle-animation

Uploaded by

anas farhad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views2 pages

radar-circle-animation

Uploaded by

anas farhad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

package com.faras.rider.ui.

rating

import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
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.geometry.Rect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.unit.dp

@Composable
fun RadarAnimation(modifier: Modifier = Modifier) {
val infiniteTransition = rememberInfiniteTransition()

// Rotating angle animation


val rotationAngle by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 360f,
animationSpec = infiniteRepeatable(
animation = tween(10000, easing = LinearEasing),
repeatMode = RepeatMode.Restart
)
)

// Pulsating circle radius animation


val pulseRadius by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 150f, // Adjust based on size
animationSpec = infiniteRepeatable(
animation = keyframes {
durationMillis = 2000
0f at 0 using LinearEasing
150f at 1000 using LinearEasing
0f at 2000 using LinearEasing
},
repeatMode = RepeatMode.Restart
)
)

RadarCanvas(
modifier = modifier,
rotationAngle = rotationAngle,
pulseRadius = pulseRadius
)
}

@Composable
fun RadarCanvas(
modifier: Modifier,
rotationAngle: Float,
pulseRadius: Float
) {
Canvas(modifier = modifier) {
val midPoint = size.width / 2f

// Path for the pie slice


val path = Path().apply {
moveTo(midPoint, midPoint) // Start at the center
arcTo(
rect = Rect(
left = 0f,
top = 0f,
right = size.width,
bottom = size.height
),
startAngleDegrees = -90f,
sweepAngleDegrees = 90f,
forceMoveTo = false
)
close() // Close the path to form a pie slice
}

// Rotate the pie slice


rotate(rotationAngle, pivot = Offset(midPoint, midPoint)) {
drawPath(
path = path,
color = Color.Green.copy(alpha = 0.3f)
)
}

// Cross lines
drawLine(
start = Offset(midPoint, midPoint),
end = Offset(size.width, midPoint),
color = Color.LightGray,
strokeWidth = 2f
)
drawLine(
start = Offset(midPoint, midPoint),
end = Offset(midPoint, 0f),
color = Color.LightGray,
strokeWidth = 2f
)

// Pulsating circle
drawCircle(
color = Color.Green.copy(alpha = 0.3f),
radius = pulseRadius,
center = Offset(midPoint, midPoint)
)
}
}

You might also like