প্রায় ৫ মিনিট · React 16.8+ · React DOM
শুরু
ইনস্টল থেকে জেসচার আর প্রবেশ-প্রস্থান গতি পর্যন্ত ছয় ধাপে। প্রতিটি ধাপ একটি ছোট, চলমান কম্পোনেন্ট।
ইনস্টল করুন
Animated-এর কোনো রানটাইম নির্ভরতা নেই। React 16.8+ peer নির্ভরতা।
প্যাকেজের এন্ট্রি পয়েন্ট 'use client' দিয়ে চিহ্নিত। Next.js App Router-এ সার্ভার layout
AnimatedProviderরেন্ডার করতে পারে; হুক আরAnimated.<tag>Client Components-এর ভেতরে ব্যবহার করুন।npm install @kkwaenggwari/animated@kkwaenggwari/animated-এর ইমপোর্ট আপনার এডিটরে খুঁজে পাওয়া যায়।প্রথম মান নাড়ান
useAnimatedValue(1)কম্পোনেন্টের পুরো জীবনকাল একটি জীবন্ত সংখ্যার মালিক। এটি সরাসরিstyle-এ রাখুন: এটি CSS ভেরিয়েবল হয়ে যায়, তাই বদলানোর সময় React রেন্ডার করে না।timing(value, { toValue, duration }).start()এটি নাড়ায়। মাঝপথে আবার চাপলে বর্তমান অস্বচ্ছতা থেকে শুরু হয়।উদাহরণ প্রস্তুত হচ্ছে…
ফ্রেম ফিকে হয়ে ফিরে আসে, আর মাঝপথে দ্বিতীয় চাপ যেখানে আছে সেখান থেকেই দিক উল্টে দেয়।
একটি মান থেকে অনেক আউটপুট
interpolateমানকে দৈর্ঘ্য, কোণ বা সংখ্যায় রূপ দেয়। easing ছাড়া এটি একই ভেরিয়েবলের নিখুঁতcalc()হয়, তাই পাঁচটি লেনের খরচ একটির সমান।একই মানের ভিন্ন ইনপুট পরিসর পাঁচটি আলাদা অ্যানিমেশন ছাড়াই ক্যাসকেড তৈরি করে।
উদাহরণ প্রস্তুত হচ্ছে…
এক চাপে পাঁচটি লেন ক্যাসকেডে নড়ে; ছড়ানো বদলালে শুধু পরিসর বদলায়।
লক্ষ্য বর্ণনা করুন
Animated.buttonসাধারণ বোতাম রেন্ডার করে।seedপ্রথম ফ্রেম,poseএখন কোথায় থাকা উচিত, আরtempoসেখানে কীভাবে পৌঁছাবে।মাঝপথে
poseবদলালে এলিমেন্ট স্ক্রিনে নিজের জায়গা থেকে বাঁক নেয় আর স্প্রিংয়ের সঙ্গে বেগ ধরে রাখে।উদাহরণ প্রস্তুত হচ্ছে…
দ্রুত ট্যাব ক্লিক করলেও কোনো ট্যাব লাফ দেয় না।
ইনপুট জুড়ুন
input(ref, moveInput(...))পয়েন্টারের স্থানাঙ্ক মানে লেখে।follow(target, source)একটি মানকে স্প্রিং দিয়ে অন্যটির পিছু নেওয়ায়।useAnimated-এর factory-তে ঘোষিত সবকিছু কম্পোনেন্টের: listener আর স্প্রিং আনমাউন্টে বা নির্ভরতা বদলালে থামে।উদাহরণ প্রস্তুত হচ্ছে…
কার্ড পয়েন্টারের দিকে হেলে আর পয়েন্টার চলে গেলে স্থির হয়।
চলে যাওয়া অ্যানিমেট করুন
React-এর child সরালে সাধারণত সঙ্গে সঙ্গে সরে যায়।
Animated.Keepkey-যুক্ত children-কে তাদেরdepartpose শেষ না হওয়া পর্যন্ত রাখে।waitসব প্রস্থান শেষ হলে তবেই নতুন children রেন্ডার করে।উদাহরণ প্রস্তুত হচ্ছে…
বাতিল করা বার্তা মিলিয়ে যাওয়ার আগে বেছে নেওয়া গতিতে চলে যায়।
পুরো মডেল এখন আপনার হাতে
মান, লক্ষ্য, ইনপুট আর প্রস্থান একই কন্ট্রোলার, বাধার নিয়ম আর পরিষ্কারকরণ ভাগ করে। গাইড প্রতিটির বিস্তারিত আলোচনা করে।