অ্যানিমেশন ব্যবহার করে একটি দৃশ্য প্রকাশ বা লুকান

কম্পোজ পদ্ধতিটি চেষ্টা করুন
জেটপ্যাক কম্পোজ অ্যান্ড্রয়েডের জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে কীভাবে অ্যানিমেশন ব্যবহার করতে হয় তা জানুন।

আপনার অ্যাপ ব্যবহার করার সময় স্ক্রিনে নতুন তথ্য প্রদর্শিত হয় এবং পুরোনো তথ্য মুছে যায়। স্ক্রিনে প্রদর্শিত বিষয়বস্তু হঠাৎ করে পরিবর্তন করা হলে তা অস্বস্তিকর হতে পারে এবং ব্যবহারকারীরা হঠাৎ করে প্রদর্শিত নতুন বিষয়বস্তু খেয়াল নাও করতে পারেন। অ্যানিমেশন এই পরিবর্তনগুলোকে ধীর করে দেয় এবং গতির মাধ্যমে ব্যবহারকারীর দৃষ্টি আকর্ষণ করে, ফলে আপডেটগুলো আরও সুস্পষ্ট হয়।

কোনো ভিউ দেখানো বা লুকানোর জন্য তিনটি সাধারণ অ্যানিমেশন ব্যবহার করা যায়: রিভিল অ্যানিমেশন, ক্রসফেড অ্যানিমেশন এবং কার্ডফ্লিপ অ্যানিমেশন।

একটি ক্রসফেড অ্যানিমেশন তৈরি করুন

একটি ক্রসফেড অ্যানিমেশন—যা ডিজলভ নামেও পরিচিত—একই সাথে একটি View বা ViewGroup ধীরে ধীরে অদৃশ্য করে দেয় এবং অন্যটিকে দৃশ্যমান করে তোলে। আপনার অ্যাপে কন্টেন্ট বা ভিউ পরিবর্তন করার ক্ষেত্রে এই অ্যানিমেশনটি উপযোগী। এখানে দেখানো ক্রসফেড অ্যানিমেশনটি ViewPropertyAnimator ব্যবহার করে, যা অ্যান্ড্রয়েড ৩.১ (এপিআই লেভেল ১২) এবং তার পরবর্তী সংস্করণগুলোর জন্য উপলব্ধ।

এখানে একটি প্রোগ্রেস ইন্ডিকেটর থেকে টেক্সট কন্টেন্টে ক্রসফেডের উদাহরণ দেওয়া হলো:

চিত্র ১. ক্রসফেড অ্যানিমেশন।

ভিউ তৈরি করুন

যে দুটি ভিউ আপনি ক্রসফেড করতে চান, সেগুলো তৈরি করুন। নিচের উদাহরণটিতে একটি প্রোগ্রেস ইন্ডিকেটর এবং একটি স্ক্রোলযোগ্য টেক্সট ভিউ তৈরি করা হয়েছে:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView style="?android:textAppearanceMedium"
            android:lineSpacingMultiplier="1.2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum"
            android:padding="16dp" />

    </ScrollView>

    <ProgressBar android:id="@+id/loading_spinner"
        style="?android:progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

ক্রসফেড অ্যানিমেশন সেট আপ করুন

ক্রসফেড অ্যানিমেশন সেট আপ করতে, নিম্নলিখিতগুলি করুন:

  1. যে ভিউগুলো আপনি ক্রসফেড করতে চান, সেগুলোর জন্য মেম্বার ভেরিয়েবল তৈরি করুন। অ্যানিমেশন চলাকালীন ভিউগুলো পরিবর্তন করার জন্য পরবর্তীতে আপনার এই রেফারেন্সগুলোর প্রয়োজন হবে।
  2. যে ভিউটি ফেড-ইন করা হচ্ছে তার ভিজিবিলিটি GONE এ সেট করুন। এটি ভিউটিকে লেআউট স্পেস ব্যবহার করা থেকে বিরত রাখে এবং লেআউট গণনা থেকে বাদ দেয়, যা প্রসেসিংয়ের গতি বাড়ায়।
  3. config_shortAnimTime সিস্টেম প্রপার্টিটি একটি মেম্বার ভেরিয়েবলে ক্যাশ করুন। এই প্রপার্টিটি অ্যানিমেশনের জন্য একটি আদর্শ "সংক্ষিপ্ত" সময়কাল নির্ধারণ করে। এই সময়কালটি সূক্ষ্ম অ্যানিমেশন বা ঘন ঘন ঘটে এমন অ্যানিমেশনের জন্য উপযুক্ত। config_longAnimTime এবং config_mediumAnimTime ও উপলব্ধ আছে।

পূর্ববর্তী কোড স্নিপেটের লেআউটটিকে অ্যাক্টিভিটি কন্টেন্ট ভিউ হিসেবে ব্যবহার করে এখানে একটি উদাহরণ দেওয়া হলো:

কোটলিন

class CrossfadeActivity : Activity() {

    private lateinit var contentView: View
    private lateinit var loadingView: View
    private var shortAnimationDuration: Int = 0
    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_crossfade)

        contentView = findViewById(R.id.content)
        loadingView = findViewById(R.id.loading_spinner)

        // Initially hide the content view.
        contentView.visibility = View.GONE

        // Retrieve and cache the system's default "short" animation time.
        shortAnimationDuration = resources.getInteger(android.R.integer.config_shortAnimTime)
    }
    ...
}

জাভা

public class CrossfadeActivity extends Activity {

    private View contentView;
    private View loadingView;
    private int shortAnimationDuration;
    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_crossfade);

        contentView = findViewById(R.id.content);
        loadingView = findViewById(R.id.loading_spinner);

        // Initially hide the content view.
        contentView.setVisibility(View.GONE);

        // Retrieve and cache the system's default "short" animation time.
        shortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);
    }
    ...
}

দৃশ্যগুলো ক্রসফেড করুন

যখন ভিউগুলো সঠিকভাবে সেট আপ করা হয়ে যাবে, তখন নিম্নলিখিত কাজগুলো করে সেগুলোকে ক্রসফেড করুন:

  1. যে ভিউটি ধীরে ধীরে ভেসে উঠছে, সেটির আলফা ভ্যালু 0-তে সেট করুন এবং ভিজিবিলিটি তার প্রাথমিক সেটিং GONE থেকে VISIBLE এ সেট করুন। এতে ভিউটি দৃশ্যমান কিন্তু স্বচ্ছ হয়ে উঠবে।
  2. যে ভিউটি ধীরে ধীরে দৃশ্যমান হচ্ছে, তার আলফা ভ্যালু ০ থেকে ১ পর্যন্ত অ্যানিমেট করুন। যে ভিউটি ধীরে ধীরে অদৃশ্য হচ্ছে, তার আলফা ভ্যালু ১ থেকে ০ পর্যন্ত অ্যানিমেট করুন।
  3. Animator.AnimatorListener এর মধ্যে onAnimationEnd() ব্যবহার করে, যে ভিউটি ফেড আউট হচ্ছে তার ভিজিবিলিটি GONE এ সেট করুন। যদিও আলফা ভ্যালু ০, ভিউটির ভিজিবিলিটি GONE এ সেট করলে ভিউটি লেআউট স্পেস ব্যবহার করা থেকে বিরত থাকে এবং লেআউট ক্যালকুলেশন থেকে বাদ পড়ে, যা প্রসেসিং-এর গতি বাড়ায়।

নিম্নলিখিত পদ্ধতিতে এটি করার একটি উদাহরণ দেখানো হয়েছে:

কোটলিন

class CrossfadeActivity : Activity() {

    private lateinit var contentView: View
    private lateinit var loadingView: View
    private var shortAnimationDuration: Int = 0
    ...
    private fun crossfade() {
        contentView.apply {
            // Set the content view to 0% opacity but visible, so that it is
            // visible but fully transparent during the animation.
            alpha = 0f
            visibility = View.VISIBLE

            // Animate the content view to 100% opacity and clear any animation
            // listener set on the view.
            animate()
                    .alpha(1f)
                    .setDuration(shortAnimationDuration.toLong())
                    .setListener(null)
        }
        // Animate the loading view to 0% opacity. After the animation ends,
        // set its visibility to GONE as an optimization step so it doesn't
        // participate in layout passes.
        loadingView.animate()
                .alpha(0f)
                .setDuration(shortAnimationDuration.toLong())
                .setListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationEnd(animation: Animator) {
                        loadingView.visibility = View.GONE
                    }
                })
    }
}

জাভা

public class CrossfadeActivity extends Activity {

    private View contentView;
    private View loadingView;
    private int shortAnimationDuration;
    ...
    private void crossfade() {

        // Set the content view to 0% opacity but visible, so that it is
        // visible but fully transparent during the animation.
        contentView.setAlpha(0f);
        contentView.setVisibility(View.VISIBLE);

        // Animate the content view to 100% opacity and clear any animation
        // listener set on the view.
        contentView.animate()
                .alpha(1f)
                .setDuration(shortAnimationDuration)
                .setListener(null);

        // Animate the loading view to 0% opacity. After the animation ends,
        // set its visibility to GONE as an optimization step so it doesn't
        // participate in layout passes.
        loadingView.animate()
                .alpha(0f)
                .setDuration(shortAnimationDuration)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        loadingView.setVisibility(View.GONE);
                    }
                });
    }
}

একটি কার্ড ফ্লিপ অ্যানিমেশন তৈরি করুন

কার্ড ফ্লিপ একটি অ্যানিমেশন দেখানোর মাধ্যমে কন্টেন্টের ভিউ পরিবর্তন করে, যা একটি কার্ড উল্টে যাওয়ার অনুকরণ করে। এখানে দেখানো কার্ড ফ্লিপ অ্যানিমেশনটি FragmentTransaction ব্যবহার করে।

তাস উল্টানো দেখতে এইরকম:

চিত্র ২. কার্ড উল্টানোর অ্যানিমেশন।

অ্যানিমেটর অবজেক্টগুলো তৈরি করুন

কার্ড উল্টানোর অ্যানিমেশন তৈরি করতে আপনার চারটি অ্যানিমেটর প্রয়োজন। দুটি অ্যানিমেটর ব্যবহার করা হয় যখন কার্ডের সামনের অংশটি বাইরে ও বাম দিকে যায় এবং যখন এটি বাম দিক থেকে ভেতরে আসে। অন্য দুটি অ্যানিমেটর ব্যবহার করা হয় যখন কার্ডের পিছনের অংশটি ডান দিক থেকে ভেতরে আসে এবং যখন এটি বাইরে ও ডান দিকে যায়।

card_flip_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_left_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_right_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="-180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

ভিউ তৈরি করুন

কার্ডের প্রতিটি পাশ একটি আলাদা লেআউট, যাতে আপনার ইচ্ছামতো যেকোনো কন্টেন্ট থাকতে পারে, যেমন দুটি টেক্সট ভিউ, দুটি ছবি, অথবা ফ্লিপ করার জন্য ভিউগুলোর যেকোনো সংমিশ্রণ। পরবর্তীতে যে ফ্র্যাগমেন্টগুলো আপনি অ্যানিমেট করবেন, সেগুলোতে এই দুটি লেআউট ব্যবহার করুন। নিচের লেআউটটি একটি কার্ডের এক পাশ তৈরি করে, যেখানে টেক্সট দেখানো হয়:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#a6c"
    android:padding="16dp"
    android:gravity="bottom">

    <TextView android:id="@android:id/text1"
        style="?android:textAppearanceLarge"
        android:textStyle="bold"
        android:textColor="#fff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/card_back_title" />

    <TextView style="?android:textAppearanceSmall"
        android:textAllCaps="true"
        android:textColor="#80ffffff"
        android:textStyle="bold"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/card_back_description" />

</LinearLayout>

এবং পরবর্তী লেআউটটি কার্ডের অপর পাশ তৈরি করে, যেখানে একটি ImageView প্রদর্শিত হয়:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/image1"
    android:scaleType="centerCrop"
    android:contentDescription="@string/description_image_1" />

খণ্ডগুলি তৈরি করুন

কার্ডের সামনের এবং পিছনের অংশের জন্য ফ্র্যাগমেন্ট ক্লাস তৈরি করুন। আপনার ফ্র্যাগমেন্ট ক্লাসগুলিতে, onCreateView() মেথড থেকে তৈরি করা লেআউটগুলি রিটার্ন করুন। এরপর, আপনি যে প্যারেন্ট অ্যাক্টিভিটিতে কার্ডটি দেখাতে চান, সেখানে এই ফ্র্যাগমেন্টের ইনস্ট্যান্স তৈরি করতে পারেন।

নিম্নলিখিত উদাহরণটি প্যারেন্ট অ্যাক্টিভিটির ভিতরে নেস্টেড ফ্র্যাগমেন্ট ক্লাসগুলি দেখায় যা সেগুলি ব্যবহার করে:

কোটলিন

class CardFlipActivity : FragmentActivity() {
    ...
    /**

                    *   A fragment representing the front of the card.
     */
    class CardFrontFragment : Fragment() {

    override fun onCreateView(
                inflater: LayoutInflater,
                container: ViewGroup?,
                savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_card_front, container, false)
    }

    /**
    *   A fragment representing the back of the card.
    */
    class CardBackFragment : Fragment() {

    override fun onCreateView(
                inflater: LayoutInflater,
                container: ViewGroup?,
                savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_card_back, container, false)
    }
}

জাভা

public class CardFlipActivity extends FragmentActivity {
    ...
    /**
    *   A fragment representing the front of the card.
    */
    public class CardFrontFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_front, container, false);
    }
    }

    /**
    *   A fragment representing the back of the card.
    */
    public class CardBackFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_back, container, false);
    }
    }
}

কার্ড উল্টানোর দৃশ্যটি অ্যানিমেট করুন

প্যারেন্ট অ্যাক্টিভিটির ভিতরে ফ্র্যাগমেন্টগুলো প্রদর্শন করুন। এটি করার জন্য, আপনার অ্যাক্টিভিটির জন্য লেআউট তৈরি করুন। নিম্নলিখিত উদাহরণটি একটি FrameLayout তৈরি করে, যেখানে আপনি রানটাইমে ফ্র্যাগমেন্ট যোগ করতে পারেন:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

অ্যাক্টিভিটি কোডে, আপনার তৈরি করা লেআউটটিকে কন্টেন্ট ভিউ হিসেবে সেট করুন। অ্যাক্টিভিটি তৈরি হওয়ার সময় একটি ডিফল্ট ফ্র্যাগমেন্ট দেখানো একটি ভালো অভ্যাস। নিচের উদাহরণ অ্যাক্টিভিটিটি দেখাচ্ছে কিভাবে ডিফল্টরূপে কার্ডের সামনের অংশটি প্রদর্শন করতে হয়:

কোটলিন

class CardFlipActivity : FragmentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_activity_card_flip)
        if (savedInstanceState == null) {
            supportFragmentManager.beginTransaction()
                    .add(R.id.container, CardFrontFragment())
                    .commit()
        }
    }
    ...
}

জাভা

public class CardFlipActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_activity_card_flip);

        if (savedInstanceState == null) {
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.container, new CardFrontFragment())
                    .commit();
        }
    }
    ...
}

কার্ডের সামনের দিকটি দেখানো অবস্থায়, আপনি উপযুক্ত সময়ে ফ্লিপ অ্যানিমেশনের মাধ্যমে কার্ডের পিছনের দিকটি দেখাতে পারেন। কার্ডের অপর দিকটি দেখানোর জন্য এমন একটি মেথড তৈরি করুন যা নিম্নলিখিত কাজগুলো করে:

  • ফ্র্যাগমেন্ট ট্রানজিশনের জন্য আপনার তৈরি করা কাস্টম অ্যানিমেশনগুলো সেট করে।
  • প্রদর্শিত ফ্র্যাগমেন্টটিকে একটি নতুন ফ্র্যাগমেন্ট দিয়ে প্রতিস্থাপন করে এবং আপনার তৈরি করা কাস্টম অ্যানিমেশনগুলো দিয়ে এই ইভেন্টটিকে অ্যানিমেট করে।
  • পূর্বে প্রদর্শিত ফ্র্যাগমেন্টটিকে ফ্র্যাগমেন্ট ব্যাক স্ট্যাকে যুক্ত করে, ফলে ব্যবহারকারী যখন ব্যাক বোতামে ট্যাপ করেন, তখন কার্ডটি আবার উল্টে যায়।

