Skip to content

Commit

Permalink
Add custom duration property and refactor the demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@skydoves
skydoves committed Jan 6, 2024
1 parent 4c70382 commit d717fb0
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 64 deletions.
10 changes: 7 additions & 3 deletions app/src/main/kotlin/com/github/skydoves/landscapistdemo/ui/MainActivity.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,12 @@ import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.primarySurface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
Expand All @@ -37,6 +36,7 @@ import androidx.compose.ui.unit.sp
import com.github.skydoves.landscapistdemo.R
import com.github.skydoves.landscapistdemo.model.MockUtil
import com.github.skydoves.landscapistdemo.theme.DisneyComposeTheme
import com.github.skydoves.landscapistdemo.theme.background
import com.github.skydoves.landscapistdemo.theme.purple200
import dagger.hilt.android.AndroidEntryPoint

Expand All @@ -51,7 +51,11 @@ class MainActivity : ComponentActivity() {
setContent {
DisneyComposeTheme {
Scaffold(
backgroundColor = MaterialTheme.colors.primarySurface,
backgroundColor = if (isSystemInDarkTheme()) {
background
} else {
Color.White
},
topBar = { PosterAppBar() },
) {
val list = MockUtil.getMockPosters().toMutableList()
Expand Down
14 changes: 14 additions & 0 deletions app/src/main/kotlin/com/github/skydoves/landscapistdemo/ui/MainPosters.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ package com.github.skydoves.landscapistdemo.ui
import androidx.compose.animation.Crossfade
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
Expand Down Expand Up @@ -54,6 +55,7 @@ import com.github.skydoves.landscapistdemo.R
import com.github.skydoves.landscapistdemo.model.MockUtil
import com.github.skydoves.landscapistdemo.model.Poster
import com.github.skydoves.landscapistdemo.theme.DisneyComposeTheme
import com.github.skydoves.landscapistdemo.theme.background
import com.skydoves.landscapist.ImageOptions
import com.skydoves.landscapist.animation.circular.CircularRevealPlugin
import com.skydoves.landscapist.animation.crossfade.CrossfadePlugin
Expand All @@ -62,6 +64,8 @@ import com.skydoves.landscapist.fresco.FrescoImage
import com.skydoves.landscapist.glide.GlideImage
import com.skydoves.landscapist.palette.PalettePlugin
import com.skydoves.landscapist.palette.rememberPaletteState
import com.skydoves.landscapist.placeholder.shimmer.Shimmer
import com.skydoves.landscapist.placeholder.shimmer.ShimmerPlugin

@Composable
fun DisneyPosters(
Expand Down Expand Up @@ -132,6 +136,16 @@ private fun SelectedPoster(
imageModel = { poster.image },
modifier = Modifier.aspectRatio(0.8f),
component = rememberImageComponent {
+ShimmerPlugin(
Shimmer.Resonate(
baseColor = if (isSystemInDarkTheme()) {
background
} else {
Color.White
},
highlightColor = Color.LightGray,
),
)
+CircularRevealPlugin()
+PalettePlugin { palette = it }
},
Expand Down
26 changes: 16 additions & 10 deletions landscapist-placeholder/api/android/landscapist-placeholder.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,24 @@ public final class com/skydoves/landscapist/placeholder/shimmer/LocalShimmerKt {

public abstract class com/skydoves/landscapist/placeholder/shimmer/Shimmer {
public static final field $stable I
public synthetic fun <init> (JJLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJILkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun getShimmerBaseColor-0d7_KjU ()J
public final fun getShimmerDuration ()I
public final fun getShimmerHighlightColor-0d7_KjU ()J
}

public final class com/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade : com/skydoves/landscapist/placeholder/shimmer/Shimmer {
public static final field $stable I
public synthetic fun <init> (JJLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJIILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJILkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun component1-0d7_KjU ()J
public final fun component2-0d7_KjU ()J
public final fun copy--OWjLjI (JJ)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;
public static synthetic fun copy--OWjLjI$default (Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;JJILjava/lang/Object;)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;
public final fun component3 ()I
public final fun copy-jxsXWHM (JJI)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;
public static synthetic fun copy-jxsXWHM$default (Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;JJIILjava/lang/Object;)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;
public fun equals (Ljava/lang/Object;)Z
public final fun getBaseColor-0d7_KjU ()J
public final fun getDuration ()I
public final fun getHighlightColor-0d7_KjU ()J
public fun hashCode ()I
public fun toString ()Ljava/lang/String;
Expand All @@ -73,7 +77,7 @@ public final class com/skydoves/landscapist/placeholder/shimmer/Shimmer$Flash :
public fun equals (Ljava/lang/Object;)Z
public final fun getBaseColor-0d7_KjU ()J
public final fun getDropOff ()F
public final fun getDurationMillis ()I
public final fun getDuration ()I
public final fun getHighlightColor-0d7_KjU ()J
public final fun getIntensity ()F
public final fun getTilt ()F
Expand All @@ -84,15 +88,17 @@ public final class com/skydoves/landscapist/placeholder/shimmer/Shimmer$Flash :

public final class com/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate : com/skydoves/landscapist/placeholder/shimmer/Shimmer {
public static final field $stable I
public synthetic fun <init> (JJFILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJFLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJIFILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJIFLkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun component1-0d7_KjU ()J
public final fun component2-0d7_KjU ()J
public final fun component3 ()F
public final fun copy-jxsXWHM (JJF)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;
public static synthetic fun copy-jxsXWHM$default (Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;JJFILjava/lang/Object;)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;
public final fun component3 ()I
public final fun component4 ()F
public final fun copy-RFnl5yQ (JJIF)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;
public static synthetic fun copy-RFnl5yQ$default (Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;JJIFILjava/lang/Object;)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;
public fun equals (Ljava/lang/Object;)Z
public final fun getBaseColor-0d7_KjU ()J
public final fun getDuration ()I
public final fun getHighlightColor-0d7_KjU ()J
public final fun getProgressForMaxAlpha ()F
public fun hashCode ()I
Expand Down
26 changes: 16 additions & 10 deletions landscapist-placeholder/api/desktop/landscapist-placeholder.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,24 @@ public final class com/skydoves/landscapist/placeholder/shimmer/LocalShimmerKt {

public abstract class com/skydoves/landscapist/placeholder/shimmer/Shimmer {
public static final field $stable I
public synthetic fun <init> (JJLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJILkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun getShimmerBaseColor-0d7_KjU ()J
public final fun getShimmerDuration ()I
public final fun getShimmerHighlightColor-0d7_KjU ()J
}

public final class com/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade : com/skydoves/landscapist/placeholder/shimmer/Shimmer {
public static final field $stable I
public synthetic fun <init> (JJLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJIILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJILkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun component1-0d7_KjU ()J
public final fun component2-0d7_KjU ()J
public final fun copy--OWjLjI (JJ)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;
public static synthetic fun copy--OWjLjI$default (Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;JJILjava/lang/Object;)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;
public final fun component3 ()I
public final fun copy-jxsXWHM (JJI)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;
public static synthetic fun copy-jxsXWHM$default (Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;JJIILjava/lang/Object;)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Fade;
public fun equals (Ljava/lang/Object;)Z
public final fun getBaseColor-0d7_KjU ()J
public final fun getDuration ()I
public final fun getHighlightColor-0d7_KjU ()J
public fun hashCode ()I
public fun toString ()Ljava/lang/String;
Expand All @@ -73,7 +77,7 @@ public final class com/skydoves/landscapist/placeholder/shimmer/Shimmer$Flash :
public fun equals (Ljava/lang/Object;)Z
public final fun getBaseColor-0d7_KjU ()J
public final fun getDropOff ()F
public final fun getDurationMillis ()I
public final fun getDuration ()I
public final fun getHighlightColor-0d7_KjU ()J
public final fun getIntensity ()F
public final fun getTilt ()F
Expand All @@ -84,15 +88,17 @@ public final class com/skydoves/landscapist/placeholder/shimmer/Shimmer$Flash :

public final class com/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate : com/skydoves/landscapist/placeholder/shimmer/Shimmer {
public static final field $stable I
public synthetic fun <init> (JJFILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJFLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJIFILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJIFLkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun component1-0d7_KjU ()J
public final fun component2-0d7_KjU ()J
public final fun component3 ()F
public final fun copy-jxsXWHM (JJF)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;
public static synthetic fun copy-jxsXWHM$default (Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;JJFILjava/lang/Object;)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;
public final fun component3 ()I
public final fun component4 ()F
public final fun copy-RFnl5yQ (JJIF)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;
public static synthetic fun copy-RFnl5yQ$default (Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;JJIFILjava/lang/Object;)Lcom/skydoves/landscapist/placeholder/shimmer/Shimmer$Resonate;
public fun equals (Ljava/lang/Object;)Z
public final fun getBaseColor-0d7_KjU ()J
public final fun getDuration ()I
public final fun getHighlightColor-0d7_KjU ()J
public final fun getProgressForMaxAlpha ()F
public fun hashCode ()I
Expand Down
2 changes: 1 addition & 1 deletion ...holder/src/commonMain/kotlin/com/skydoves/landscapist/placeholder/shimmer/FlashShimmer.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ public fun Shimmer(
val width = shimmerWidthPx ?: (size.width + tiltTan * size.height).toFloat()

try {
val dx = offset(-width, width, animatedProgress.value)
val dx = offset(-width, width * 1.5f, animatedProgress.value)
val shaderMatrix = Matrix().apply {
reset()
rotateX(size.width / 2f)
Expand Down
29 changes: 0 additions & 29 deletions ...eholder/src/commonMain/kotlin/com/skydoves/landscapist/placeholder/shimmer/Placeholder.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,11 @@
package com.skydoves.landscapist.placeholder.shimmer

import androidx.compose.animation.core.FiniteAnimationSpec
import androidx.compose.animation.core.InfiniteRepeatableSpec
import androidx.compose.animation.core.MutableTransitionState
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.Transition
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.animation.core.updateTransition
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
Expand Down Expand Up @@ -53,31 +49,6 @@ import androidx.compose.ui.unit.LayoutDirection
*
* All rights reserved to Google LLC.
*
* Contains default values used by [Modifier.placeholder] and [PlaceholderHighlight].
*/
internal object PlaceholderDefaults {
/**
* The default [InfiniteRepeatableSpec] to use for [fade].
*/
val fadeAnimationSpec: InfiniteRepeatableSpec<Float> by lazy {
infiniteRepeatable(
animation = tween(delayMillis = 0, durationMillis = 600),
repeatMode = RepeatMode.Reverse,
)
}

/**
* The default [InfiniteRepeatableSpec] to use for [shimmer].
*/
val shimmerAnimationSpec: InfiniteRepeatableSpec<Float> by lazy {
infiniteRepeatable(
animation = tween(delayMillis = 0, durationMillis = 1700),
repeatMode = RepeatMode.Restart,
)
}
}

/**
* Draws some skeleton UI which is typically used whilst content is 'loading'.
*
* A version of this modifier which uses appropriate values for Material themed apps is available
Expand Down
23 changes: 19 additions & 4 deletions ...rc/commonMain/kotlin/com/skydoves/landscapist/placeholder/shimmer/PlaceholderHighlight.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ package com.skydoves.landscapist.placeholder.shimmer

import androidx.compose.animation.core.AnimationSpec
import androidx.compose.animation.core.InfiniteRepeatableSpec
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.tween
import androidx.compose.runtime.Stable
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
Expand Down Expand Up @@ -70,10 +73,13 @@ internal interface PlaceholderHighlight {
*/
internal fun PlaceholderHighlight.Companion.fade(
highlightColor: Color,
animationSpec: InfiniteRepeatableSpec<Float> = PlaceholderDefaults.fadeAnimationSpec,
duration: Int,
): PlaceholderHighlight = Fade(
highlightColor = highlightColor,
animationSpec = animationSpec,
animationSpec = infiniteRepeatable(
animation = tween(delayMillis = 0, durationMillis = duration),
repeatMode = RepeatMode.Reverse,
),
)

/**
Expand All @@ -92,11 +98,14 @@ internal fun PlaceholderHighlight.Companion.fade(
*/
internal fun PlaceholderHighlight.Companion.shimmer(
highlightColor: Color,
animationSpec: InfiniteRepeatableSpec<Float> = PlaceholderDefaults.shimmerAnimationSpec,
duration: Int,
progressForMaxAlpha: Float = 0.6f,
): PlaceholderHighlight = Placeholder(
highlightColor = highlightColor,
animationSpec = animationSpec,
animationSpec = infiniteRepeatable(
animation = tween(delayMillis = 0, durationMillis = duration),
repeatMode = RepeatMode.Restart,
),
progressForMaxAlpha = progressForMaxAlpha,
)

Expand Down Expand Up @@ -151,3 +160,9 @@ private data class Placeholder(
private fun lerp(start: Float, stop: Float, fraction: Float): Float {
return (1 - fraction) * start + fraction * stop
}

internal const val DefaultProgressForMaxAlpha = 0.6f

internal const val DefaultResonateDuration = 1000

internal const val DefaultFadeDuration = 600
29 changes: 23 additions & 6 deletions ...placeholder/src/commonMain/kotlin/com/skydoves/landscapist/placeholder/shimmer/Shimmer.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import com.skydoves.landscapist.placeholder.shimmer.Shimmer.Resonate
public sealed class Shimmer(
public val shimmerBaseColor: Color,
public val shimmerHighlightColor: Color,
public val shimmerDuration: Int,
) {

/**
Expand All @@ -47,7 +48,7 @@ public sealed class Shimmer(
* @property intensity controls the brightness of the highlight at the center.
* @property dropOff controls the size of the fading edge of the highlight.
* @property tilt angle at which the highlight is tilted, measured in degrees.
* @property durationMillis animation duration of the shimmering start to end.
* @property duration animation duration of the shimmering start to end.
*/
@Immutable
public data class Flash(
Expand All @@ -57,8 +58,12 @@ public sealed class Shimmer(
val intensity: Float = DefaultShimmerIntensity,
val dropOff: Float = DefaultShimmerDropOff,
val tilt: Float = DefaultShimmerTilt,
val durationMillis: Int = DefaultDurationMillis,
) : Shimmer(shimmerBaseColor = baseColor, shimmerHighlightColor = highlightColor)
val duration: Int = DefaultDurationMillis,
) : Shimmer(
shimmerBaseColor = baseColor,
shimmerHighlightColor = highlightColor,
shimmerDuration = duration,
)

/**
* Characterized by its smooth and glowing appearance, this effect creates a more subtle and elegant visual.
Expand All @@ -69,24 +74,36 @@ public sealed class Shimmer(
*
* @property baseColor base background color of this composable.
* @property highlightColor highlight shimmering effect color of this composable.
* @property duration duration of the animation.
* @property progressForMaxAlpha The progress where the shimmer should be at it's peak opacity.
*/
@Immutable
public data class Resonate(
val baseColor: Color,
val highlightColor: Color,
val progressForMaxAlpha: Float = 0.6f,
) : Shimmer(shimmerBaseColor = baseColor, shimmerHighlightColor = highlightColor)
val duration: Int = DefaultResonateDuration,
val progressForMaxAlpha: Float = DefaultProgressForMaxAlpha,
) : Shimmer(
shimmerBaseColor = baseColor,
shimmerHighlightColor = highlightColor,
shimmerDuration = duration,
)

/**
* This effect offers a fading transition between the [baseColor] and [highlightColor].
*
* @property baseColor base background color of this composable.
* @property highlightColor highlight shimmering effect color of this composable.
* @property duration duration of the animation.
*/
@Immutable
public data class Fade(
val baseColor: Color,
val highlightColor: Color,
) : Shimmer(shimmerBaseColor = baseColor, shimmerHighlightColor = highlightColor)
val duration: Int = DefaultFadeDuration,
) : Shimmer(
shimmerBaseColor = baseColor,
shimmerHighlightColor = highlightColor,
shimmerDuration = duration,
)
}
Loading

0 comments on commit d717fb0

Please sign in to comment.