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

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

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

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

مطالب مرتبط : اندروید جت پک (Android Jetpack) رو خیلی خلاصه و مفید یاد بگیرید

ما قصد داریم در این پروژه یکسری انیمیشن به روی تصویری که اضافه کردیم اعمال کنیم. یعنی با استفاده از یک 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

        )

    }
}

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

)

}

مطالب مرتبط : آموزش پیاده سازی اسنک بار در Jetpack Compose

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

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

1	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)

1 2	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)
        )

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(

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 قرار دادیم تا آن میزان از تصویر ما را که برش میدهد به صورت تمام نمایش دهد .

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

برای امتیاز به این نوشته کلیک کنید!

[کل: 3 میانگین: 5]

اشتراک‌گذاری

آموزش Jetpack Compose در اندروید به زبان کاتلین |جت پک کامپوز در اندروید نوشته قبل

استفاده از آلرت دیالوگ در جت پک کامپوز بسیار راحت و در دو خط کد. نوشته بعد

فرشید حبیبی

من فرشید حبیبی هستم، یک برنامه نویس موبایل با بیش از 5 سال تجربه. من علاقه زیادی به برنامه نویسی دارم و در این زمینه به طور مداوم در حال یادگیری و پیشرفت هستم. در حال حاضر، به عنوان یک برنامه نویس اندروید در یک شرکت معتبر مشغول به کار هستم و همچنین یک وبسایت آموزشی به نام کدایت را اداره می کنم. در کدایت، به تولید محتوای آموزشی در مورد برنامه نویسی اندروید و وب می پردازیم. هدف من از ایجاد این وبسایت، کمک به سایر برنامه نویسان اندرویدی برای یادگیری و پیشرفت در این زمینه است.