From ccdc22ff2fc39752223e1b1b035b7db0ac70416e Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Tue, 16 Jul 2024 11:25:33 +0100 Subject: [PATCH 1/3] Add animating background gradient on Jetsnack. --- .../jetsnack/ui/snackdetail/SnackDetail.kt | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt b/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt index e3a3593640..68c148d990 100644 --- a/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt +++ b/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt @@ -17,6 +17,12 @@ package com.example.jetsnack.ui.snackdetail import android.content.res.Configuration +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.ScrollState import androidx.compose.foundation.background import androidx.compose.foundation.clickable @@ -50,7 +56,12 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.blur +import androidx.compose.ui.draw.drawWithCache +import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.TileMode +import androidx.compose.ui.graphics.drawscope.rotate import androidx.compose.ui.layout.Layout import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.stringResource @@ -112,11 +123,35 @@ fun SnackDetail( @Composable private fun Header() { + val brushColors = JetsnackTheme.colors.tornado1 + + val infiniteTransition = rememberInfiniteTransition(label = "background") + val targetOffset = with (LocalDensity.current) { + 1000.dp.toPx() + } + val offset by infiniteTransition.animateFloat( + initialValue = 0f, + targetValue = targetOffset, + animationSpec = infiniteRepeatable(tween(50000, easing = LinearEasing), + repeatMode = RepeatMode.Reverse + ), + label = "offset" + ) + + val brushSize = 400f + val brush = Brush.linearGradient( + colors = brushColors, + start = Offset(offset, offset), + end = Offset( offset + brushSize, offset + brushSize), + tileMode = TileMode.Mirror + ) Spacer( modifier = Modifier .height(280.dp) .fillMaxWidth() - .background(Brush.horizontalGradient(JetsnackTheme.colors.tornado1)) + .blur(40.dp) + .background(brush) + ) } From 0c3551ffcf9ace298be60625c270c09a202f2c63 Mon Sep 17 00:00:00 2001 From: riggaroo Date: Tue, 16 Jul 2024 10:54:16 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=A4=96=20Apply=20Spotless?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../example/jetsnack/ui/snackdetail/SnackDetail.kt | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt b/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt index 68c148d990..f012182846 100644 --- a/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt +++ b/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt @@ -57,11 +57,9 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.blur -import androidx.compose.ui.draw.drawWithCache import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.TileMode -import androidx.compose.ui.graphics.drawscope.rotate import androidx.compose.ui.layout.Layout import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.stringResource @@ -126,15 +124,16 @@ private fun Header() { val brushColors = JetsnackTheme.colors.tornado1 val infiniteTransition = rememberInfiniteTransition(label = "background") - val targetOffset = with (LocalDensity.current) { + val targetOffset = with(LocalDensity.current) { 1000.dp.toPx() } val offset by infiniteTransition.animateFloat( initialValue = 0f, targetValue = targetOffset, - animationSpec = infiniteRepeatable(tween(50000, easing = LinearEasing), + animationSpec = infiniteRepeatable( + tween(50000, easing = LinearEasing), repeatMode = RepeatMode.Reverse - ), + ), label = "offset" ) @@ -142,7 +141,7 @@ private fun Header() { val brush = Brush.linearGradient( colors = brushColors, start = Offset(offset, offset), - end = Offset( offset + brushSize, offset + brushSize), + end = Offset(offset + brushSize, offset + brushSize), tileMode = TileMode.Mirror ) Spacer( From 778894934bcd1cf8a8a839d1f96ad4891d52d2b7 Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Tue, 16 Jul 2024 14:01:38 +0100 Subject: [PATCH 3/3] Change to drawWithCache. --- .../jetsnack/ui/snackdetail/SnackDetail.kt | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt b/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt index f012182846..57d628762c 100644 --- a/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt +++ b/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt @@ -57,6 +57,7 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.blur +import androidx.compose.ui.draw.drawWithCache import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.TileMode @@ -137,19 +138,23 @@ private fun Header() { label = "offset" ) - val brushSize = 400f - val brush = Brush.linearGradient( - colors = brushColors, - start = Offset(offset, offset), - end = Offset(offset + brushSize, offset + brushSize), - tileMode = TileMode.Mirror - ) Spacer( modifier = Modifier .height(280.dp) .fillMaxWidth() .blur(40.dp) - .background(brush) + .drawWithCache { + val brushSize = 400f + val brush = Brush.linearGradient( + colors = brushColors, + start = Offset(offset, offset), + end = Offset(offset + brushSize, offset + brushSize), + tileMode = TileMode.Mirror + ) + onDrawBehind { + drawRect(brush) + } + } ) }