ওয়েব অ্যানিমেশন API , যা প্রথমে Chrome 36-এ পাঠানো হয়েছিল, ব্রাউজারে অ্যানিমেশনগুলির সুবিধাজনক জাভাস্ক্রিপ্ট নিয়ন্ত্রণ প্রদান করে এবং এটি Gecko এবং WebKit-এও প্রয়োগ করা হচ্ছে।
Chrome 50 অন্যান্য ব্রাউজারগুলির সাথে আন্তঃব্যবহারযোগ্যতা উন্নত করতে এবং বিশেষত্বের সাথে আরও সঙ্গতিপূর্ণ হতে পরিবর্তনগুলি প্রবর্তন করে৷ এই পরিবর্তনগুলি হল:
- ইভেন্ট বাতিল করুন
-
Animation.id -
pause()পদ্ধতির জন্য স্টেট পরিবর্তন - কীফ্রেমে কী হিসাবে ড্যাশ করা নামের অবচয়
Chrome 51-এ, এই পরিবর্তনগুলির মধ্যে কিছু চূড়ান্ত করা হয়েছে:
- কীফ্রেমে কী হিসাবে ড্যাশ করা নামগুলি সরানো হচ্ছে
ইভেন্ট বাতিল করুন
অ্যানিমেশন ইন্টারফেসে একটি অ্যানিমেশন বাতিল করার একটি পদ্ধতি রয়েছে, যাকে বলা হয় cancel() । Chrome 50 ক্যান্সেল ইভেন্টের ফায়ারিং প্রয়োগ করে যখন পদ্ধতিটিকে স্পেক অনুযায়ী কল করা হয়, যা oncancel অ্যাট্রিবিউটের মাধ্যমে ইভেন্ট হ্যান্ডলিংকে ট্রিগার করে যদি এটি শুরু করা হয়।
Animation.id এর জন্য সমর্থন
আপনি element.animate() ব্যবহার করে একটি অ্যানিমেশন তৈরি করার সময় আপনি বেশ কয়েকটি বৈশিষ্ট্য পাস করতে পারেন। উদাহরণস্বরূপ, এখানে একটি বস্তুর উপর অস্বচ্ছতা অ্যানিমেটিং করার একটি উদাহরণ রয়েছে:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
id প্রপার্টি নির্দিষ্ট করে, এটি অ্যানিমেশন অবজেক্টে সেট করা হবে যেটি রিটার্ন করা হয়েছে যা আপনার কন্টেন্ট ডিবাগ করার সময় সাহায্য করতে পারে যখন আপনার কাছে অনেক অ্যানিমেশন অবজেক্ট থাকে। আপনি যে অ্যানিমেশনটি ইনস্ট্যান্টিয়েট করেন তার জন্য আপনি কীভাবে একটি id নির্দিষ্ট করবেন তার একটি উদাহরণ এখানে রয়েছে:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
পজ() পদ্ধতির জন্য স্টেট পরিবর্তন
pause() পদ্ধতিটি চলমান একটি অ্যানিমেশনকে পজ করতে ব্যবহৃত হয়। আপনি যদি playState অ্যাট্রিবিউট ব্যবহার করে অ্যানিমেশনের অবস্থা পরীক্ষা করেন তবে paused() পদ্ধতিটি কল করার পরে এটিকে paused সেট করা উচিত। 50-এর আগের ক্রোম সংস্করণগুলিতে, অ্যানিমেশনটি এখনও শুরু না হলে playState অ্যাট্রিবিউটটি idle নির্দেশ করবে, তবে এখন এটি সঠিক অবস্থা প্রতিফলিত করে যা paused হয়েছে।
কীফ্রেমে কী হিসাবে ড্যাশ করা নামগুলি সরানো হচ্ছে
আরও বৈশিষ্ট মেনে চলতে. এবং অন্যান্য ইমপ্লিমেন্টেশন, কিফ্রেম অ্যানিমেশনে কীগুলির জন্য ড্যাশড নাম ব্যবহার করা হলে Chrome 50 কনসোলে একটি সতর্কতা পাঠায়। আইডিএল অ্যাট্রিবিউট কনভার্সন অ্যালগরিদমের সিএসএস প্রপার্টি অনুযায়ী ক্যামেলকেস নাম ব্যবহার করার জন্য সঠিক স্ট্রিংগুলি।
উদাহরণ স্বরূপ, CSS প্রপার্টি margin-left জন্য আপনাকে কী হিসাবে marginLeft পাস করতে হবে।
Chrome 51 ড্যাশ করা নামের জন্য সমর্থনকে সম্পূর্ণরূপে সরিয়ে দেয়, তাই এখনই সঠিক সময় অনুযায়ী সঠিক নামকরণের সাথে বিদ্যমান কোনো সামগ্রী সংশোধন করার জন্য উপযুক্ত সময়।
সারসংক্ষেপ
এই পরিবর্তনগুলি ক্রোমের ওয়েব অ্যানিমেশনের বাস্তবায়নকে অন্যান্য ব্রাউজার বাস্তবায়নের কাছাকাছি নিয়ে আসে এবং স্পেসিফিকেশনের সাথে আরও সঙ্গতিপূর্ণ করে যা সবগুলিই ভাল ইন্টারঅপারেবিলিটির জন্য ওয়েব পৃষ্ঠার বিষয়বস্তু রচনাকে সহজ করতে সাহায্য করে৷
,ওয়েব অ্যানিমেশন API , যা প্রথমে Chrome 36-এ পাঠানো হয়েছিল, ব্রাউজারে অ্যানিমেশনগুলির সুবিধাজনক জাভাস্ক্রিপ্ট নিয়ন্ত্রণ প্রদান করে এবং এটি Gecko এবং WebKit-এও প্রয়োগ করা হচ্ছে।
Chrome 50 অন্যান্য ব্রাউজারগুলির সাথে আন্তঃব্যবহারযোগ্যতা উন্নত করতে এবং বিশেষত্বের সাথে আরও সঙ্গতিপূর্ণ হতে পরিবর্তনগুলি প্রবর্তন করে৷ এই পরিবর্তনগুলি হল:
- ইভেন্ট বাতিল করুন
-
Animation.id -
pause()পদ্ধতির জন্য স্টেট পরিবর্তন - কীফ্রেমে কী হিসাবে ড্যাশ করা নামের অবচয়
Chrome 51-এ, এই পরিবর্তনগুলির মধ্যে কিছু চূড়ান্ত করা হয়েছে:
- কীফ্রেমে কী হিসাবে ড্যাশ করা নামগুলি সরানো হচ্ছে
ইভেন্ট বাতিল করুন
অ্যানিমেশন ইন্টারফেসে একটি অ্যানিমেশন বাতিল করার একটি পদ্ধতি রয়েছে, যাকে বলা হয় cancel() । Chrome 50 ক্যান্সেল ইভেন্টের ফায়ারিং প্রয়োগ করে যখন পদ্ধতিটিকে স্পেক অনুযায়ী কল করা হয়, যা oncancel অ্যাট্রিবিউটের মাধ্যমে ইভেন্ট হ্যান্ডলিংকে ট্রিগার করে যদি এটি শুরু করা হয়।
Animation.id এর জন্য সমর্থন
আপনি element.animate() ব্যবহার করে একটি অ্যানিমেশন তৈরি করার সময় আপনি বেশ কয়েকটি বৈশিষ্ট্য পাস করতে পারেন। উদাহরণস্বরূপ, এখানে একটি বস্তুর উপর অস্বচ্ছতা অ্যানিমেটিং করার একটি উদাহরণ রয়েছে:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
id প্রপার্টি নির্দিষ্ট করে, এটি অ্যানিমেশন অবজেক্টে সেট করা হবে যেটি রিটার্ন করা হয়েছে যা আপনার কন্টেন্ট ডিবাগ করার সময় সাহায্য করতে পারে যখন আপনার কাছে অনেক অ্যানিমেশন অবজেক্ট থাকে। আপনি যে অ্যানিমেশনটি ইনস্ট্যান্টিয়েট করেন তার জন্য আপনি কীভাবে একটি id নির্দিষ্ট করবেন তার একটি উদাহরণ এখানে রয়েছে:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
পজ() পদ্ধতির জন্য স্টেট পরিবর্তন
pause() পদ্ধতিটি চলমান একটি অ্যানিমেশনকে পজ করতে ব্যবহৃত হয়। আপনি যদি playState অ্যাট্রিবিউট ব্যবহার করে অ্যানিমেশনের অবস্থা পরীক্ষা করেন তবে paused() পদ্ধতিটি কল করার পরে এটিকে paused সেট করা উচিত। 50-এর আগের ক্রোম সংস্করণগুলিতে, অ্যানিমেশনটি এখনও শুরু না হলে playState অ্যাট্রিবিউটটি idle নির্দেশ করবে, তবে এখন এটি সঠিক অবস্থা প্রতিফলিত করে যা paused হয়েছে।
কীফ্রেমে কী হিসাবে ড্যাশ করা নামগুলি সরানো হচ্ছে
আরও বৈশিষ্ট মেনে চলতে. এবং অন্যান্য ইমপ্লিমেন্টেশন, কিফ্রেম অ্যানিমেশনে কীগুলির জন্য ড্যাশড নাম ব্যবহার করা হলে Chrome 50 কনসোলে একটি সতর্কতা পাঠায়। আইডিএল অ্যাট্রিবিউট কনভার্সন অ্যালগরিদমের সিএসএস প্রপার্টি অনুযায়ী ক্যামেলকেস নাম ব্যবহার করার জন্য সঠিক স্ট্রিংগুলি।
উদাহরণ স্বরূপ, CSS প্রপার্টি margin-left জন্য আপনাকে কী হিসাবে marginLeft পাস করতে হবে।
Chrome 51 ড্যাশ করা নামের জন্য সমর্থনকে সম্পূর্ণরূপে সরিয়ে দেয়, তাই এখনই সঠিক সময় অনুযায়ী সঠিক নামকরণের সাথে বিদ্যমান কোনো সামগ্রী সংশোধন করার জন্য উপযুক্ত সময়।
সারসংক্ষেপ
এই পরিবর্তনগুলি ক্রোমের ওয়েব অ্যানিমেশনের বাস্তবায়নকে অন্যান্য ব্রাউজার বাস্তবায়নের কাছাকাছি নিয়ে আসে এবং স্পেসিফিকেশনের সাথে আরও সঙ্গতিপূর্ণ করে যা সবগুলিই ভাল ইন্টারঅপারেবিলিটির জন্য ওয়েব পৃষ্ঠার বিষয়বস্তু রচনাকে সহজ করতে সাহায্য করে৷