প্রতিক্রিয়া নেটিভ এনিমেশনস। কীভাবে দুর্দান্ত পারফরম্যান্স এবং টিপস পাবেন - 1x04

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

অ্যানিমেশন কেন গুরুত্বপূর্ণ?

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

গতিতে থাকা বস্তুর গতি রয়েছে।
আপনি আপনার ব্যবহারকারী ইন্টারফেসে শারীরিকভাবে বিশ্বাসযোগ্য গতিবিধি জানাতে অ্যানিমেশনগুলি ব্যবহার করতে পারেন।
চিত্র 1: অ্যানিমেশন দুর্দান্ত!

প্রতিক্রিয়া নেটিভ এনিমেশন সিস্টেম

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

আমার ব্যক্তিগত অনুভূতি হ'ল এনিমেটেডটি বিকাশকারীরা প্রায়শই বেশি ব্যবহার করেন, সম্ভবত এটি আরও নিয়ন্ত্রণ সরবরাহ করে - এবং আরও ভাল ডকুমেন্টেশন।

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

অ্যানিমেটেড API টিপস: কর্মক্ষমতা এবং আরও অনেক কিছু

একটি অ্যানিমেশন তৈরি করতে, আপনি প্রতিক্রিয়া নেটিভ অ্যানিমেশনগুলির জন্য ডকুমেন্টেশনে শুরু করার জন্য খুব ভাল ডকুমেন্টেশন এবং উদাহরণগুলি দেখতে পাবেন।

এভাবেই আপনি দুর্দান্ত পারফরম্যান্স অর্জন করেন

ভাল পারফরম্যান্স অর্জনের জন্য, আপনাকে সর্বদা কনফিগারেশন সমর্থন ইউজ নেটিভড্রাইভার ব্যবহার করতে হবে (মানটি সত্য সহ)। উদাহরণস্বরূপ, কোনও চিত্রের ঘূর্ণন সঞ্চারিত করতে, আমাদের সময় কার্যকারিতাটি দেখতে এমন হবে:

অ্যানিমেটেড.টিমিং (this.state.spinValue, {toValue: 1, সময়কাল: 3000, শিথিলকরণ: Lockerung.linear, UseNativeDriver: সত্য})। শুরু ();

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

আরএন ডকুমেন্টেশন অনুসারে, সমস্ত অ্যানিমেশন প্রকারের জন্য UseNativeDriver ব্যবহার করা যাবে না:

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

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

চিত্র 2: গেমটি শুরু করার জন্য বোতামটি ম্যাথ ওয়ারিয়র্সে ক্লিক করা হলে লোগোটির অ্যানিমেশন বড় করা হয়

আমরা এখানে যা করছি তা হ'ল আমরা একই সাথে লোগোর প্রস্থ এবং উচ্চতা পরিবর্তন করছি এবং এই বৈশিষ্ট্যগুলি অ্যানিমেটেড ড্রাইভার সম্পত্তি ব্যবহার করতে সমর্থন করে না। তাদের সমান্তরাল সম্পাদন নিম্নলিখিত হিসাবে এটি সমর্থন করে:

অ্যানিমেটেড.প্যারালাল ([অ্যানিমেটেড.টিমিং (this.state.rankImageWidth, {toValue: 110})), অ্যানিমেটেড.টিমিং (this.state.rankImageHeight, {toValue: 110})], {UseNativeDriver: সত্য}) ;

অ্যানিমেশনগুলি কীভাবে লুপ করবেন

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

চিত্র 3: যখন ম্যাথ ওয়ারিয়র্সে খেলা ক্লিক করা হয় তখন একটি লুপে লোগো আন্দোলনের অ্যানিমেশন

আমরা একটি জাভাস্ক্রিপ্ট ব্যবধান আইডি তৈরি করেছি। ক্যাচটি হ'ল অ্যাপ ব্রেকডাউন এবং অপেক্ষার সময়গুলি এড়াতে আপনাকে দু'বার প্রকৃত অ্যানিমেশন চালাতে হবে: প্রথম এবং অন্য যে সমস্ত লুপ অনুসরণ করে (জাভাস্ক্রিপ্ট ব্যবধান)।