কোটলিন

class CardFlipActivity : FragmentActivity() {
    ...
    private fun flipCard() {
        if (showingBack) {
            supportFragmentManager.popBackStack()
            return
        }

        // Flip to the back.

        showingBack = true

        // Create and commit a new fragment transaction that adds the fragment
        // for the back of the card, uses custom animations, and is part of the
        // fragment manager's back stack.

        supportFragmentManager.beginTransaction()

                // Replace the default fragment animations with animator
                // resources representing rotations when switching to the back
                // of the card, as well as animator resources representing
                // rotations when flipping back to the front, such as when the
                // system Back button is tapped.
                .setCustomAnimations(
                        R.animator.card_flip_right_in,
                        R.animator.card_flip_right_out,
                        R.animator.card_flip_left_in,
                        R.animator.card_flip_left_out
                )

                // Replace any fragments in the container view with a fragment
                // representing the next page, indicated by the just-incremented
                // currentPage variable.
                .replace(R.id.container, CardBackFragment())

                // Add this transaction to the back stack, letting users press
                // the Back button to get to the front of the card.
                .addToBackStack(null)

                // Commit the transaction.
                .commit()
    }
}

জাভা

public class CardFlipActivity extends FragmentActivity {
    ...
    private void flipCard() {
        if (showingBack) {
            getSupportFragmentManager().popBackStack();
            return;
        }

        // Flip to the back.

        showingBack = true;

        // Create and commit a new fragment transaction that adds the fragment
        // for the back of the card, uses custom animations, and is part of the
        // fragment manager's back stack.

        getSupportFragmentManager()
                .beginTransaction()

                // Replace the default fragment animations with animator
                // resources representing rotations when switching to the back
                // of the card, as well as animator resources representing
                // rotations when flipping back to the front, such as when the
                // system Back button is pressed.
                .setCustomAnimations(
                        R.animator.card_flip_right_in,
                        R.animator.card_flip_right_out,
                        R.animator.card_flip_left_in,
                        R.animator.card_flip_left_out)

                // Replace any fragments in the container view with a fragment
                // representing the next page, indicated by the just-incremented
                // currentPage variable.
                .replace(R.id.container, new CardBackFragment())

                // Add this transaction to the back stack, letting users press
                // Back to get to the front of the card.
                .addToBackStack(null)

                // Commit the transaction.
                .commit();
    }
}

একটি বৃত্তাকার প্রকাশ অ্যানিমেশন তৈরি করুন

যখন আপনি একগুচ্ছ UI এলিমেন্ট দেখান বা লুকান, তখন রিভিল অ্যানিমেশন ব্যবহারকারীদের একটি ভিজ্যুয়াল ধারাবাহিকতা প্রদান করে। ViewAnimationUtils.createCircularReveal() মেথডটি আপনাকে একটি ভিউ রিভিল বা হাইড করার জন্য একটি ক্লিপিং সার্কেল অ্যানিমেট করতে দেয়। এই অ্যানিমেশনটি ViewAnimationUtils ক্লাসে দেওয়া আছে, যা Android 5.0 (API লেভেল 21) এবং তার পরবর্তী সংস্করণগুলোর জন্য উপলব্ধ।

পূর্বে অদৃশ্য থাকা কোনো দৃশ্যকে কীভাবে প্রকাশ করতে হয়, তার একটি উদাহরণ এখানে দেওয়া হলো:

কোটলিন

// A previously invisible view.
val myView: View = findViewById(R.id.my_view)

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    val cx = myView.width / 2
    val cy = myView.height / 2

    // Get the final radius for the clipping circle.
    val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    // Create the animator for this view. The start radius is 0.
    val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius)
    // Make the view visible and start the animation.
    myView.visibility = View.VISIBLE
    anim.start()
} else {
    // Set the view to invisible without a circular reveal animation below
    // Android 5.0.
    myView.visibility = View.INVISIBLE
}

জাভা

