Skip to content

Instantly share code, notes, and snippets.

@eevajonnapanula
Created November 10, 2024 05:35
Show Gist options
  • Save eevajonnapanula/f47b5eab078cf903648555559ba50b2d to your computer and use it in GitHub Desktop.
Save eevajonnapanula/f47b5eab078cf903648555559ba50b2d to your computer and use it in GitHub Desktop.
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.EaseIn
import androidx.compose.animation.core.EaseInBounce
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.scale
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.PathEffect
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.text.drawText
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.rememberTextMeasurer
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun NotAPhase() {
val textMeasurer = rememberTextMeasurer()
val infiniteTransition =
rememberInfiniteTransition(
label = "infinite",
)
val animationPosition by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 4f,
animationSpec =
infiniteRepeatable(
tween(
durationMillis = 10000,
easing = EaseIn,
),
RepeatMode.Restart,
),
label = "animationPosition",
)
Column(
verticalArrangement = Arrangement.spacedBy(12.dp),
) {
Column(
modifier =
Modifier
.padding(12.dp)
.size(300.dp)
.drawBehind {
drawRoundRect(
size = size,
cornerRadius = CornerRadius(44f),
brush =
Brush.radialGradient(
colors = Colors.spaceGradient,
radius = size.width * 0.85f,
),
)
},
verticalArrangement = Arrangement.Center,
) {
val gradientStartXOffset by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 10f,
label = "gradientStartXOffset",
animationSpec =
infiniteRepeatable(
animation = tween(150, easing = LinearEasing),
repeatMode = RepeatMode.Reverse,
),
)
val notText =
textMeasurer.measure(
text = "Not",
style =
MaterialTheme.typography.titleSmall.copy(
brush =
Brush.linearGradient(
colors =
biColorsAnimated(
animated = animationPosition in 0.5f..1.5f,
),
start = Offset(gradientStartXOffset, 0f),
),
fontFamily = DamionFontFamily,
),
)
val phaseText =
textMeasurer.measure(
text = "a phase",
style =
MaterialTheme.typography.titleLarge.copy(
brush =
Brush.linearGradient(
colors =
biColorsAnimated(
animated = animationPosition in 2f..3.5f,
),
start = Offset(gradientStartXOffset, 0f),
),
fontSize = 30.sp,
fontFamily = PoppinsFontFamily,
),
)
Canvas(
modifier =
Modifier
.width(300.dp)
.height(200.dp)
.padding(12.dp)
.scale(1.15f),
) {
drawMoon()
drawText(
textLayoutResult = notText,
topLeft =
Offset(
x = size.width * 0.25f,
y = size.height * 0.6f,
),
)
drawText(
textLayoutResult = phaseText,
topLeft =
Offset(
x = size.width * 0.35f,
y = (size.height * 0.6f + notText.size.height * 0.7f),
),
)
}
}
}
}
private fun DrawScope.drawMoon() {
rotate(-25f, pivot = Offset((size.width * 0.5f - (size.height * 0.5f) / 2) + size.height * 0.25f, size.height * 0.25f)) {
drawArc(
topLeft =
Offset(
size.width * 0.5f - (size.height * 0.5f) / 2,
0f,
),
size =
Size(
size.height * 0.5f,
size.height * 0.5f,
),
color = Color.White,
style =
Stroke(
width = 4f,
),
startAngle = 74f,
sweepAngle = 213f,
useCenter = false,
)
drawArc(
topLeft =
Offset(
(size.width * 0.5f - (size.height * 0.5f) / 2) + 70f,
0f,
),
size =
Size(
size.height * 0.5f,
size.height * 0.5f,
),
color = Color.White,
style =
Stroke(
width = 4f,
),
startAngle = 107f,
sweepAngle = 147f,
useCenter = false,
)
drawArc(
topLeft =
Offset(
size.width * 0.5f - (size.height * 0.5f) / 2,
0f,
),
size =
Size(
size.height * 0.5f,
size.height * 0.5f,
),
color = Color.White,
style =
Stroke(
width = 2f,
pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f)),
),
startAngle = 270f,
sweepAngle = 180f,
useCenter = false,
)
}
}
@Composable
fun biColorsAnimated(animated: Boolean): List<Color> {
val colors =
listOf(
Colors.biFlag.pink,
Colors.biFlag.purple,
Colors.biFlag.blue,
)
return colors.map {
animateColorAsState(
targetValue = if (animated) it else Colors.white,
animationSpec =
tween(
durationMillis = 1000,
easing = EaseInBounce,
),
label = it.toString(),
).value
}
}
object Colors {
val spaceGradient =
listOf(
Color(0xFF02010a),
Color(0xFF04052e),
Color(0xFF140152),
Color(0xFF22007c),
Color.Transparent,
)
val white = Color(0xFFE8E8E8)
val biFlag =
BiFlag(
Color(0xFFD60270),
Color(0xFF9B4F96),
Color(0xFF0038A8),
)
}
data class BiFlag(
val pink: Color,
val purple: Color,
val blue: Color,
)
val PoppinsFontFamily =
FontFamily(
Font(R.font.poppins_bold, FontWeight.Bold),
)
val DamionFontFamily =
FontFamily(
Font(R.font.damion_regular, FontWeight.Normal),
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment