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

ব্যবহারকারীর মিথস্ক্রিয়া বা পর্দার আড়ালে প্রক্রিয়াকরণের কারণে স্ক্রিনে থাকা বস্তুগুলিকে প্রায়শই পুনঃস্থাপন করতে হয়। বস্তুর অবস্থান অবিলম্বে আপডেট করার পরিবর্তে, যার ফলে এটি এক এলাকা থেকে অন্য অঞ্চলে মিটমিট করে, এটিকে শুরুর অবস্থান থেকে শেষ অবস্থানে নিয়ে যেতে একটি অ্যানিমেশন ব্যবহার করুন।

একটি উপায় যেটি অ্যান্ড্রয়েড আপনাকে আপনার ভিউ অবজেক্টগুলিকে স্ক্রিনে পুনঃস্থাপন করতে দেয় তা হল ObjectAnimator ব্যবহার করে৷ আপনি অবজেক্টটিকে স্থির করতে চান এমন শেষ অবস্থানের পাশাপাশি অ্যানিমেশনের সময়কাল প্রদান করুন। আপনি অ্যানিমেশনের ত্বরণ বা হ্রাস নিয়ন্ত্রণ করতে সময় ইন্টারপোলেটর ব্যবহার করতে পারেন।

অবজেক্ট অ্যানিমেটর দিয়ে ভিউ পজিশন পরিবর্তন করুন

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

এখানে একটি ObjectAnimator একটি উদাহরণ যা 2 সেকেন্ডের মধ্যে স্ক্রীনের বাম থেকে 100 পিক্সেলের অবস্থানে ভিউ নিয়ে যায়:

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 এর মান একটি অবস্থান নির্দেশ করে যেটি স্ক্রিনের বাম থেকে অনেক পিক্সেল।

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

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

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
}

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

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

একটি 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) এ প্রবর্তিত একটি ইন্টারপোলেটর। এটি একটি Bézier বক্ররেখা বা একটি Path বস্তুর উপর ভিত্তি করে। PathInterpolator ব্যবহার সহজ করার জন্য উপাদান ডিজাইন ডকুমেন্টেশনে Android উদাহরণ।

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