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

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

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

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

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

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

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

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

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

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

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

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

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 2 میانگین: 5]
اشتراک‌گذاری

برنامه نویس موبایل، علاقه مند به سئو و وردپرس و تولید محتوا در زمینه برنامه نویسی اندروید

یک نظر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *