ایجاد پویانمایی انتقال سفارشی

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

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

افزودن چند ویژگی با انتقال در Compose →

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

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

این صفحه به شما آموزش می‌دهد که چگونه مقادیر ویژگی را ضبط کنید و پویانمایی‌هایی برای ایجاد گذار سفارشی تولید کنید.

گسترش کلاس Transition

برای ایجاد انتقال سفارشی، کلاسی را به پروژه‌تان اضافه کنید که کلاس Transition را گسترش دهد و توابع نشان‌داده‌شده در قطعه کد زیر را لغو کند:

کاتلین

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

    override fun createAnimator(
        sceneRoot: ViewGroup,
        startValues: TransitionValues?,
        endValues: TransitionValues?
    ): Animator? {}

}

جاوا

public class CustomTransition extends Transition {

    @Override
    public void captureStartValues(TransitionValues values) {}

    @Override
    public void captureEndValues(TransitionValues values) {}

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {}
}

بخش‌های زیر نحوه لغو این توابع را توضیح می‌دهند.

ضبط کردن مقادیر خصوصیت نما

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

بااین‌حال، پویانمایی ویژگی معمولاً فقط به زیرمجموعه کوچکی از همه مقادیر ویژگی نما نیاز دارد. برای مثال، پویانمایی رنگ به مقادیر ویژگی رنگ نیاز دارد، درحالی‌که پویانمایی حرکت به مقادیر ویژگی موقعیت نیاز دارد. ازآنجایی‌که مقادیر ویژگی موردنیاز برای پویانمایی مختص انتقال است، چارچوب انتقال‌ها همه مقادیر ویژگی را برای انتقال ارائه نمی‌دهد. درعوض، چارچوب توابع بازخوانی را فرامی‌خواند که به انتقال اجازه می‌دهد فقط مقادیر ویژگی موردنیازش را ضبط کند و آن‌ها را در چارچوب ذخیره کند.

ثبت مقادیر شروع

برای ارسال مقادیر نمای شروع به چارچوب، تابع captureStartValues(transitionValues) را پیاده‌سازی کنید. چارچوب این تابع را برای هر نما در صحنه شروع فراخوانی می‌کند. متغیر مستقل تابع یک شیء TransitionValues است که حاوی مرجعی به نما و نمونه Map است که در آن می‌توانید مقادیر نمای موردنظرتان را ذخیره کنید. در پیاده‌سازی‌تان، این مقادیر ویژگی را بازیابی کنید و با ذخیره کردن آن‌ها در نقشه، آن‌ها را به چارچوب برگردانید.

برای اطمینان از اینکه کلید مقدار دارایی با دیگر کلیدهای TransitionValues تداخل نداشته باشد، از طرح نام‌گذاری زیر استفاده کنید:

package_name:transition_name:property_name

قطعه کد زیر پیاده‌سازی تابع captureStartValues() را نشان می‌دهد:

کاتلین

class CustomTransition : Transition() {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private val PROPNAME_BACKGROUND = "com.example.android.customtransition:CustomTransition:background"

    override fun captureStartValues(transitionValues: TransitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues)
    }

    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private fun captureValues(transitionValues: TransitionValues) {
        // Get a reference to the view
        val view = transitionValues.view
        // Store its background property in the values map
        transitionValues.values[PROPNAME_BACKGROUND] = view.background
    }

    ...

}

جاوا

public class CustomTransition extends Transition {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private static final String PROPNAME_BACKGROUND =
            "com.example.android.customtransition:CustomTransition:background";

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues);
    }


    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private void captureValues(TransitionValues transitionValues) {
        // Get a reference to the view
        View view = transitionValues.view;
        // Store its background property in the values map
        transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
    }
    ...
}

مقادیر پایانی ضبط

چارچوب تابع captureEndValues(TransitionValues) را یک‌بار برای هر نمای هدف در صحنه پایانی فراخوانی می‌کند. در سایر موارد، captureEndValues() مانند captureStartValues() کار می‌کند.

تکه‌کد زیر پیاده‌سازی تابع captureEndValues() را نشان می‌دهد:

کاتلین

override fun captureEndValues(transitionValues: TransitionValues) {
    captureValues(transitionValues)
}

جاوا

@Override
public void captureEndValues(TransitionValues transitionValues) {
    captureValues(transitionValues);
}

در این مثال، هر دو تابع captureStartValues() و captureEndValues() captureValues() را برای بازیابی و ذخیره مقادیر فراخوانی می‌کنند. ویژگی نمای که captureValues() بازیابی می‌کند یکسان است، اما در صحنه‌های شروع و پایان مقادیر متفاوتی دارد. این چارچوب نقشه‌های جداگانه‌ای را برای حالت‌های شروع و پایان یک نما حفظ می‌کند.

ایجاد پویانمایی سفارشی

برای پویانمایی تغییرات در یک نما بین حالت آن در صحنه شروع و حالت آن در صحنه پایان، یک پویانما را با لغو تابع createAnimator() ارائه دهید. وقتی چارچوب این تابع را فراخوانی می‌کند، نمای ریشه صحنه و اشیاء TransitionValues را که حاوی مقادیر شروع و پایان ضبط‌شده شما هستند ارسال می‌کند.

تعداد دفعاتی که چارچوب تابع createAnimator() را فراخوانی می‌کند به تغییراتی بستگی دارد که بین صحنه شروع و پایان رخ می‌دهد.

برای مثال، پویانمایی محو شدن یا ظاهر شدن را درنظر بگیرید که به‌عنوان گذار سفارشی پیاده‌سازی شده است. اگر صحنه شروع پنج هدف داشته باشد که دو مورد از آن‌ها از صحنه پایان برداشته شده باشد، و صحنه پایان سه هدف از صحنه شروع به‌علاوه یک هدف جدید داشته باشد، چارچوب createAnimator() را شش بار فراخوانی می‌کند. سه تماس، محو شدن و ظاهر شدن هدف‌هایی را که در هر دو شیء صحنه باقی می‌مانند پویانمایی می‌کنند. دو فراخوانی دیگر، محو شدن هدف‌های برداشته‌شده از صحنه پایانی را پویانمایی می‌کنند. یک فراخوانی، پویانمایی محو شدن هدف جدید را در صحنه پایانی فعال می‌کند.

برای نماهای هدفی که هم در صحنه شروع و هم در صحنه پایان وجود دارند، چارچوب یک شیء TransitionValues را برای هر دو آرگومان startValues و endValues ارائه می‌دهد. برای نماهای هدفی که فقط در صحنه شروع یا پایان وجود دارند، چارچوب یک شیء TransitionValues برای آرگومان مربوطه و null برای دیگری ارائه می‌دهد.

برای پیاده‌سازی تابع createAnimator(ViewGroup, TransitionValues, TransitionValues) هنگام ایجاد یک انتقال سفارشی، از مقادیر ویژگی نمایشی که ضبط کرده‌اید برای ایجاد یک شیء Animator استفاده کنید و آن را به چارچوب برگردانید. برای نمونه پیاده‌سازی، کلاس ChangeColor را در نمونه CustomTransition ببینید. برای اطلاعات بیشتر درباره پویانماهای ویژگی، به پویانمایی ویژگی مراجعه کنید.

اعمال کردن انتقال سفارشی

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