Created
January 11, 2024 17:13
-
-
Save ardakazanci/6f32c080351d8e959c0d377ccfb4e742 to your computer and use it in GitHub Desktop.
Showcase For Compose
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class MainActivity : ComponentActivity() { | |
override fun onCreate(savedInstanceState: Bundle?) { | |
super.onCreate(savedInstanceState) | |
enableEdgeToEdge() | |
setContent { | |
ShowcaseForComposeTheme { | |
MyScreen() | |
} | |
} | |
} | |
} | |
@Composable | |
fun SpotlightEffect(targetRect: Rect, baseRadius: Float) { | |
var targetRadius by remember { mutableStateOf(baseRadius) } | |
val animatedRadius by animateFloatAsState( | |
targetValue = targetRadius, | |
animationSpec = infiniteRepeatable( | |
animation = tween(durationMillis = 1000, easing = LinearEasing), | |
repeatMode = RepeatMode.Reverse | |
) | |
) | |
LaunchedEffect(Unit) { | |
while (true) { | |
targetRadius = if (targetRadius == baseRadius) baseRadius + 220F else baseRadius | |
delay(1000) | |
} | |
} | |
Canvas(modifier = Modifier.fillMaxSize()) { | |
with(drawContext.canvas.nativeCanvas) { | |
val checkPoint = saveLayer(null, null) | |
drawRect(color = Color.Black.copy(alpha = 0.85f)) | |
val maskPaint = Paint().apply { | |
color = Color(0f, 0f, 0f, 0f) | |
blendMode = BlendMode.Clear | |
} | |
val spotlightCenterX = targetRect.left + targetRect.width / 2 | |
val spotlightCenterY = targetRect.top + targetRect.height / 2 | |
drawCircle( | |
spotlightCenterX, | |
spotlightCenterY, | |
animatedRadius, | |
maskPaint.asFrameworkPaint() | |
) | |
restoreToCount(checkPoint) | |
} | |
} | |
} | |
@Composable | |
fun MyScreen() { | |
var showSpotlight by remember { mutableStateOf(true) } | |
var buttonRect by remember { mutableStateOf(Rect(0f, 0f, 0f, 0f)) } | |
val spotlightRadius = maxOf(buttonRect.width, buttonRect.height) / 2 | |
BoxWithConstraints(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { | |
Button( | |
onClick = { showSpotlight = !showSpotlight }, | |
modifier = Modifier | |
.onGloballyPositioned { layoutCoordinates -> | |
val position = layoutCoordinates.positionInRoot() | |
val size = IntSize(layoutCoordinates.size.width, layoutCoordinates.size.height) | |
buttonRect = Rect(position.x, position.y, position.x + size.width, position.y + size.height) | |
} | |
) { | |
Text("Hello Linkedin") | |
} | |
if (showSpotlight) { | |
SpotlightEffect(targetRect = buttonRect, baseRadius = spotlightRadius) | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment