অঙ্কনযোগ্য গ্রাফিক্স অ্যানিমেট করুন

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

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

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

অ্যানিমেশনড্রয়েবল ব্যবহার করুন

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

আপনি আপনার কোডে AnimationDrawable ক্লাস API ব্যবহার করে একটি অ্যানিমেশনের ফ্রেমগুলো নির্ধারণ করতে পারেন, কিন্তু একটিমাত্র XML ফাইলের মাধ্যমে সেগুলো নির্ধারণ করা আরও সহজ, যেখানে অ্যানিমেশনটি তৈরি করা ফ্রেমগুলোর তালিকা থাকে। এই ধরনের অ্যানিমেশনের জন্য XML ফাইলটি আপনার অ্যান্ড্রয়েড প্রজেক্টের 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 তে যোগ করা হয়েছে এবং স্ক্রিনে টাচ করা হলে এটি অ্যানিমেট হয়:

কোটলিন

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

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

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) প্রিভিউ

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

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

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