// অ্যানিমেশন ফাংশন যা y অক্ষের সাথে সাথে সময়ের সাথে একটি উপাদানকে সরিয়ে নিয়ে যায়অ্যান্ডডাউন = (yPositionPropName, সময়কাল, yHighPosition, yLowPosition) => ima অ্যানিমেটেড.সেকোয়েন্স ([অ্যানিমেটেড.টিমিং (yPositionPropName, সময়কাল: 1000 1000, টুভ্যালু: yHighPosition}), অ্যানিমেটেড.টিমিং (yPositionPropName, {সময়কাল: সময়কাল || 1000, টুভ্যালু: yLowPosition})]) শুরু Begin (); };
// উপরে ফাংশনটি কল করুন এবং এটি ব্যবহার করুন // লুপটি উপরে ও নিচে নেওয়ার আগে প্রথমবারের জন্য আপ এবং ডাউন অ্যানিমেশনটি শুরু করুন (this.state.rankImageTop অবস্থান, this.rankImageMoveDistance, this.rankImageHighposition, this.rankImageLowposition) ;
// লুপ র‌্যাঙ্ক চিত্রটি উপরে এবং নীচে চলাচল করে। সম্পূর্ণ বিরতি সময় // (অ্যানিমেশন সময়কাল x 2) পুরো আপ এবং ডাউন এই সময়টির জন্য সময় k ;;, this.rankImageMoveD अवधि * 2);
// আমাদের খেলোয়াড়কে একটি প্রতিপক্ষের ক্লিয়ারইন্টারওয়ালের সাথে তুলনা করার পরে ইন্টারভাল আইডি সাফ করুন (this.rankAnimationIntervalId);

নকশাযুক্ত উপাদান সহ অ্যানিমেটেবল উপাদানগুলির ব্যবহার

ডিজাইন করা উপাদানগুলির ব্যবহারকারীর জন্য, আপনি 4 টি অ্যানিমেটেবল উপাদানগুলির মধ্যে একটি (ভিউ, পাঠ্য, চিত্র, স্ক্রোলভিউ) নীচের মত ডিজাইনের উপাদানগুলিতে রূপান্তর করতে পারেন:

কনস্ট অ্যানিমেটেড ইমেজ = স্টাইলড (অ্যানিমেটেড.আইমেজ) `। , , `;

অ্যানিমেশনের আসল কার্যকারিতা পরীক্ষা করুন

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

কি ভাবছেন?

আপনি এই অ্যানিমেশন টিপস সম্পর্কে কি মনে করেন? আপনি আপনার অ্যানিমেশনগুলি কীভাবে আপনার পক্ষে কাজ করবেন? মন্তব্য বিভাগে আপনার দৃষ্টিভঙ্গি এবং ধারণা অফার।

আপনার সাথে ডিল করার জন্য কোনও নির্দিষ্ট বিষয় আছে? আমি যখন এটির সাথে কাজ করেছি, আমি আমার দৃষ্টিভঙ্গিটি ভাগ করতে চাই।

আপনি যদি এই নিবন্ধটি পছন্দ করেন তবে আপনি বোতামটি টিপে এটিও সন্ধান করতে পারেন।

আমার সম্পর্কে

হ্যালো, আমি তাসোস। এমন একটি সফ্টওয়্যার বিকাশকারী যিনি ওয়েবকে ভালবাসেন এবং বর্তমানে প্রতিক্রিয়া নেটিভ এবং প্রতিক্রিয়া নিয়ে অনেক কাজ করেন। আমি সফটওয়্যার এজেন্সি কোডেড লাইনের একটি সহ-প্রতিষ্ঠাতা, যাতে আমরা অ্যাপ্লিকেশন বিপণনে মনোনিবেশ করে ব্যাপক মোবাইল এবং ওয়েব প্রকল্পগুলি পরিচালনা করি। যদি আপনি যা খুঁজছেন তা যদি মনে হয় তবে দয়া করে এখানে আমার সাথে যোগাযোগ করুন: [email protected]। বন্ধ করার জন্য ধন্যবাদ :)