ওয়েব অ্যানিমেশন - element.animate() এখন Chrome 36-এ রয়েছে

Brendan Kenny

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

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

ওয়েব অ্যানিমেশনগুলি সেই কলের উত্তর দিতে দাঁড়িয়েছে এবং এর প্রথম অংশটি element.animate() আকারে Chrome 36-এ এসেছে। এই নতুন ফাংশনটি আপনাকে জাভাস্ক্রিপ্টে বিশুদ্ধভাবে একটি অ্যানিমেশন তৈরি করতে দেয় এবং এটিকে যে কোনও CSS অ্যানিমেশন বা ট্রানজিশনের মতো দক্ষতার সাথে চালাতে দেয় (আসলে, ক্রোম 34 এর মতো, ঠিক একই ওয়েব অ্যানিমেশন ইঞ্জিন এই সমস্ত পদ্ধতিগুলি চালায় )।

সিনট্যাক্স সহজ, এবং আপনি যদি কখনও একটি CSS ট্রানজিশন বা অ্যানিমেশন লিখে থাকেন তবে এর অংশগুলি আপনার কাছে পরিচিত হওয়া উচিত:

element.animate([
    {cssProperty: value0},
    {cssProperty: value1},
    {cssProperty: value2},
    //...
], {
    duration: timeInMs,
    iterations: iterationCount,
    delay: delayValue
});

এই নতুন ফাংশনের সবচেয়ে বড় সুবিধা হল অনেকগুলি বিশ্রী হুপগুলিকে নির্মূল করা যা আমাদের আগে একটি মসৃণ, জ্যাঙ্ক-মুক্ত অ্যানিমেশন পেতে ঝাঁপিয়ে পড়তে হয়েছিল।

উদাহরণ হিসাবে, গত বছর সান্তা ট্র্যাকারের জন্য, আমরা অবিচ্ছিন্নভাবে তুষারপাত করতে চেয়েছিলাম, এবং আমরা এটিকে CSS এর মাধ্যমে অ্যানিমেট করার সিদ্ধান্ত নিয়েছিলাম যাতে এটি এত দক্ষতার সাথে করা যায়।

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

তাই আমরা নিম্নলিখিত পদ্ধতি গ্রহণ করেছি, যা পরিচিত হওয়া উচিত:

snowFlake.style.transform = 'translate(' + snowLeft + 'px, -100%)';
// wait a frame
snowFlake.offsetWidth;
snowFlake.style.transitionProperty = 'transform';
snowFlake.style.transitionDuration = '1500ms';
snowFlake.style.transform = 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)';

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

বিপরীতে, সমতুল্য element.animate() কলটি আরও স্পষ্ট হতে পারে না, ঠিক কী উদ্দেশ্যে বলা হয়েছে:

snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);

আরো অনেক অপশন আছে. ঠিক তার CSS প্রতিপক্ষের মতো, ওয়েব অ্যানিমেশনগুলি বিলম্বিত এবং পুনরাবৃত্তি করা যেতে পারে:

snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], {
    duration: 1500,
    iterations: 10,
    delay: 300
});

অ্যানিমেশন প্লেয়ার

element.animate() আসলে একটি AnimationPlayer অবজেক্ট রিটার্ন করে, যা ওয়েব অ্যানিমেশন স্পেক চালু হওয়ার সাথে সাথে ক্রমশ গুরুত্বপূর্ণ হয়ে উঠবে। জাভাস্ক্রিপ্ট- এবং সিএসএস-তৈরি করা অ্যানিমেশন উভয়েরই অ্যানিমেশন প্লেয়ারের সাথে যুক্ত থাকবে, যা তাদের দরকারী এবং আকর্ষণীয় উপায়ে নির্বিঘ্নে একত্রিত করার অনুমতি দেবে।

আপাতত, যদিও, অ্যানিমেশন প্লেয়ারের কার্যকারিতা মাত্র দুটি টুকরা রয়েছে, উভয়ই খুব দরকারী। AnimationPlayer.cancel() ব্যবহার করে আপনি যেকোনো সময় একটি অ্যানিমেশন বাতিল করতে পারেন :

var player = snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);
// less than 1500ms later...changed my mind
player.cancel();

এবং, যারা অতীতে CSS অ্যানিমেশন বা ট্রানজিশনের চারপাশে একটি অ্যানিমেশন সিস্টেম তৈরি করার চেষ্টা করেছেন তাদের স্বস্তির জন্য, ওয়েব অ্যানিমেশনগুলি শেষ হয়ে গেলে সর্বদা একটি ইভেন্ট চালু করে:

var player = snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);
player.onfinish = function(e) {
    console.log('per aspera ad terra!');
}

চেষ্টা করে দেখুন

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

element.animate() এবং পলিফিল উভয়ের নেটিভ সংস্করণ ব্যবহার করার চেষ্টা করার জন্য আপনার জন্য তুষার প্রভাবের একটি ডেমো উপলব্ধ।

আপনি কি মনে করেন তা আমাদের জানান

সত্যিই, যদিও, এটি কি হতে চলেছে তার একটি পূর্বরূপ, এবং অবিলম্বে বিকাশকারীর প্রতিক্রিয়া পেতে বিশেষভাবে প্রকাশ করা হচ্ছে৷ আমরা এখনও নিশ্চিত নই যে আমরা প্রতিটি ব্যবহারের ক্ষেত্রে আঘাত করেছি কিনা বা অ্যানিমেশনের জন্য বর্তমান API-এর প্রতিটি রুক্ষ প্রান্তকে স্যান্ডেড করেছি। আমাদের জানার এবং সত্যিই এই অধিকার পাওয়ার একমাত্র উপায় হল ডেভেলপারদের এটি চেষ্টা করে দেখা এবং তারা কী মনে করে তা আমাদের জানান৷

এই পোস্টে মন্তব্যগুলি অবশ্যই মূল্যবান, এবং স্ট্যান্ডার্ডের উপর মন্তব্যগুলি পাবলিক-এফএক্স মেলিং তালিকার মাধ্যমে CSS এবং SVG ওয়ার্কিং গ্রুপগুলিতে সম্বোধন করা যেতে পারে।

আপডেট, অক্টোবর 2014 : Chrome 39 প্লেব্যাক নিয়ন্ত্রণের সাথে সম্পর্কিত বেশ কয়েকটি অতিরিক্ত পদ্ধতির জন্য সমর্থন যোগ করে, যেমন play() , pause() , এবং reverse() । এটি currentTime সম্পত্তির মাধ্যমে একটি অ্যানিমেশনের টাইমলাইনে একটি নির্দিষ্ট বিন্দুতে লাফানো সমর্থন করে। আপনি এই নতুন ডেমোতে এই কার্যকারিতা দেখতে পাবেন।

এই পোস্টে সহায়তার জন্য Addy Osmani এবং Max Heinritz কে ধন্যবাদ।