diff --git a/app/src/main/java/com/mindorks/example/jetpack/compose/animation/CrossFadeAnimationActivity.kt b/app/src/main/java/com/mindorks/example/jetpack/compose/animation/CrossFadeAnimationActivity.kt index efb9248..a515395 100644 --- a/app/src/main/java/com/mindorks/example/jetpack/compose/animation/CrossFadeAnimationActivity.kt +++ b/app/src/main/java/com/mindorks/example/jetpack/compose/animation/CrossFadeAnimationActivity.kt @@ -3,47 +3,86 @@ package com.mindorks.example.jetpack.compose.animation import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import androidx.compose.animation.Crossfade +import androidx.compose.animation.core.LinearOutSlowInEasing +import androidx.compose.animation.core.tween import androidx.compose.foundation.Text import androidx.compose.foundation.background import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.* +import androidx.compose.material.Button import androidx.compose.runtime.* +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.setContent +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp class CrossFadeAnimationActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { - CrossFadeAnimation() + CrossFadeAnimation( + modifier = Modifier.fillMaxSize() + ) } } } @Composable -fun CrossFadeAnimation() { - val colors = listOf(Color.Red, Color.Green, Color.Blue, Color.Gray) - var current by remember { mutableStateOf(colors[0]) } - Column(modifier = Modifier.fillMaxSize()) { - // Crossfade animation is used when there is change in the screen, like if there - // is a transition between screens or there is a change in color of the screens or - // something like that. - // For example, here onClick of the Box, we are changing the background color of Box - // by using Crossfade animation. - Crossfade(current = current) { color -> - Box(Modifier.fillMaxSize().clickable( - onClick = { - current = colors.random() - } - ).background(color)) +fun CrossFadeAnimation( + modifier: Modifier +) { + val languages = listOf("Java","Python","JavaScript", "C#", "C++", "PHP", "Ruby", "Swift", "Objective-C", "Kotlin", "Go", + "Scala", "Rust", "TypeScript", "Dart", "Assembly", "Perl", "Visual Basic") + + var current by remember { + mutableStateOf(languages.first()) + } + + Column( + modifier = modifier, + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + Crossfade( + current = current, + animation = tween( + durationMillis = 400, + delayMillis = 100, + easing = LinearOutSlowInEasing + ) + ) { currentStr -> Text( - modifier = Modifier.fillMaxSize(), + modifier = Modifier.fillMaxWidth(), + text = currentStr, textAlign = TextAlign.Center, - text = "Click To See" + style = TextStyle( + color = Color(0xFFD32F2F), + fontSize = 45.sp, + fontWeight = FontWeight.Bold + ) + ) + } + + Spacer(modifier = Modifier.height(35.dp)) + + Button( + backgroundColor = Color(0xFF00796B), + onClick = { + current = languages.random() + } + ){ + Text( + text = "Click Here", + style = TextStyle( + color = Color.White, + fontSize = 14.sp, + fontWeight = FontWeight.SemiBold + ) ) } }