অ্যানিমেশনের মাধ্যমে ভিউ সরান

Compose-এর মাধ্যমে চেষ্টা করুন

Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ কীভাবে অ্যানিমেশন ব্যবহার করতে হয় তা জানুন।

পজিশন অ্যানিমেট করুন →

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

Android-এ স্ক্রিনে ভিউ অবজেক্টের পজিশন পরিবর্তন করার একটি উপায় হল 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 প্রপার্টি ব্যবহার করা হয়। শেষ প্যারামিটারটি হল অ্যানিমেশনের শেষ ভ্যালু। এই উদাহরণে, ১০০ ভ্যালু স্ক্রিনের বাঁদিক থেকে তত পিক্সেল দূরে একটি অবস্থানকে নির্দেশ করে।

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

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

ObjectAnimator ব্যবহার করার ব্যাপারে আরও তথ্যের জন্য, 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 ব্যবহার করুন

PathInterpolator ক্লাস হল Android 5.0 (API 21)-এ চালু করা একটি ইন্টারপোলেটর। এটি বেজিয়ার কার্ভ বা Path অবজেক্টের উপর ভিত্তি করে তৈরি। ইজিংয়ের জন্য মেটেরিয়াল ডিজাইন ডকুমেন্টেশনে Android-এর উদাহরণে PathInterpolator ব্যবহার করা হয়।

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

যেমন, একটি কোয়াড্রেটিক বেজিয়ার কার্ভের জন্য শুধুমাত্র একটি কন্ট্রোল পয়েন্টের 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();