گرافیک های قابل ترسیم را متحرک کنید

روش نوشتن را امتحان کنید

Jetpack Compose ابزار رابط کاربری پیشنهادی برای اندروید است. یاد بگیرید که چگونه از انیمیشن‌ها در Compose استفاده کنید.

متحرک‌سازی فایل‌های برداری قابل ترسیم →

شکل ۱. یک فایل قابل ترسیم متحرک.

در برخی شرایط، تصاویر نیاز به انیمیشن دارند. این قابلیت زمانی مفید است که بخواهید یک انیمیشن بارگذاری سفارشی متشکل از چندین تصویر نمایش دهید یا اگر می‌خواهید یک آیکون پس از عمل کاربر تغییر شکل دهد. اندروید دو گزینه برای انیمیشن‌سازی drawableها ارائه می‌دهد.

گزینه اول استفاده از AnimationDrawable است. این به شما امکان می‌دهد چندین فایل قابل ترسیم استاتیک را مشخص کنید که یکی پس از دیگری نمایش داده می‌شوند تا یک انیمیشن ایجاد شود. گزینه دوم استفاده از AnimatedVectorDrawable است که به شما امکان می‌دهد ویژگی‌های یک فایل قابل ترسیم برداری را متحرک کنید.

استفاده از AnimationDrawable

یکی از راه‌های ایجاد انیمیشن، بارگذاری دنباله‌ای از منابع قابل ترسیم، مانند یک رول فیلم است. کلاس AnimationDrawable اساس این نوع انیمیشن‌های قابل ترسیم است.

شما می‌توانید فریم‌های یک انیمیشن را در کد خود با استفاده از API کلاس AnimationDrawable تعریف کنید، اما تعریف آنها با یک فایل XML که فریم‌های تشکیل‌دهنده انیمیشن را فهرست می‌کند، آسان‌تر است. فایل XML برای این نوع انیمیشن در دایرکتوری res/drawable/ پروژه اندروید شما قرار دارد. در این حالت، دستورالعمل‌ها ترتیب و مدت زمان هر فریم در انیمیشن را نشان می‌دهند.

فایل 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() را برای پخش آن فراخوانی کنید. در اینجا مثالی از یک activity آورده شده است که در آن انیمیشن به یک 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 خود فراخوانی کنید، که وقتی اندروید نمای مورد نظر را روی صفحه نمایش می‌دهد، فراخوانی می‌شود.

برای اطلاعات بیشتر در مورد سینتکس 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)

ابزار Animated Vector Drawable در اندروید استودیو به شما امکان می‌دهد منابع متحرک قابل ترسیم را پیش‌نمایش کنید. این ابزار به شما کمک می‌کند تا پیش‌نمایش منابع <animation-list> ، <animated-vector> و <animated-selector> را در اندروید استودیو مشاهده کنید و اصلاح انیمیشن‌های سفارشی خود را آسان‌تر می‌کند.

شکل ۳. ابزار رسم بردار متحرک در اندروید استودیو.

برای اطلاعات بیشتر، به مرجع API برای AnimatedVectorDrawable مراجعه کنید.