ساخت انیمیشن در جت پک کامپوز

سلام خدمت همه ی عزیزان کدایت ، امروز قصد داریم مبحث انیمیشن در جت پک کامپوز را برای شما عزیزان آموزش دهیم .

ما در جلسات قبلی با مفاهیم اولیه در jetpack compose  آشنا شدیم  . و  تونستیم یاد بگیریم که تصاویر خودمون را ازشبکه دریافت و استفاده کنیم و خیلی از مطالب دیگر که برای آشنایی بیشتر شما با جت پک کامپوز میباشد . امروز قرار است یادبگیریم که چگونه از انیمیشن در jetpack compose استفاده کنیم .

استفاده از انیمیشن در جت پک کامپوز

ما مانند مباحث قبلی سعی میکنیم این آموزشمون هم پروژه محور باشد تا  شما برنامه نویسان عزیز بهتر یاد بگیرید . ایتدا یک پروژه JetPack Compose ایجاد کنید . روش های زیادی وجود دارد که شما بتوانید از انیمیشن در جت پک کامپوز استفاده کنید و ما یک روش بسیار راحتر را برای بار اول شما انتخاب میکنیم . ما قصد داریم در این پروژه یکسری انیمیشن به روی تصویری که اضافه کردیم اعمال کنیم.  یعنی با استفاده از یک Switch بتوانیم سایز تصویر  و حاشیه تصویر خودمون را به شکلی زیبا گرد کنیم .  من در قسمت پایین کد های لازم برای این کار را برای شما آوردم و قسمت های مختلف آن را برای شما عزیزان توضیح میدهم.

import android.os.Bundle
import android.widget.Switch
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Switch
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
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.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpack_animation.ui.theme.JetPack_AnimationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Show_Animation()
        }
    }
}


@Composable
fun Show_Animation() {
    val (animate, onAnimateChange) = remember { mutableStateOf(false) }
    val cornerSize by animateFloatAsState(targetValue = if (animate) 25f else 0f)
    val imageHeight by animateDpAsState(targetValue = if (animate) 300.dp else 20.dp)

    Column(
        Modifier.fillMaxSize(), horizontalAlignment =
        Alignment.CenterHorizontally
    ) {

        Switch(
            checked = animate, onCheckedChange = onAnimateChange,
            Modifier.padding(16.dp)
        )
        Image(
            painter = painterResource(id = R.drawable.aks), contentDescription = "image",
            Modifier
                .padding(8.dp)
                .clip(RoundedCornerShape(cornerSize))
                .border(2.dp, Color.Red, RoundedCornerShape(cornerSize))
                .fillMaxWidth()
                .height(imageHeight), contentScale = ContentScale.Crop

        )

    }
}

توضیحات کد بالا :

val (animate, onAnimateChange) = remember { mutableStateOf(false) }

ما در کد بالا دوتا متغیر تعریف کردیم که متغیر animate نشان دهنده فعال یا غیره فعال بودن Switch میباشد . و دومین متغیر برای زمانی هست که مقدار سوییچ تغییر میکند .

    val cornerSize by animateFloatAsState(targetValue = if (animate) 25f else 0f)
    val imageHeight by animateDpAsState(targetValue = if (animate) 300.dp else 200.dp)

خط اول از کد های بالا برای تعیین مقدار Corner یا همون میزان گردی حاشیه تصویر ما میباشد که ما شرط کرده ایم اگر سوییچ  فعال باشد 25 باشد و در غیره این صورت 0 . واما خط دوم از کد های بالا برای اندازه تصویر ما میباشد و شرط شده است که در صورت فعال بودن Switch  ارتفاع 300 و در غیره این صورت 200 باشد .

        Switch(
            checked = animate, onCheckedChange = onAnimateChange,
            Modifier.padding(16.dp)
        )

در کد بالا ما یک سوییچ تعریف کرده ایم . و آن State های که در قسمت بالا تعریف کرده بودیم تا در صورت True بودن انیمیشن ما فعال شود در آن قرار می دهیم .

 Image(
            painter = painterResource(id = R.drawable.aks), contentDescription = "image",
            Modifier
                .padding(8.dp)
                .clip(RoundedCornerShape(cornerSize))
                .border(2.dp, Color.Red, RoundedCornerShape(cornerSize))
                .fillMaxWidth()
                .height(imageHeight), contentScale = ContentScale.Crop

        )

در آخر در قسمت کد های بالا ما مدیم یک Image ایجاد کردیم که میخواهیم انیمیشن ما به روی آن اعمال شود .  همانطور که میدانید clip  برای گرد کردن گوشه تصویر ما میباشد که ما مقدار ورودی آن را corner size که در قسمت بالا تعریف کردیم را قرار دادیم . و در border نیز برای تصویر خودمون یک border به اندازه 2.dp قرار دادیم و رنک و میزان گردی حاشیه آن را نیز تعیین کردیم . بعد از آن عرض و ارتفاع آن را نیز مشخص کردیم و در آخر ContentScale آن را برابر Crop قرار دادیم تا آن میزان از تصویر ما را که برش میدهد به صورت تمام نمایش دهد .

در اینجا کار ما به اتمام رسید و خروجی کدما به صورت زیر میباشد .