ড্রয়েবেল গ্রাফিক্স অ্যানিমেট করুন

Compose-এর মাধ্যমে চেষ্টা করুন
Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ কীভাবে অ্যানিমেশন ব্যবহার করতে হয় তা জানুন।
ভেক্টর ড্রয়েবেল অ্যানিমেট করা →
ছবি ১. একটি অ্যানিমেটেড ড্রয়েবল।

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

প্রথম বিকল্প হল AnimationDrawable ব্যবহার করা। এটি আপনাকে একাধিক স্ট্যাটিক ড্রয়েবল ফাইল নির্দিষ্ট করতে দেয় যা অ্যানিমেশন তৈরি করতে একবারে একটি করে দেখায়। দ্বিতীয় বিকল্প হল AnimatedVectorDrawable ব্যবহার করা, যা আপনাকে ভেক্টর ড্রয়েবেল-এর প্রপার্টি অ্যানিমেট করতে দেয়।

AnimationDrawable ব্যবহার করুন

অ্যানিমেশন তৈরি করার একটি উপায় হল, ফিল্মের রোলের মতো ড্রয়েবল রিসোর্সের সিকোয়েন্স লোড করা। এই ধরনের আঁকা যায় এমন অ্যানিমেশনের ভিত্তি হল AnimationDrawable ক্লাস।

আপনি AnimationDrawable ক্লাস API ব্যবহার করে আপনার কোডে অ্যানিমেশনের ফ্রেমগুলি সংজ্ঞায়িত করতে পারেন, তবে একটি একক XML ফাইলের মাধ্যমে সেগুলি সংজ্ঞায়িত করা সহজ যা অ্যানিমেশন তৈরি করে এমন ফ্রেমগুলি তালিকাভুক্ত করে। এই ধরনের অ্যানিমেশনের জন্য XML ফাইল আপনার Android প্রোজেক্টের res/drawable/ ডিরেক্টরিতে থাকে। এই ক্ষেত্রে, নির্দেশাবলী অ্যানিমেশনের প্রতিটি ফ্রেমের জন্য ক্রম এবং সময়কাল প্রদান করে।

XML ফাইলে রুট নোড হিসেবে একটি <animation-list> এলিমেন্ট এবং চাইল্ড <item> নোডের একটি সিরিজ থাকে যার প্রতিটি একটি ফ্রেমকে সংজ্ঞায়িত করে—একটি ড্রয়েবল রিসোর্স এবং এর সময়কাল। Drawable অ্যানিমেশনের জন্য XML ফাইলের একটি উদাহরণ এখানে দেওয়া হল:

<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 প্রোজেক্টের res/drawable/ ডিরেক্টরিতে rocket_thrust.xml হিসেবে সেভ করেন, তাহলে আপনি এটিকে View-এ ব্যাকগ্রাউন্ড ইমেজ হিসেবে যোগ করতে পারবেন এবং তারপর এটি চালানোর জন্য start() কল করতে পারবেন। এখানে এমন একটি অ্যাক্টিভিটির উদাহরণ দেওয়া হল যেখানে অ্যানিমেশনটি একটি ImageView-এ যোগ করা হয়েছে এবং তারপরে স্ক্রিন স্পর্শ করা হলে অ্যানিমেট করা হয়েছে:

Kotlin

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();
      }
  });
}

মনে রাখবেন যে AnimationDrawable-এ কল করা start() মেথডটি আপনার Activity-এর onCreate() মেথড চলাকালীন কল করা যাবে না, কারণ AnimationDrawable এখনও উইন্ডোর সাথে সম্পূর্ণভাবে অ্যাটাচ করা হয়নি। ইন্টার‌্যাকশন ছাড়াই অবিলম্বে অ্যানিমেশন চালাতে, আপনি আপনার Activity-এর onStart() পদ্ধতি থেকে এটি কল করতে পারেন, যা Android স্ক্রিনে ভিউটি দৃশ্যমান করার সময় কল করা হয়।

XML সিনট্যাক্স এবং উপলভ্য ট্যাগ ও অ্যাট্রিবিউট সম্পর্কে আরও তথ্যের জন্য, অ্যানিমেশন রিসোর্স দেখুন।

AnimatedVectorDrawable ব্যবহার করুন

ভেক্টর ড্রয়েবেল হল এমন এক ধরনের ড্রয়েবেল যা পিক্সেল বা ঝাপসা না হয়েই স্কেল করা যায়। AnimatedVectorDrawable ক্লাস—এবং ব্যাকওয়ার্ড কম্প্যাটিবিলিটির জন্য AnimatedVectorDrawableCompat—আপনাকে ভেক্টর ড্রয়েবেলের প্রপার্টি অ্যানিমেট করতে দেয়, যেমন এটিকে ঘোরানো বা অন্য ছবিতে রূপান্তর করার জন্য পাথ ডেটা পরিবর্তন করা।

আপনি সাধারণত তিনটি XML ফাইলে অ্যানিমেটেড ভেক্টর ড্রয়েবেল সংজ্ঞায়িত করেন:

  • res/drawable/-এ <vector> এলিমেন্ট সহ আঁকা যায় এমন ভেক্টর।
  • res/drawable/-এ <animated-vector> এলিমেন্ট সহ অ্যানিমেটেড ভেক্টর ড্রয়েবেল।
  • res/animator/-এ <objectAnimator> এলিমেন্ট সহ এক বা একাধিক অবজেক্ট অ্যানিমেটর।

অ্যানিমেটেড ভেক্টর ড্রয়েবেল <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) প্রিভিউ

Android Studio-তে অ্যানিমেটেড ভেক্টর ড্রয়েবেল টুল আপনাকে অ্যানিমেটেড ড্রয়েবেল রিসোর্স প্রিভিউ করতে দেয়। এই টুল আপনাকে Android Studio-তে <animation-list>, <animated-vector> এবং <animated-selector> রিসোর্স প্রিভিউ করতে সাহায্য করে এবং আপনার কাস্টম অ্যানিমেশন রিফাইন করা আরও সহজ করে তোলে।

Android Studio-তে ব্যবহারকারী অ্যানিমেশন প্রিভিউ করছেন ও চালাচ্ছেন
ছবি ৩. Android Studio-তে অ্যানিমেটেড ভেক্টর ড্রয়েবেল টুল।

আরও তথ্যের জন্য, AnimatedVectorDrawable-এর API রেফারেন্স দেখুন।