ফ্লটারের জন্য রিভ অ্যানিমেশন: সহজে অত্যাশ্চর্য অ্যানিমেশন তৈরি করার জন্য একটি শিক্ষানবিস গাইড!

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

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

সুচিপত্র

• রিভের ভূমিকা🧙‍♂️

  • Rive🧗 এর মৌলিক ধারণা

• একটি সাধারণ ইন্টারেক্টিভ লগইন অ্যানিমেশন🚀

  • আপনার আর্টবোর্ডে উপাদানটি সেট আপ করুন📃
  • অ্যানিমেশন সময়!🕶️
  • আপনার স্টেট মেশিন সেট আপ করুন🏍️
  • আপনার ফ্লটার অ্যাপ👨‍🚒-এ অ্যানিমেশন প্রয়োগ করুন

• উপসংহার🏋️‍♀️

• তথ্যসূত্র🧶

  
  

রিভের ভূমিকা🧙‍♂️

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

Rive🧗 এর মৌলিক ধারণা

এখানে মূল ধারণা আছে:

1. আর্টবোর্ড: একটি আর্টবোর্ড হল একটি ক্যানভাস যেখানে আপনি আপনার অ্যানিমেশন তৈরি করেন। এটি অ্যানিমেশন উপাদান তৈরি এবং সংগঠিত করার প্রাথমিক স্থান, যেমন গ্রুপ, সীমাবদ্ধতা, হাড় ইত্যাদি।
2. টাইমলাইন: টাইমলাইন হল যেখানে অ্যানিমেশন সংজ্ঞায়িত করা হয়। এটি আপনাকে কীফ্রেম সেট করতে এবং সময়ের সাথে সাথে বস্তুগুলি কীভাবে পরিবর্তন করা উচিত তা নির্দিষ্ট করতে দেয়। কীফ্রেমগুলি নির্দিষ্ট সময়ে নির্দিষ্ট পয়েন্টগুলিকে উপস্থাপন করে যেখানে একটি বস্তুর বৈশিষ্ট্যগুলি স্পষ্টভাবে সংজ্ঞায়িত করা হয়। অ্যানিমেশন সিস্টেম মসৃণ রূপান্তর তৈরি করতে কীফ্রেমের মধ্যে ইন্টারপোলেট করে।
3. স্টেট মেশিন: রিভের একটি স্টেট মেশিন বৈশিষ্ট্য রয়েছে যা আপনাকে আপনার অ্যানিমেশনের জন্য বিভিন্ন রাজ্য নির্দিষ্ট করতে দেয়। আপনি বর্তমান অবস্থার উপর ভিত্তি করে বিভিন্ন আচরণের সাথে ইন্টারেক্টিভ অ্যানিমেশন তৈরি করতে সক্ষম করে ব্যবহারকারীর ইনপুট বা অন্যান্য অবস্থার উপর ভিত্তি করে স্টেট ট্রানজিশন ট্রিগার করতে পারেন।
4. কোড রপ্তানি: Rive আপনাকে কোড হিসাবে অ্যানিমেশন রপ্তানি করতে দেয়, যা আপনার অ্যাপ্লিকেশনগুলিতে সেগুলিকে একীভূত করা সহজ করে তোলে। Flutter ডেভেলপারদের জন্য, Rive একটি Flutter রানটাইম এবং ইন্টিগ্রেশন প্যাকেজ অফার করে যা Flutter প্রোজেক্টে Rive অ্যানিমেশন ব্যবহার করার সুবিধা দেয়।

একটি সাধারণ ইন্টারেক্টিভ লগইন অ্যানিমেশন🚀

আমরা একটি সাধারণ লগইন অ্যানিমেশন তৈরি করার এবং এটিকে আমাদের ফ্লাটার অ্যাপে রপ্তানি করার প্রক্রিয়ার মধ্য দিয়ে যাব। অ্যাপটিতে এই অ্যানিমেশনের ইন্টারঅ্যাকটিভিটি পরিচালনা করতে আমরা স্টেটমেশিন ব্যবহার করব। শেষ পর্যন্ত, এটি এইরকম হওয়া উচিত 👇🏽

আপনার আর্টবোর্ডে উপাদানটি সেট আপ করুন📃

রিভ আর্টবোর্ডে উপাদান সেট আপ করতে নীচের পদক্ষেপগুলি অনুসরণ করুন:

• প্রথমত, আমাদের উপাদানটি নিজেই পেতে হবে। আমি এটি ফিগমার ব্যবহারকারী ব্যক্তিত্বের চিত্রিত টেমপ্লেট থেকে পেয়েছি। একটি SVG ফাইল হিসাবে উপাদান রপ্তানি করুন.
• Rive এ যান আপনার ড্রাফ্ট খুলতে GetStarted বোতামে ক্লিক করুন
• আপনার খসড়াগুলিতে, একটি নতুন ফাইল তৈরি করুন এবং একটি ফাঁকা আর্টবোর্ড নির্বাচন করুন৷
• উপাদানটিকে আর্টবোর্ডে টেনে আনুন এবং ড্রপ করুন, এটি স্বয়ংক্রিয়ভাবে সম্পদ ফোল্ডারে যুক্ত হবে এবং আপনি এটি আপনার আর্টবোর্ডে রাখা দেখতে পাবেন, এটি দেখতে এইরকম হওয়া উচিত 👇🏽

• সাইড বারে, আমরা এই উপাদানটি তৈরি করে এমন বিভিন্ন আকারকে গোষ্ঠীবদ্ধ করব এবং সেই অনুযায়ী তাদের নাম দেব। Ctrl বা Ctrl + shift ব্যবহার করে আপনি যে সমস্ত গ্রুপ করতে চান তা নির্বাচন করুন। যখন আপনি এটি নির্বাচন করেন, Ctrl + G ব্যবহার করুন তাদের গোষ্ঠীভুক্ত করতে। এটা এই মত দেখতে হবে 👇🏽

• এখন আমরা এই উপাদানে হাড় যোগ করব। হাড়গুলি আরও গতিশীল এবং বাস্তবসম্মত অ্যানিমেশন তৈরি করতে সহায়তা করে। আমরা কীভাবে এই অ্যানিমেশনটি চালু করতে চাই তা বিবেচনা করে, আমরা শ্বাসের বিভ্রম তৈরি করতে ঘাড় এবং বুকে হাড় যুক্ত করব। আমরা চুলে হাড়ও যোগ করব কারণ আমরা চাই চুলগুলিও কিছুটা নড়াচড়া করুক।
• উপরের বাম কোণে হাড়ের টুলটি নির্বাচন করুন বা Ctrl + B ব্যবহার করুন। হাড় যোগ করার পরে, এটি দেখতে এইরকম হওয়া উচিত 👇🏽

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

• এর পরে, আমরা আমাদের হাড়গুলিকে বাঁধব এবং তাদের ওজন করব। বাঁধাই নিশ্চিত করে যে যখন একটি হাড় নড়াচড়া করে, চরিত্রের পৃষ্ঠের সংশ্লিষ্ট অংশগুলি সেই অনুযায়ী নড়াচড়া করে, বিকৃতির বিভ্রম তৈরি করে। ভারটেক্স ওয়েটিং নামেও পরিচিত ওয়েটিং, নির্দিষ্ট হাড়ের নৈকট্যের উপর ভিত্তি করে অক্ষরের জালের প্রতিটি শীর্ষে প্রভাবের মান (ওজন) নির্ধারণ করে। আমরা আকৃতির পথে নেভিগেট করব যা আমরা বাঁধাই করব। ঘাড়ের জন্য, এইভাবে আমরা ঘাড়ের হাড়ের সাথে এটি আবদ্ধ করি।

  

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

• আমরা এই অ্যানিমেশনে একটি ব্লিঙ্কিং প্রভাব রাখতে চাই, এটি অর্জন করতে, আমরা দুটি চোখের আকৃতিতে এইভাবে ক্লিপ বৈশিষ্ট্যটি ব্যবহার করব 👇🏽

• এর পরে, আমরা এই উপাদানটিতে অনুবাদ সীমাবদ্ধতা ব্যবহার করে হেড ট্র্যাকিং যুক্ত করব কারণ আমরা অ্যানিমেশনের সময় মাথা সরাতে চাই। যেহেতু এটি একটি 2d উপাদান, অনুবাদের সীমাবদ্ধতা যোগ করা এটিকে গভীরতা এবং 3d প্রভাবের কিছু রূপ দেবে। সবকিছু নির্বাচন করুন এবং এটি গ্রুপ করুন। এখন আমাদের একটি একক দল আছে।

• তারপরে, উপরের বাম কোণে, গ্রুপ টুলটি নির্বাচন করুন এবং মাথার কেন্দ্রে (নাকের এলাকায়) একটি গ্রুপ তৈরি করুন। ডানদিকে টুলবারে, গ্রুপ থেকে টার্গেটে এর স্টাইল পরিবর্তন করুন, এটির নাম দিন ctrl_front, ডুপ্লিকেট করুন এবং ডুপ্লিকেট ctrl_back নাম দিন।

• লক্ষ্য ctrl_back-এর জন্য, ডানদিকে টুলবার থেকে সীমাবদ্ধতা বিকল্পটি নির্বাচন করুন। উপলব্ধ সীমাবদ্ধতার বিকল্পগুলির তালিকা থেকে অনুবাদের সীমাবদ্ধতাগুলি বেছে নিন। এর বৈশিষ্ট্যগুলি সেট করতে নির্বাচিত সীমাবদ্ধতার বিকল্পের আগে আইকনে ক্লিক করুন।

• শক্তি -100 এ সেট করুন এবং এর লক্ষ্য ctrl ফ্রন্টে সেট করুন। এখন আপনি যখন ctrl সামনে নিয়ে যান, তখন ctrl পিছনে বিপরীত দিকে চলে যায়। এটি আমাদের মুখের অংশগুলির জন্য সীমাবদ্ধতা সেট করতে সাহায্য করবে যা কানের মতো বিপরীত দিকে যেতে হবে। এটা এই মত দেখতে হবে 👇🏽

  
  

  

• এখন আমরা বাকি মুখের জন্য সীমাবদ্ধতা সেট করব। আমরা চোখ (বাম এবং ডান) এবং কান (বাম এবং ডান) এগুলিকে আরও ভালভাবে পরিচালনা করতে আমাদের সাহায্য করার জন্য গ্রুপ করব। আমরা এইভাবে চোখের জন্য সীমাবদ্ধতা নির্ধারণ করব 👇🏽

• লক্ষ্য করুন কিভাবে আমরা প্রথমে চোখের গোষ্ঠীর উৎপত্তিকে ctrl_front এর মতই সেট করেছি। যাতে আমরা যখন ctrl_front টার্গেটটি সরাই, তখন যে চোখ গ্রুপটি এখন এই লক্ষ্যে সীমাবদ্ধ তারা বিশ্রীভাবে ঝাঁপিয়ে না পড়ে এটির সাথে চলাচল করবে। আমরা নিম্নলিখিতগুলির জন্য একই কাজ করব:

আমাদের ঠোঁটের জন্য সীমাবদ্ধতা সেট করার দরকার নেই।

আমরা আমাদের সমস্ত সীমাবদ্ধতা যোগ করা শেষ করার পরে এটি এমন দেখায় 👇🏽

💃🏽 🥳 অভিনন্দন, আমরা যে ধরনের অ্যানিমেশন অর্জন করতে চাই তার জন্য আমরা সফলভাবে আমাদের উপাদান প্রস্তুত করেছি। বাহ!!

অ্যানিমেশন সময়!🕶️

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

প্রথম টাইমলাইন অ্যানিমেশন হল নিষ্ক্রিয় অ্যানিমেশন। এটি অ্যানিমেশনের নিষ্ক্রিয় অবস্থা হবে। অ্যানিমেটেড উপাদান নিযুক্ত না হলে আমরা এটি ব্যবহার করব।

• প্রথমে, আমরা অ্যানিমেশন প্রক্রিয়া শুরু করার আগে আমাদের উপাদানের সমস্ত অংশকে গোষ্ঠীবদ্ধ করি এবং এটিকে অক্ষর নাম দিই।
• তারপরে আমরা সময়কাল 4 মিনিটে সেট করেছি,
• আমাদের Workarea সেট করুন এবং টাইমলাইন টাইপ লুপে সেট করুন। এটি একটি নিষ্ক্রিয় অ্যানিমেশনের জন্য আদর্শ।

