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

روش نوشتن را امتحان کنید
Jetpack 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() را برای بازیابی و ذخیره مقادیر فراخوانی می‌کنند. ویژگی view که captureValues() بازیابی می‌کند یکسان است، اما در صحنه‌های شروع و پایان مقادیر متفاوتی دارد. این چارچوب، نقشه‌های جداگانه‌ای را برای حالت‌های شروع و پایان یک view نگهداری می‌کند.

یک انیماتور سفارشی ایجاد کنید

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

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

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

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

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

اعمال یک گذار سفارشی

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