یک splash از جنس انیمیشن بسازید
تو آموزش قبل فهمیدیم که splash screen ها چه موجوداتی هستن و کجا کاربرد دارن! و باهم یه splash screen شفاف هم ساختیم.
امروز میخواهیم کمی بیشتر کار کنیم و یه splash screen با انیمیشن بسازیم!
شاید با انیمیشن ها تو اندروید آشنا نباشین! خب جای نگرانی نیست! ما در حد نیاز با انیمیشن هم آشنا میشیم.
وقتشه که کارمون رو شروع کنیم.
تو اولین مرحله ما یه فایل با اسم activity_splash.xml تو مسیر layout میسازیم و کد زیر رو داخلش کپی میکنیم.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff" android:layout_gravity="center" android:gravity="center"> <ImageView android:layout_width="match_parent" android:layout_height="130dp" android:id="@+id/splash" android:src="@drawable/zero_to_hero" /> <TextView android:id="@+id/splash_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="zero to hero" android:paddingTop="20dp" android:textColor="#f6a61c" android:textSize="30sp" /> </LinearLayout>
تو کد بالا یه تصویر و یه متن داریم.تصویر میتونه لوگوی برنامه یا شرکت یا هر چیز دیگه ای که مربوط به برنامه و سازندشه رو نشون بده.
متن هم اسم برنامه و یا خوش آمد گویی و … میتونه باشه.
تو مرحله ی دوم میخواهیم انیمیشن ها رو تعریف کنیم.واس این کار داخل مسیر res یه مسیر جدید به اسم anim میسازیم.
حالا داخل مسیر anim فایل fade_out.xml با root element = set رو ایجاد میکنیم و کد زیر رو داخلش کپی میکنیم.
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="300" android:fromAlpha="0" android:startOffset="2300" android:interpolator="@android:anim/linear_interpolator" android:repeatCount="0" android:repeatMode="reverse" android:toAlpha="1" /> </set>
این کارگاه راجب انیمیشن ها نیست ، پس ما هم سعی میکنیم تا حد نیاز یادبگیریم.
کد بالا از یه تگ پدر به اسم set و یک تگ فرزند به اسم alpha تشکیل شده.داخل تگ alpha ما یه سری صفات داریم که در مورد اونا بحث میکنیم.
خاصیت alpha تو انیمیشن ها شفافیت رو میسازه؛ وقتی به یک عنصر (مثلا عکس یا متن) این خاصیت داده میشه با توجه به صفات تعریف شده میتونه شفاف بشه و محو بشه یا اینکه از از اول محو باشه و کم کم پیدا بشه.
صفت duration مدت زمانی که این انیمیشن قراره اجرا بشه رو بر حسب میلی ثانیه مشخص میکنه.(تو اینجا این افکت ۳۰۰ میلی ثانیه طول عمر داره و بعد از اون دیگه تحرکی نداره)
صفت fromAlpha مقدار اولیه ی alpha رو مشخص میکنه.(آلفا بین ۰ تا ۱ هستش؛ ۰ یعنی کاملا محو و ۱ یعنی کاملا پیدا؛توی این مثال عنصر مورد نظر در اول کار کاملا محوه)
صفت startOffset زمان شروع رو مشخص میکنه.(تو اینجا یعنی ۲۳۰۰ میلی ثانیه بعد از دستور اجرا ، افکت رو اجرا کن)
صفت interpolator و repeatCount و repeatMode رو بعدا تحت کارگاه انیمیشن کار میکنیم.
صفت toAlpha مقدار ثانویه ی alpha رو مشخص میکنه.(یعنی وقتی به اخر مدت زمان تعریف شده رسید این مقدار رو به خودش میگیره که تو اینجا ۱ یا کاملا پیدا هست)
این خاصیت رو برای متن نوشتیم که جلوتر تو کد جاوا ، بهش اختصاص میدیم.
در مرحله ی سوم یه فایل دیگه با اسم translate.xml و root element = set میسازیم و کد زیر رو داخلش کپی میکنیم.
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:duration="2100" android:fromXScale="0.3" android:fromYScale="0.3" android:interpolator="@android:anim/bounce_interpolator" android:startOffset="0" android:toXScale="1" android:toYScale="1" android:pivotX="50%" android:pivotY="50%"/> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2100" android:fromXDelta="0%" android:fromYDelta="300%" android:toXDelta="0%" android:toYDelta="0%" android:zAdjustment="top" /> </set>
این کد هم در ارتباط با انیمیشن نوشته شده.
تگ scale برای تغییر ابعاد یک عنصر به کار میره و با توجه به صفات تعریف شده اون رو میسازه.
بعضی صفات با تگ قبلی مشترک هستن که ازشون فاکتور میگیریم!
صفت fromXScale و fromYScale مقدار اولیه ی ابعاد x و y رو نشون میدن.(تو اینجا یعنی ۳ دهم مقدار تصویر اصلی رو ، هم در طول و هم در عرض دارا باشه)
صفت toXScale و toYScale مقدار ثانویه ی ابعاد x و y رو نشون میده.(ابعاد نهایی عنصر)
صفت pivotX و pivotY محور و نقطه ی مرکزی رو تعیین میکنه.(تو اینجا میخواهیم وسط طول و عرض (۵۰%) مرکزش باشه)
تگ translate برای جابجایی عنصر تو صفحه استفاده میشه.
صفت fromXDelta و fromYDelta مکان اولیه ی عنصر رو مشخص میکنه.(تو اینجا عرض تغییری نمیکنه ولی طول ۳۰۰% نسبت به طول عنصر ، پایین تر از مکان اصلی عنصر هست)
صفت toXDelta و toYDelta مکان ثانویه یا نهایی عنصر رو مشخص میکنه.(اینجا میگه طول و عرض به اندازه ی تصویر واقعی بشه (با مقدار ۰ و ۰ برای این صفات))
حالا وقتشه که فایل SplashScreen.java رو بسازیم و کد زیر رو داخلش کپی کنیم.
package ir.zerotohero.ghorbi.ahmad.anim.splashscreen; import android.content.Intent; import android.os.Bundle; import android.os.Handler; import android.support.v7.app.AppCompatActivity; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; import android.widget.TextView; public class SplashScreen extends AppCompatActivity { ImageView splashImage ; TextView splashText; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.splash_activity); splashImage = (ImageView) findViewById(R.id.splash); splashText = (TextView) findViewById(R.id.splash_text); StartAnimations(); } private void StartAnimations() { Animation anim = AnimationUtils.loadAnimation(this, R.anim.translate); anim.reset(); splashImage.clearAnimation(); splashImage.startAnimation(anim); anim = AnimationUtils.loadAnimation(this, R.anim.fade_out); splashText.clearAnimation(); splashText.startAnimation(anim); new Handler().postDelayed(new Runnable() { // Using handler with postDelayed called runnable run method @Override public void run() { Intent intent = new Intent(SplashScreen.this, MainActivity.class); startActivity(intent); finish(); } }, 3500); } }
داخل کد بالا ما عناصر ساخته شده تو activity_splash رو وصل میکنیم و بعد داخل متد startAnimations با کد زیر یک انیمیشن تعریف میکنیم و با متد reset مطمئن میشیم که انیمیشن در حالت اولیه قرار گرفته و منتظر اجراست.
Animation anim = AnimationUtils.loadAnimation(); anim.reset();
حالا با متد ()startAnimation و مقدار ورودی anim ، انیمیشن مورد نظر را به یک عنصر اختصاص میدهیم.
حالا با استفاده از handler یک ترد (thread) میسازیم و به مدت ۳۵۰۰ms مکث میکنیم و بعد وارد صفحه ی اصلی میشیم.
یادتون باشه که کد activity ها داخل androidManifest باید به صورت زیر باشه.
<activity android:name=".SplashScreen" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".MainActivity"/>
این کارگاه هم تموم شد!
منتظر کارگاه های بعدی باشید.
مطمئنم عاشق این splash شدین!
سوالاتتون رو تو قسمت نظرات مطرح کنید.
تا کارگاه بعدی شما رو به خدا میسپارم.
موفق باشید
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.