এই নিষ্ক্রিয় অ্যানিমেশনের জন্য, আমরা শ্বাস-প্রশ্বাস, চুলের সামান্য নড়াচড়া এবং ঝিমঝিম করার একটি বিভ্রম তৈরি করব। ঘাড়ের হাড়, চুলের হাড় এবং ডান/বাম চোখের উপাদানগুলি ব্যবহার করে, আমরা বিভিন্ন ভঙ্গিতে প্রয়োজনীয় কীফ্রেমগুলি সেট করব, যার অর্থ আমরা টাইমলাইনের পয়েন্টগুলিতে নির্বাচিত আইটেমের নির্দিষ্ট বৈশিষ্ট্যগুলি সেট করতে পারি। একটি কীফ্রেম থেকে পরবর্তীতে রূপান্তর শৈলী বিবেচনা করে, আমরা আমাদের প্রয়োজনীয় ইন্টারপোলেশন নির্বাচন করব। আপনি টাইমলাইন বিভাগের ডানদিকে নীচে এটি খুঁজে পেতে পারেন। আপনি কীভাবে একটি কীফ্রেম থেকে পরবর্তীতে যেতে চান তার উপর নির্ভর করে ইন্টারপোলেশন হয় হোল্ড, লিনিয়ার বা বক্ররেখা। দেখতে এরকম হবে 👇🏽

উপরের জিআইএফ থেকে, আপনি লক্ষ্য করতে পারেন যে টাইমলাইনে বিভিন্ন কীফ্রেমে, আমরা নির্বাচিত আইটেমগুলির জন্য বিভিন্ন ভঙ্গি সেট করেছি। একটি কীফ্রেম থেকে অন্য কীফ্রেমে এই রূপান্তরটি অ্যানিমেশন গঠন করে। এই একই পদ্ধতি ব্যবহার করে, আমরা অন্য পাঁচটি সময়রেখা তৈরি করব। আপনি এই অ্যানিমেশনটি দেখতে এখানে ক্লিক করতে পারেন এবং বিশদভাবে বিভিন্ন টাইমলাইন দেখতে পারেন। এটা এই মত দেখায় 👇🏽

আপনার স্টেট মেশিন সেট আপ করুন🏍️

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

রাষ্ট্রীয় মেশিনে, আমাদের তিনটি ধরণের ইনপুট রয়েছে:

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

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

আপনার স্টেট মেশিন সেট আপ করতে নীচের পদক্ষেপগুলি অনুসরণ করুন:

1. আমাদের স্টেট মেশিনে দুটি স্তর তৈরি করুন এবং একটির নাম পরিবর্তন করে টাইপ করুন । একাধিক স্তর আমাদের একই সময়ে বিভিন্ন রাজ্য খেলতে সাহায্য করে। আপনার স্টেট মেশিনে অন্য লেয়ার পেতে, স্টেটমেশিন গ্রাফের উপরে প্লাস আইকনে ক্লিক করুন।
2. ইনপুট বিভাগে, আপনি এটিকে স্টেট মেশিনের পাশে লেবেলযুক্ত দেখতে পাবেন। প্লাস আইকনে ক্লিক করুন, একটি নম্বর ইনপুট নির্বাচন করুন এবং এটির নাম দিন। look_left এবং look_right টাইমলাইন অ্যানিমেশনগুলিকে মিশ্রিত করার (মিশ্রণ) করার সময় আমরা এই ইনপুটটি ব্যবহার করব যাতে সংখ্যা বাড়ার সাথে সাথে মনে হয় অক্ষরটি বাম থেকে ডানে দেখছে।
3. আরেকটি ইনপুট তৈরি করুন, এইবার একটি বুলিয়ান, এবং এটির নাম চেক করুন । আমরা যখন অ্যানিমেশন দেখতে চাই তখন এটি নিয়ন্ত্রণ করে। দুটি ট্রিগার ইনপুট তৈরি করুন, একটি ব্যর্থ এবং অন্যটি সফলতার নাম পরিবর্তন করুন। সাফল্য এবং ব্যর্থ রাজ্যগুলিকে ট্রিগার করতে আপনার এটির প্রয়োজন হবে।
4. এখন টাইপ লেয়ার গ্রাফে look_ idle অ্যানিমেশন এবং look_left অ্যানিমেশন টেনে আনুন। এই গ্রাফে, আপনি কিছু ডিফল্ট অবস্থা দেখতে পাবেন:
   • এন্ট্রি - এটি এই রাজ্যের সাথে সংযুক্ত যেকোনো অ্যানিমেশন স্টেটের এন্ট্রি পয়েন্ট।
   • প্রস্থান করুন - এটি এই রাজ্যের সাথে সংযুক্ত যেকোনো অ্যানিমেশন স্টেটের প্রস্থান পয়েন্ট
   • অ্যানিস্টেট - এটির সাথে সংযুক্ত যেকোন অ্যানিমেশন স্টেট যতক্ষণ পর্যন্ত ট্রানজিশনের শর্ত পূরণ করে ততক্ষণ প্লে করা হয়।
