Saturday, April 3, 2021

jetpack compose - SlideIn SlideOut animation

MainActivity.kt

package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.animation.*
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : AppCompatActivity() {
    @ExperimentalAnimationApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @ExperimentalAnimationApi
    @Composable
    fun MainContent(){
        val longtext = "Lorem Ipsum is simply dummy text of the printing" +
                " and typesetting industry. Lorem Ipsum has been the" +
                " industry's standard dummy text ever since the 1500s," +
                " when an unknown printer took a galley of type and" +
                " scrambled it to make a type specimen book."

        val isVisible = remember { mutableStateOf(true) }

        Column(
            modifier = Modifier
                .background(Color(0xFFF5F5F5))
                .padding(16.dp)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ){
            Button(
                onClick = {
                    isVisible.value = !isVisible.value
                },
            ) {
                Text(if (isVisible.value)"Hide" else "Show")
            }

            AnimatedVisibility(
                visible = isVisible.value,
                enter = slideIn(
                    initialOffset = {
                            fullSize -> IntOffset(
                         fullSize.width / 2,
                         fullSize.height/2
                        )
                    },
                    tween(200, easing = LinearOutSlowInEasing)
                ),
                exit = slideOut(
                    targetOffset = {
                            fullSize -> IntOffset(
                         -fullSize.width/2,
                         fullSize.height/2
                        )
                    },
                    tween(200, easing = FastOutSlowInEasing)
                )
            ) {
                Box(
                    modifier = Modifier
                        .clip(RoundedCornerShape(12.dp))
                        .background(Color(0xFFD2691E))
                        .padding(16.dp)
                        .fillMaxSize()
                ) {
                    Text(
                        text = longtext,
                        fontSize = 35.sp,
                        fontWeight = FontWeight.Bold,
                        textAlign = TextAlign.Center,
                        fontFamily = FontFamily.Cursive,
                        color = Color(0xFF58111A),
                        modifier = Modifier.align(Alignment.Center)
                    )
                }
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}