در برخی شرایط، تصاویر باید پویانمایی شوند. این ویژگی زمانی مفید است که بخواهید پویانمایی بار کردن سفارشی متشکل از چند تصویر را نمایش دهید یا بخواهید نمادی پس‌از کنش کاربر تغییر شکل دهد. Android دو گزینه برای پویانمایی کردن ترسیم‌شدنی‌ها ارائه می‌دهد.
گزینه اول استفاده از AnimationDrawable است. این
به شما امکان می‌دهد چندین
فایل قابل‌ترسیم ایستا را مشخص کنید که یکی‌یکی نمایش داده می‌شوند تا
پویانمایی ایجاد شود. گزینه دوم استفاده از
AnimatedVectorDrawable است که به شما امکان می‌دهد ویژگی‌های
ترسیمی بُرداری را پویانمایی کنید.
استفاده از AnimationDrawable
یکی از راه‌های ایجاد پویانمایی، بار کردن دنباله‌ای از منابع ترسیم‌شدنی است، مثل یک حلقه فیلم.
کلاس AnimationDrawable
پایه این نوع پویانمایی‌های قابل‌ترسیم است.
می‌توانید فریم‌های پویانمایی را در کدتان بااستفاده از AnimationDrawable
کلاس API تعریف کنید، اما تعریف کردن آن‌ها با یک فایل XML که فریم‌های تشکیل‌دهنده پویانمایی را فهرست می‌کند آسان‌تر است. فایل XML برای این نوع پویانمایی به res/drawable/
دایرکتوری پروژه Android شما تعلق دارد. در این حالت، دستورالعمل‌ها ترتیب و مدت‌زمان هر قاب را در پویانمایی ارائه می‌دهند.
فایل XML از یک عنصر <animation-list> به‌عنوان گره ریشه و یک سری گره‌های فرزند <item> تشکیل شده است که هرکدام یک فریم را تعریف می‌کنند—یک منبع ترسیم‌شدنی و مدت‌زمان آن. در اینجا نمونه‌ای از فایل XML برای پویانمایی Drawable آورده شده است:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> <item android:drawable="@drawable/rocket_thrust1" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust2" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust3" android:duration="200" /> </animation-list>
این پویانمایی سه فریم دارد. تنظیم کردن مشخصه android:oneshot
فهرست روی true باعث می‌شود یک‌بار چرخه را طی کند و سپس متوقف شود و
روی آخرین قاب بماند. اگر android:oneshot را روی false تنظیم کنید،
پویانمایی تکرار می‌شود.
اگر این XML را به‌عنوان rocket_thrust.xml در فهرست راهنمای res/drawable/ پروژه ذخیره کنید، می‌توانید آن را به‌عنوان تصویر پس‌زمینه به View اضافه کنید و سپس start() را فراخوانی کنید تا پخش شود. در اینجا مثالی از فعالیتی آورده شده است که در آن پویانمایی به
ImageView اضافه شده است و سپس هنگام لمس صفحه
پویانمایی می‌شود:
کاتلین
private lateinit var rocketAnimation: AnimationDrawable override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.main) val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply { setBackgroundResource(R.drawable.rocket_thrust) rocketAnimation = background as AnimationDrawable } rocketImage.setOnClickListener({ rocketAnimation.start() }) }
جاوا
AnimationDrawable rocketAnimation; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.setBackgroundResource(R.drawable.rocket_thrust); rocketAnimation = (AnimationDrawable) rocketImage.getBackground(); rocketImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { rocketAnimation.start(); } }); }
توجه به این نکته مهم است که روش start() فراخوانی‌شده در
AnimationDrawable را نمی‌توان درطول روش onCreate() مربوط به
Activity فراخوانی کرد، زیرا AnimationDrawable هنوز به‌طور کامل به
پنجره متصل نشده است. برای پخش فوری پویانمایی بدون نیاز به تعامل، می‌توانید آن را از روش
onStart()Activity خود فراخوانی کنید، که وقتی Android نما را روی صفحه نمایان می‌کند فراخوانی می‌شود.
برای اطلاعات بیشتر درباره نحو XML و برچسب‌ها و مشخصه‌های دردسترس، به منابع پویانمایی مراجعه کنید.
استفاده از AnimatedVectorDrawable
ترسیمی بُرداری
نوعی ترسیمی است که بدون پیکسلی یا محو شدن مقیاس‌پذیر است. کلاس
AnimatedVectorDrawable—و
AnimatedVectorDrawableCompat برای سازگاری با نسخه قدیمی—به شما امکان می‌دهد ویژگی‌های یک ترسیمی بُرداری را پویانمایی کنید، مانند چرخاندن آن یا تغییر داده‌های مسیر برای تبدیل آن به یک تصویر متفاوت.
معمولاً ترسیمی‌های برداری پویانمایی‌شده را در سه فایل XML تعریف می‌کنید:
- ترسیمی بُرداری با عنصر
<vector>درres/drawable/. - ترسیمی بُرداری پویانمایی‌شده با عنصر
<animated-vector>درres/drawable/. - یک یا چند پویانمایی‌ساز شیء با عنصر
<objectAnimator>درres/animator/.
ترسیمی‌های برداری پویانمایی‌شده می‌توانند مشخصه‌های عناصر <group> و <path> را پویانمایی کنند. عنصر <group> مجموعه‌ای از مسیرها یا زیرگروه‌ها را تعریف می‌کند، و عنصر <path> مسیرهایی را که باید ترسیم شوند تعریف می‌کند.
وقتی ترسیمی بُرداری‌ای را تعریف می‌کنید که می‌خواهید پویانمایی کنید، از مشخصه android:name برای اختصاص دادن نامی یکتا به گروه‌ها و مسیرها استفاده کنید تا بتوانید از تعاریف پویانما به آن‌ها ارجاع دهید. برای مثال:
res/drawable/vectordrawable.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600"> <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
تعریف ترسیمی برداری پویانمایی‌شده به گروه‌ها و مسیرها در ترسیمی برداری با نام‌هایشان اشاره می‌کند:
res/drawable/animatorvectordrawable.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vectordrawable" > <target android:name="rotationGroup" android:animation="@animator/rotation" /> <target android:name="v" android:animation="@animator/path_morph" /> </animated-vector>
تعاریف پویانمایی نشان‌دهنده اشیای
ObjectAnimator یا
AnimatorSet است. اولین پویانما در این مثال، گروه هدف را ۳۶۰ درجه می‌چرخاند:
res/animator/rotation.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" /> </set>
پویانمای دوم در این مثال، مسیر ترسیمی بُرداری را از یک شکل به شکل دیگر تبدیل می‌کند. مسیرها باید برای دگردیسی سازگار باشند: باید تعداد فرمان‌های یکسان و تعداد پارامترهای یکسان برای هر فرمان داشته باشند.
res/animator/path_morph.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType" /> </set>
AnimatedVectorDrawable حاصل در اینجا آمده است:
AnimatedVectorDrawable.پیش‌نمایش «ترسیمی بُرداری پویانمایی‌شده» (AVD)
ابزار «ترسیمی بُرداری پویانمایی‌شده» در «استودیو Android» به شما امکان می‌دهد پیش‌نمایش منابع ترسیم‌شدنی پویانمایی‌شده را ببینید. این ابزار به شما کمک می‌کند منابع <animation-list>،
<animated-vector>، و <animated-selector> را در
Android Studio پیش‌دید کنید و اصلاح پویانمایی‌های سفارشی را آسان‌تر می‌کند.
برای اطلاعات بیشتر، به مرجع میانای برنامه‌سازی کاربردی برای
AnimatedVectorDrawable مراجعه کنید.