5. রূপান্তর হল লাইন এবং তীর দুটি বা ততোধিক অবস্থাকে সংযুক্ত করে। তীরের দিকে তাকানো, আপনি রাজ্যগুলি এখন কীভাবে সংযুক্ত রয়েছে তা দেখতে পারেন। আপনি যখন এটিতে ক্লিক করবেন, আপনি রূপান্তরের বৈশিষ্ট্যগুলি দেখতে পাবেন। বৈশিষ্ট্যগুলিতে, আপনি একটি শর্ত তৈরি করতে পারেন। আপনি পূর্বে তৈরি করা ইনপুটগুলির যেকোনো একটি ব্যবহার করে, আপনি সেই শর্তটি সংজ্ঞায়িত করতে পারেন যেটি পরিবর্তনের পরবর্তী অবস্থার আগে অবশ্যই পূরণ করতে হবে৷
6. টাইপ লেয়ারে, ট্রানজিশন রৈখিকভাবে ব্যবহার করে Entry , look_Idle , এবং look_left অবস্থাগুলিকে সংযুক্ত করুন। look_left অবস্থার জন্য, আমরা চাই যে এটি look_left এবং look_right অ্যানিমেশনের মিশ্রণ হোক। এটি করার জন্য, গ্রাফে look_left অবস্থা নির্বাচন করুন এবং প্যানেলের বাম দিকে, Blend 1d বাছাই করুন। ইনপুট বিকল্পের জন্য, চেহারা ইনপুট নির্বাচন করুন. এই ইনপুট আমাদের মিশ্রণ নিয়ন্ত্রণ করবে. তারপর টাইমলাইন বিভাগে, look_left এবং look_right টাইমলাইন নির্বাচন করুন, এবং সেগুলিকে 0 এবং 100 এ সেট করুন। আপনি যখন লুক ইনপুট ফিগার বাড়াবেন, এটি দুটি অ্যানিমেশনকে মিশ্রিত করে।
7. রূপান্তর লাইন এবং তীর ব্যবহার করে ব্লেন্ড স্টেটটিকে look_idle- এ সংযুক্ত করুন। এখন তীরটিতে ক্লিক করুন এবং চেক ইনপুট মিথ্যা হলে শর্ত সেট করুন। এটি আমাদের অ্যানিমেশন নিয়ন্ত্রণ করতে সাহায্য করবে এবং StateMachine কে বলবে, চেক বুলিয়ান মিথ্যা হলে look_idle অবস্থা দেখাতে। look_idle থেকে ব্লেন্ড স্টেটে ফিরে যাওয়া ট্রানজিশন অ্যারোর জন্য একই কাজ করুন, কিন্তু এখন বুলিয়ান ট্রুতে সেট করা হয়েছে চেক করুন ।
8. এখন আপনি যখন চেক ইনপুটের জন্য চেক বক্সে ক্লিক করেন, আপনি এটি সত্য বা মিথ্যা সেট করতে পারেন। আপনি যখন স্টেট মেশিন চালাবেন, তখন এটি লুক_আইডল স্টেট দেখাতে থাকবে যতক্ষণ না আপনি চেক বুলিয়ানকে সত্যে পরিবর্তন করবেন, তারপর এটি look_left অ্যানিমেশন শুরু করবে। look_left এবং look_right মিশ্রিত করতে, আপনি লুক ইনপুট সংখ্যার মান বাড়ান।
9. এখন Layer1 এ, এখানেই আপনি সাফল্য এবং ব্যর্থতার ট্রিগার যোগ করবেন। এন্ট্রি স্টেট থেকে, আপনি নিষ্ক্রিয় অবস্থায় সংযোগ করবেন। নিষ্ক্রিয় অবস্থা থেকে, সাফল্য এবং ব্যর্থ উভয় অবস্থাকে সংযুক্ত করুন। নিষ্ক্রিয় থেকে সাফল্যের অবস্থায় রূপান্তর করার সময়, একটি শর্ত যোগ করুন। এই অবস্থায় , সাফল্য ট্রিগার ইনপুট যোগ করুন। এটা বলছে যে রাষ্ট্রীয় যন্ত্রের সাফল্যের অ্যানিমেশন চালানো উচিত শুধুমাত্র যখন সাফল্য ইনপুট ট্রিগার হয়।
10. ব্যর্থ রাষ্ট্র পরিবর্তনের জন্য একই কাজ করুন কিন্তু পরিবর্তে শর্তে ব্যর্থ ট্রিগার যোগ করুন। এখন সফলতা থেকে, নিষ্ক্রিয় অবস্থায় একটি ট্রানজিশন লাইন তৈরি করুন। এখানে প্রস্থান সময় নির্বাচন করুন, এবং এটি 100% সেট করুন। এর মানে নিষ্ক্রিয় অ্যানিমেশনটি তখনই বাজবে যখন সফল অ্যানিমেশনটি বাজানো শেষ হবে। নিষ্ক্রিয় ট্রানজিশনে ব্যর্থ হওয়ার জন্য একই কাজ করুন।

