অ্যানিমেশন সহ একটি দৃশ্য সরান

কম্পোজ পদ্ধতিটি চেষ্টা করুন

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

অবস্থান পরিবর্তন করুন →

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

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

ObjectAnimator ব্যবহার করে ভিউয়ের অবস্থান পরিবর্তন করুন

ObjectAnimator API একটি নির্দিষ্ট সময়কালের জন্য কোনো ভিউ-এর প্রোপার্টি পরিবর্তন করার একটি উপায় প্রদান করে। আপনি কোন ধরনের অ্যাট্রিবিউট অ্যানিমেট করছেন তার উপর নির্ভর করে ObjectAnimator এর ইনস্ট্যান্স তৈরি করার জন্য এতে স্ট্যাটিক মেথড রয়েছে। স্ক্রিনে আপনার ভিউ-এর অবস্থান পরিবর্তন করার সময়, translationX এবং translationY অ্যাট্রিবিউটগুলো ব্যবহার করুন।

এখানে একটি ObjectAnimator এর উদাহরণ দেওয়া হলো, যা ২ সেকেন্ডে ভিউটিকে স্ক্রিনের বাম দিক থেকে ১০০ পিক্সেল দূরত্বের একটি অবস্থানে নিয়ে যায়:

কোটলিন

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

জাভা

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

এই উদাহরণে ObjectAnimator.ofFloat() মেথডটি ব্যবহার করা হয়েছে, কারণ ট্রান্সলেশন ভ্যালুগুলোকে ফ্লোট হতে হয়। প্রথম প্যারামিটারটি হলো সেই ভিউ যা আপনি অ্যানিমেট করতে চান। দ্বিতীয় প্যারামিটারটি হলো সেই প্রপার্টি যা আপনি অ্যানিমেট করছেন। যেহেতু ভিউটিকে আনুভূমিকভাবে সরাতে হবে, তাই translationX প্রপার্টিটি ব্যবহার করা হয়। শেষ প্যারামিটারটি হলো অ্যানিমেশনের শেষ মান। এই উদাহরণে, 100 মানটি স্ক্রিনের বাম দিক থেকে সেই পরিমাণ পিক্সেল দূরত্বের একটি অবস্থান নির্দেশ করে।

নেক্সট মেথডটি অ্যানিমেশনটি কতক্ষণ চলবে তা মিলিসেকেন্ডে নির্দিষ্ট করে। এই উদাহরণে, অ্যানিমেশনটি ২ সেকেন্ড (২০০০ মিলিসেকেন্ড) ধরে চলে।

শেষ পদ্ধতিটি অ্যানিমেশনটি চালায়, যা স্ক্রিনে ভিউটির অবস্থান আপডেট করে।

ObjectAnimator ব্যবহার সম্পর্কে আরও তথ্যের জন্য, “Animate using ObjectAnimator” দেখুন।

বক্র গতি যোগ করুন

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

নিজের পথ নিজেই নির্ধারণ করুন

ObjectAnimator ক্লাসের এমন কনস্ট্রাক্টর রয়েছে যা আপনাকে একটি পাথের সাথে একসাথে দুই বা ততোধিক প্রপার্টি ব্যবহার করে কোঅর্ডিনেট অ্যানিমেট করতে দেয়। উদাহরণস্বরূপ, নিম্নলিখিত অ্যানিমেটরটি একটি ভিউ-এর X এবং Y প্রপার্টি অ্যানিমেট করার জন্য একটি Path অবজেক্ট ব্যবহার করে:

কোটলিন

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

জাভা

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

আর্ক অ্যানিমেশনটি দেখতে এইরকম:

চিত্র ১. একটি বক্রপথের অ্যানিমেশন।

Interpolator হলো ইজিং কার্ভের একটি বাস্তবায়ন। ইজিং কার্ভের ধারণা সম্পর্কে আরও তথ্যের জন্য ম্যাটেরিয়াল ডিজাইন ডকুমেন্টেশন দেখুন। একটি Interpolator নির্ধারণ করে যে, একটি অ্যানিমেশনের নির্দিষ্ট মানগুলো সময়ের ফাংশন হিসেবে কীভাবে গণনা করা হবে। সিস্টেমটি ম্যাটেরিয়াল ডিজাইন স্পেসিফিকেশনের তিনটি মৌলিক কার্ভের জন্য XML রিসোর্স সরবরাহ করে:

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

পাথইন্টারপোলেটর ব্যবহার করুন

PathInterpolator ক্লাসটি হলো একটি ইন্টারপোলেটর যা অ্যান্ড্রয়েড ৫.০ (এপিআই ২১)-এ প্রবর্তিত হয়েছে। এটি একটি বেজিয়ার কার্ভ বা একটি Path অবজেক্টের উপর ভিত্তি করে তৈরি। ম্যাটেরিয়াল ডিজাইন ডকুমেন্টেশনে সহজ ব্যবহারের জন্য অ্যান্ড্রয়েডের উদাহরণগুলোতে PathInterpolator ব্যবহৃত হয়।

PathInterpolator বিভিন্ন ধরণের বেজিয়ার কার্ভের উপর ভিত্তি করে কনস্ট্রাক্টর রয়েছে। সমস্ত বেজিয়ার কার্ভের শুরু এবং শেষ বিন্দু যথাক্রমে (0,0) এবং (1,1) -এ স্থির থাকে। অন্যান্য কনস্ট্রাক্টর আর্গুমেন্টগুলো তৈরি করা বেজিয়ার কার্ভের ধরণের উপর নির্ভর করে।

উদাহরণস্বরূপ, একটি কোয়াড্রাটিক বেজিয়ার কার্ভের জন্য শুধুমাত্র একটি কন্ট্রোল পয়েন্টের X এবং Y স্থানাঙ্ক প্রয়োজন হয়:

কোটলিন

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

জাভা

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

এর ফলে এমন একটি শিথিলকরণ বক্ররেখা তৈরি হয় যা দ্রুত শুরু হয়ে শেষের দিকে এসে গতি কমিয়ে দেয়।

কিউবিক বেজিয়ার কনস্ট্রাক্টরেরও একইভাবে নির্দিষ্ট শুরু এবং শেষ বিন্দু রয়েছে, কিন্তু এর জন্য দুটি কন্ট্রোল পয়েন্ট প্রয়োজন:

কোটলিন

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

জাভা

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

এটি ম্যাটেরিয়াল ডিজাইনে জোর দেওয়া গতিহ্রাসকারী ইজিং কার্ভের একটি বাস্তবায়ন।

আরও ভালো নিয়ন্ত্রণের জন্য, বক্ররেখাটি নির্ধারণ করতে একটি যথেচ্ছ Path ব্যবহার করা যেতে পারে:

কোটলিন

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

জাভা

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

এটি কিউবিক বেজিয়ার উদাহরণের মতোই একই ইজিং কার্ভ তৈরি করে, কিন্তু এক্ষেত্রে একটি Path ব্যবহার করা হয়।

আপনি একটি পাথ ইন্টারপোলেটরকে XML রিসোর্স হিসেবেও সংজ্ঞায়িত করতে পারেন:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

একবার একটি PathInterpolator অবজেক্ট তৈরি করার পর, আপনি সেটিকে Animator.setInterpolator() মেথডে পাস করতে পারেন। Animator চালু হওয়ার সময় টাইমিং বা পাথ কার্ভ নির্ধারণ করতে এই ইন্টারপোলেটরটি ব্যবহার করে।

কোটলিন

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

জাভা

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();