مشاهده پویانمایی

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

Jetpack Compose جعبه‌ابزار واسط کاربر توصیه‌شده برای Android است. با نحوه استفاده از «پویانمایی‌ها» در Compose آشنا شوید.

مشخصه‌های پویانمایی →

می‌توانید از سیستم پویانمایی نما برای اجرای پویانمایی بینابینی در «نماها» استفاده کنید. پویانمایی بینابینی پویانمایی را با اطلاعاتی مانند نقطه شروع، نقطه پایان، اندازه، چرخش، و دیگر جنبه‌های رایج پویانمایی محاسبه می‌کند.

پویانمایی بینابینی می‌تواند مجموعه‌ای از تبدیل‌های ساده (موقعیت، اندازه، چرخش، و شفافیت) را روی محتوای شیء View انجام دهد. بنابراین، اگر شیء TextView دارید، می‌توانید نوشتار را جابه‌جا کنید، بچرخانید، بزرگ کنید، یا کوچک کنید. اگر تصویر پس‌زمینه داشته باشد، تصویر پس‌زمینه همراه با نوشتار تبدیل خواهد شد. animation package همه کلاس‌های استفاده‌شده در پویانمایی بینابینی را ارائه می‌دهد.

دنباله‌ای از دستورالعمل‌های پویانمایی، پویانمایی بینابینی را تعریف می‌کند که توسط XML یا کد Android تعریف می‌شود. همانند تعریف چیدمان، استفاده از فایل XML توصیه می‌شود زیرا خواناتر، قابل‌استفاده مجدد، و قابل‌تعویض‌تر از کدنویسی سخت پویانمایی است. در مثال زیر، از XML استفاده می‌کنیم. (برای کسب اطلاعات بیشتر درباره تعریف پویانمایی در کد برنامه، به‌جای XML، به کلاس AnimationSet و دیگر زیرکلاس‌های Animation مراجعه کنید.)

دستورالعمل‌های پویانمایی تبدیل‌هایی را که می‌خواهید اتفاق بیفتد، زمان وقوع آن‌ها، و مدت‌زمانی را که باید برای اعمال آن‌ها صرف شود تعریف می‌کنند. تبدیل‌ها می‌توانند متوالی یا هم‌زمان باشند - برای مثال، می‌توانید محتوای TextView را از چپ به راست حرکت دهید و سپس ۱۸۰ درجه بچرخانید، یا می‌توانید نوشتار را به‌طور هم‌زمان حرکت دهید و بچرخانید. هر تبدیل مجموعه‌ای از پارامترهای خاص آن تبدیل را می‌گیرد (اندازه شروع و اندازه پایان برای تغییر اندازه، زاویه شروع و زاویه پایان برای چرخش، و غیره)، و همچنین مجموعه‌ای از پارامترهای مشترک (برای مثال، زمان شروع و مدت زمان). برای اینکه چند تبدیل به‌طور هم‌زمان اتفاق بیفتد، زمان شروع یکسانی به آن‌ها بدهید؛ برای اینکه آن‌ها را متوالی کنید، زمان شروع را به‌علاوه مدت‌زمان تبدیل قبلی محاسبه کنید.

فایل XML پویانمایی به فهرست راهنمای res/anim/ پروژه Android شما تعلق دارد. فایل باید یک عنصر ریشه تکی داشته باشد: این عنصر یا یک عنصر تکی <alpha>، <scale>، <translate>، <rotate>، عنصر interpolator، یا عنصر <set> است که گروه‌هایی از این عناصر را نگه می‌دارد (که ممکن است شامل یک <set> دیگر باشد). به‌طور پیش‌فرض، همه دستورالعمل‌های پویانمایی به‌طور هم‌زمان اعمال می‌شوند. برای اینکه این رویدادها به‌صورت متوالی رخ دهند، باید ویژگی startOffset را مشخص کنید، همان‌طور که در مثال زیر نشان داده شده است.

از XML زیر از یکی از ApiDemos برای کشیدن، سپس چرخاندن و چرخش هم‌زمان شیء View استفاده می‌شود.

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

مختصات صفحه (در این مثال استفاده نشده است) در گوشه بالا سمت چپ (0,0) است و با رفتن به پایین و سمت راست افزایش می‌یابد.

برخی‌از مقادیر، مانند pivotX، می‌توانند نسبت به خود شیء یا نسبت به والد مشخص شوند. حتماً از قالب مناسب برای آنچه می‌خواهید استفاده کنید («۵۰» برای ۵۰٪ نسبت به والد، یا «٪۵۰» برای ۵۰٪ نسبت به خودش).

با اختصاص دادن Interpolator می‌توانید تعیین کنید که تبدیل چگونه درطول زمان اعمال شود. Android شامل چندین زیرکلاس Interpolator است که منحنی‌های سرعت مختلفی را مشخص می‌کنند: برای مثال، AccelerateInterpolator به تبدیل می‌گوید که آهسته شروع کند و سرعت بگیرد. هرکدام مقدار مشخصه‌ای دارند که می‌تواند در XML اعمال شود.

با ذخیره این XML به‌عنوان hyperspace_jump.xml در فهرست راهنمای res/anim/ پروژه، کد زیر به آن ارجاع می‌دهد و آن را روی شیء ImageView از چیدمان اعمال می‌کند.

کاتلین

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

جاوا

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

به‌عنوان جایگزینی برای startAnimation()، می‌توانید زمان شروعی برای پویانمایی با Animation.setStartTime() تعریف کنید، سپس پویانمایی را با View.setAnimation() به «نما» اختصاص دهید.

برای اطلاعات بیشتر درباره نحو XML، برچسب‌ها و مشخصه‌های دردسترس، منابع پویانمایی را ببینید.

توجه: صرف‌نظر از اینکه پویانمایی شما چگونه حرکت می‌کند یا تغییر اندازه می‌دهد، مرزهای «نمایی» که پویانمایی شما را نگه می‌دارد به‌طور خودکار برای تطبیق با آن تنظیم نمی‌شود. بااین‌حال، پویانمایی همچنان فراتر از مرزهای View آن ترسیم می‌شود و بریده نخواهد شد. بااین‌حال، اگر پویانمایی از حدود «نمای» اصلی فراتر رود، برش رخ خواهد داد.