এখন স্টেট মেশিনে সম্পূর্ণ অ্যানিমেশনটি এরকম দেখাবে 👇🏽

এখানে সম্পূর্ণ অ্যানিমেশন এবং স্টেট মেশিন দেখুন।

অভিনন্দন 🥳, আমরা সফলভাবে আমাদের উপাদান অ্যানিমেট করেছি এবং এটিকে একটি রাষ্ট্রীয় মেশিন দিয়ে সেট আপ করেছি! যাইহোক, আমরা রিভ ফাইল রপ্তানি করার আগে, আমরা ব্যাকগ্রাউন্ড এবং অক্ষরের শার্টের রঙ পরিবর্তন করব। এটা এরকম দেখাবে👇🏽

ব্যাকগ্রাউন্ডের রঙ হল (#B581EB) এবং চরিত্রের শার্টের রঙ হল (#BD08D7)

এখানে অ্যানিমেশনের লিঙ্কটি বিস্তারিতভাবে দেখুন

আপনার ফ্লটার অ্যাপ👨‍🚒-এ অ্যানিমেশন প্রয়োগ করুন

আমরা আমাদের লগইন পৃষ্ঠায় এই অ্যানিমেশনটি ব্যবহার করব। একটি Flutter অ্যাপ প্রকল্প তৈরি করুন এবং pubspec.yaml এ রিভ নির্ভরতা যোগ করুন

 dependencies: rive: ^0.11.12

এছাড়াও, আপনার প্রকল্প সম্পদে রপ্তানি করা রিভ ফাইল যোগ করুন। এখন আমরা আমাদের ডিজাইনের উপর ভিত্তি করে UI তৈরি করতে এগিয়ে যেতে পারি। আমরা অ্যানিমেশনটি নিম্নলিখিতগুলি করতে চাই:

• ইমেল/পাসওয়ার্ড সঠিক হলে সফল অ্যানিমেশনের সাথে প্রতিক্রিয়া জানান
• ইমেল/পাসওয়ার্ড ভুল হলে ব্যর্থ অ্যানিমেশনের সাথে প্রতিক্রিয়া দেখান
• টেক্সট ফিল্ডে কার্সারের দিক দিয়ে সাড়া দিন

উইজেট বিল্ড ফাংশনের আগে আমরা প্রথমে কিছু জিনিস সংজ্ঞায়িত করব।

 ///Login details String emailCred = "[email protected]"; String passwordCred = "123456"; /// input form controller FocusNode emailFocusNode = FocusNode(); TextEditingController emailCtr = TextEditingController(); FocusNode passwordFocusNode = FocusNode(); TextEditingController passwordCtr = TextEditingController(); /// rive controller and input values StateMachineController? controller; SMIInput<bool>? check; SMIInput<double>? look; SMIInput<bool>? success; SMIInput<bool>? fail; bool isLoading = false; bool isError = false; @override void initState() { emailFocusNode.addListener(emailFocus); passwordFocusNode.addListener(passwordFocus); super.initState(); } @override void dispose() { emailFocusNode.removeListener(emailFocus); passwordFocusNode.removeListener(passwordFocus); super.dispose(); } void emailFocus() { check?.change(emailFocusNode.hasFocus); } void passwordFocus() { check?.change(passwordFocusNode.hasFocus); }

এখানে, আমরা নিম্নলিখিত নোট করতে পারি:

• সঠিক ইমেল এবং পাসওয়ার্ড সংজ্ঞায়িত করা হয়.
• ইমেল এবং পাসওয়ার্ডের জন্য ফোকাস নোড এবং পাঠ্য সম্পাদনা নিয়ামকও সংজ্ঞায়িত করা হয়েছে।
• এখানে রিভ কন্ট্রোলার এবং ইনপুটগুলিকে বাতিলযোগ্য হিসাবে সংজ্ঞায়িত করা হয়েছে। আপনি লক্ষ্য করেছেন যে ইনপুটগুলি স্টেট মেশিনে ব্যবহার করা সঠিক নাম ব্যবহার করে সংজ্ঞায়িত করা হয়েছে।
• লোডিং এবং ত্রুটি বুলিয়ান সংজ্ঞায়িত করা হয়েছে।
• emailFocus এবং passwordFocus ফাংশনে, বুলিয়ান FocusNode.hasFocus উপর ভিত্তি করে চেক ইনপুট পরিবর্তন করা হয়
• তারপর initState এবং dispose ফাংশনে, আমরা দেখতে পাচ্ছি Listeners যোগ করা হয়েছে এবং সরানো হয়েছে। শ্রোতাদের ফোকাস পরিবর্তন শুনতে ব্যবহার করা হয়.

আপনি UI এর কোড এবং বাকি কোডটি এখানে দেখতে পারেন। কোডের এই অংশটি দেখায় কিভাবে RiveAsset যোগ করতে হয়:

 SizedBox( height: 250, width: 250, child: RiveAnimation.asset( "assets/login_screen.riv", fit: BoxFit.fitHeight, stateMachines: const ["Login State Machine"], onInit: (artboard) { controller = StateMachineController.fromArtboard( artboard, "Login State Machine", ); if (controller == null) return; artboard.addController(controller!); check = controller?.findInput("check"); look = controller?.findInput("look"); success = controller?.findInput("success"); fail = controller?.findInput("fail"); }, ), ),

উপরের কোড থেকে, আমরা নিম্নলিখিত নোট করতে পারি:

• স্টেটমেশিনের একই নাম রয়েছে যা আমরা রিভ সম্পাদকে নাম দিয়েছি
• নিয়ামক এবং ইনপুট সংজ্ঞায়িত করা হয়

এখানে লগইন ফাংশনের জন্য কোড আছে:

 void login()async{ //extract the text coming from the text fields final email = emailCtr.text; final password = passwordCtr.text; //Set loading boolean to true and delay to give an illusion of loading setState(() { isLoading = true; }); await Future.delayed( const Duration(milliseconds: 2000), ); // check if details entered is the same as the correct creditials defined if (email == emailCred && password == passwordCred) { //if correct trigger the success input and set error boolean to false success?.change(true); setState(() { isError = false; }); if(context.mounted){ // delay and navigate to home screen await Future.delayed( const Duration(seconds: 2),(){ Navigator.push(context, MaterialPageRoute(builder: (context) =>const HomeScreen())); }); } } else { // if details don't match defined credentials // set error boolean to true and trigger the fail input // set loading boolean to false setState(() { isError = true; }); fail?.change(true); } setState(() { isLoading = false; }); }

এখানে সম্পূর্ণ কোড দেখুন.

এটি করার মাধ্যমে, আমরা আমাদের লগইন অ্যানিমেশন কোড সম্পূর্ণ করেছি। এখানে সবকিছু কিভাবে দেখায়:

উপসংহার🏋️‍♀️

অভিনন্দন! আমরা এই সহজ ইন্টারেক্টিভ লগইন অ্যানিমেশন সম্পন্ন করেছি। এখানে আমরা যা করতে পেরেছি তার একটি ওভারভিউ রয়েছে:

• রিভ আর্টবোর্ডে আমাদের উপাদান সেট আপ করুন,
• এই উপাদানটির বিভিন্ন অ্যানিমেটেড অবস্থা তৈরি করুন,
• রাষ্ট্রযন্ত্রের সাহায্যে এই সমস্ত রাজ্যগুলিকে একত্রিত করুন
• রপ্তানি করুন এবং এটি Flutter অ্যাপে যোগ করুন

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

Rive অ্যানিমেশনের আরও ভাল উপলব্ধি পেতে এই ভিডিও টিউটোরিয়ালগুলি দেখুন

আপনি Rive অ্যানিমেশনের বিভিন্ন ভিডিও টিউটোরিয়ালের জন্য Rive চ্যানেলটিও দেখতে পারেন।

তথ্যসূত্র🧶

অ্যানিমেটেড লগইন চরিত্র