// A previously invisible view.
View myView = findViewById(R.id.my_view);

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    int cx = myView.getWidth() / 2;
    int cy = myView.getHeight() / 2;

    // Get the final radius for the clipping circle.
    float finalRadius = (float) Math.hypot(cx, cy);

    // Create the animator for this view. The start radius is 0.
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius);

    // Make the view visible and start the animation.
    myView.setVisibility(View.VISIBLE);
    anim.start();
} else {
    // Set the view to invisible without a circular reveal animation below
    // Android 5.0.
    myView.setVisibility(View.INVISIBLE);
}

ViewAnimationUtils.createCircularReveal() অ্যানিমেশনটি পাঁচটি প্যারামিটার গ্রহণ করে। প্রথম প্যারামিটারটি হলো সেই ভিউ, যা আপনি স্ক্রিনে লুকাতে বা দেখাতে চান। পরবর্তী দুটি প্যারামিটার হলো ক্লিপিং সার্কেলের কেন্দ্রের জন্য X এবং Y স্থানাঙ্ক। সাধারণত, এটি ভিউটির কেন্দ্র হয়ে থাকে, কিন্তু আপনি ব্যবহারকারীর ট্যাপ করা বিন্দুটিও ব্যবহার করতে পারেন, যাতে অ্যানিমেশনটি তাদের নির্বাচিত স্থান থেকে শুরু হয়। চতুর্থ প্যারামিটারটি হলো ক্লিপিং সার্কেলের প্রারম্ভিক ব্যাসার্ধ।

পূর্ববর্তী উদাহরণে, প্রাথমিক ব্যাসার্ধ শূন্য সেট করা হয়েছে, যাতে প্রদর্শিত ভিউটি বৃত্ত দ্বারা আড়াল হয়ে যায়। শেষ প্যারামিটারটি হলো বৃত্তটির চূড়ান্ত ব্যাসার্ধ। কোনো ভিউ প্রদর্শন করার সময়, চূড়ান্ত ব্যাসার্ধটি ভিউটির চেয়ে বড় করুন, যাতে অ্যানিমেশন শেষ হওয়ার আগেই ভিউটি সম্পূর্ণরূপে উন্মোচিত হতে পারে।

পূর্বে দৃশ্যমান কোনো দৃশ্য লুকাতে, নিম্নলিখিতগুলি করুন:

কোটলিন

// A previously visible view.
val myView: View = findViewById(R.id.my_view)

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    val cx = myView.width / 2
    val cy = myView.height / 2

    // Get the initial radius for the clipping circle.
    val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    // Create the animation. The final radius is 0.
    val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f)

    // Make the view invisible when the animation is done.
    anim.addListener(object : AnimatorListenerAdapter() {

        override fun onAnimationEnd(animation: Animator) {
            super.onAnimationEnd(animation)
            myView.visibility = View.INVISIBLE
        }
    })

    // Start the animation.
    anim.start()
} else {
    // Set the view to visible without a circular reveal animation below
    // Android 5.0.
    myView.visibility = View.VISIBLE
}

জাভা

// A previously visible view.
final View myView = findViewById(R.id.my_view);

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    int cx = myView.getWidth() / 2;
    int cy = myView.getHeight() / 2;

    // Get the initial radius for the clipping circle.
    float initialRadius = (float) Math.hypot(cx, cy);

    // Create the animation. The final radius is 0.
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f);

    // Make the view invisible when the animation is done.
    anim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            myView.setVisibility(View.INVISIBLE);
        }
    });

    // Start the animation.
    anim.start();
} else {
    // Set the view to visible without a circular reveal animation below Android
    // 5.0.
    myView.setVisibility(View.VISIBLE);
}

এক্ষেত্রে, ক্লিপিং সার্কেলের প্রাথমিক ব্যাসার্ধ ভিউটির সমান বড় করে সেট করা হয়, যাতে অ্যানিমেশন শুরু হওয়ার আগেই ভিউটি দৃশ্যমান থাকে। চূড়ান্ত ব্যাসার্ধ শূন্যে সেট করা হয়, যাতে অ্যানিমেশন শেষ হলে ভিউটি অদৃশ্য হয়ে যায়। অ্যানিমেশনে একটি লিসেনার যোগ করুন, যাতে অ্যানিমেশনটি সম্পূর্ণ হলে ভিউটির দৃশ্যমানতা INVISIBLE করে দেওয়া যায়।

অতিরিক্ত সম্পদ