এই বছরের শুরুর দিকে, ক্রোম 36 বিস্তৃত ওয়েব অ্যানিমেশন বৈশিষ্ট্যের অংশ হিসাবে element.animate পদ্ধতি অবতরণ করে । এটি প্রয়োজনীয়ভাবে লিখিত দক্ষ, নেটিভ অ্যানিমেশনগুলির জন্য অনুমতি দেয় - বিকাশকারীদের তাদের জন্য সবচেয়ে উপযুক্ত পদ্ধতির সাথে তাদের অ্যানিমেশন এবং রূপান্তরগুলি তৈরি করার পছন্দ দেয়।
একটি দ্রুত রিফ্রেশারের জন্য, এখানে আপনি কীভাবে স্ক্রীন জুড়ে একটি ক্লাউড অ্যানিমেট করতে পারেন, হয়ে গেলে একটি কলব্যাক সহ:
var player = cloud.animate([
{transform: 'translateX(' + start + 'px)'},
{transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
console.info('Cloud moved across the screen!');
startRaining(cloud);
};
এটি একাই অবিশ্বাস্যভাবে সহজ এবং অপরিহার্যভাবে অ্যানিমেশন বা ট্রানজিশন তৈরি করার সময় আপনার টুলবক্সের অংশ হিসাবে বিবেচনা করা ভাল। যাইহোক, Chrome 39-এ, element.animate দ্বারা ফিরে AnimationPlayer অবজেক্টে প্লেব্যাক নিয়ন্ত্রণ বৈশিষ্ট্য যুক্ত করা হয়েছে। পূর্বে, একবার একটি অ্যানিমেশন তৈরি করা হলে, আপনি শুধুমাত্র cancel() কল করতে বা ফিনিশ ইভেন্টটি শুনতে পারতেন।
এই প্লেব্যাক সংযোজনগুলি ওয়েব অ্যানিমেশনগুলি কী করতে পারে তার সম্ভাবনাগুলি উন্মুক্ত করে - অ্যানিমেশনগুলিকে একটি সাধারণ-উদ্দেশ্যের সরঞ্জামে পরিণত করা, ট্রানজিশন সম্পর্কে নির্দেশনামূলক না হয়ে, যেমন, 'স্থির' বা পূর্বনির্ধারিত অ্যানিমেশন।
বিরতি, রিওয়াইন্ড বা প্লেব্যাক হার পরিবর্তন
ক্লাউড ক্লিক করা হলে অ্যানিমেশন থামাতে উপরের উদাহরণটি আপডেট করে শুরু করা যাক:
cloud.addEventListener('mousedown', function() {
player.pause();
});
আপনি playbackRate সম্পত্তি পরিবর্তন করতে পারেন:
function changeWindSpeed() {
player.playbackRate *= (Math.random() * 2.0);
}
আপনি reverse() পদ্ধতিকেও কল করতে পারেন, যা সাধারণত বর্তমান playbackRate উল্টানোর সমতুল্য (-1 দ্বারা গুণ করুন)। তবে কয়েকটি বিশেষ ক্ষেত্রে রয়েছে:
যদি
reverse()পদ্ধতির কারণে সৃষ্ট পরিবর্তনের ফলে চলমান অ্যানিমেশন কার্যকরভাবে শেষ হয়ে যায়, তাহলেcurrentTimeউল্টে যায় - যেমন, একটি নতুন অ্যানিমেশন বিপরীত হলে, পুরো অ্যানিমেশনটি পিছনের দিকে চলবেপ্লেয়ার পজ করা হলে, অ্যানিমেশন বাজানো শুরু হবে।
প্লেয়ার স্ক্রাবিং
একটি AnimationPlayer এখন একটি অ্যানিমেশন চলাকালীন তার currentTime পরিবর্তন করার অনুমতি দেয়। সাধারণত, এই মান সময়ের সাথে বৃদ্ধি পাবে (অথবা কমবে, যদি playbackRate নেতিবাচক হয়)। এটি একটি অ্যানিমেশনের অবস্থানকে বাহ্যিকভাবে নিয়ন্ত্রিত করার অনুমতি দিতে পারে, সম্ভবত ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে। এটাকে সাধারণত স্ক্রাবিং বলা হয়।
উদাহরণস্বরূপ, যদি আপনার এইচটিএমএল পৃষ্ঠাটি আকাশের প্রতিনিধিত্ব করে এবং আপনি বর্তমানে বাজানো ক্লাউডের অবস্থান পরিবর্তন করতে একটি টেনে নেওয়ার অঙ্গভঙ্গি চান, আপনি নথিতে কিছু হ্যান্ডলার যোগ করতে পারেন:
var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
startEvent = event;
startEventTime = players.currentTime;
player.pause();
});
document.addEventListener('touchmove', function(event) {
if (!startEvent) return;
var delta = startEvent.touches[0].screenX -
event.changedTouches[0].screenX;
player.currentTime = startEventTime + delta;
});
আপনি ডকুমেন্টের উপর টেনে আনলে, আপনার আসল ইভেন্ট থেকে দূরত্ব প্রতিফলিত করতে currentTime পরিবর্তন করা হবে। অঙ্গভঙ্গি শেষ হয়ে গেলে আপনি অ্যানিমেশন বাজানো আবার শুরু করতেও পছন্দ করতে পারেন:
document.addEventListener('touchend', function(event) {
startEvent = null;
player.play();
});
পৃষ্ঠা থেকে মাউসটি কোথায় তোলা হয়েছে তার উপর নির্ভর করে এটি বিপরীত আচরণের সাথেও মিলিত হতে পারে ( সম্মিলিত ডেমো )।
ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়া হিসাবে একটি AnimationPlayer স্ক্রাব করার পরিবর্তে, এর currentTime অগ্রগতি বা স্থিতি দেখানোর জন্যও ব্যবহার করা যেতে পারে: উদাহরণস্বরূপ, একটি ডাউনলোডের স্থিতি দেখাতে।
এখানে ইউটিলিটি হল যে একটি AnimationPlayer একটি মান সেট করার অনুমতি দেয় এবং অন্তর্নিহিত নেটিভ ইমপ্লিমেন্টেশন এর অগ্রগতি ভিজ্যুয়ালাইজেশনের যত্ন নেয়। ডাউনলোডের ক্ষেত্রে, একটি অ্যানিমেশনের সময়কাল মোট ডাউনলোড আকারে সেট করা যেতে পারে এবং currentTime বর্তমানে ডাউনলোড করা আকারে সেট করা যেতে পারে ( ডেমো )।
UI রূপান্তর এবং অঙ্গভঙ্গি
মোবাইল প্ল্যাটফর্মগুলি দীর্ঘদিন ধরে সাধারণ অঙ্গভঙ্গির ক্ষেত্র ছিল: টেনে আনা, স্লাইডিং, ফ্লিংিং এবং এর মতো। এই অঙ্গভঙ্গিগুলির একটি সাধারণ থিম থাকে: একটি টেনে আনা যায় এমন UI উপাদান, যেমন একটি তালিকা দৃশ্যের "রিফ্রেশ করার জন্য টান" বা স্ক্রিনের বাম দিক থেকে একটি সাইডবার তৈরি করা হচ্ছে৷
ওয়েব অ্যানিমেশনের সাথে, একটি অনুরূপ প্রভাব এখানে ওয়েবে প্রতিলিপি করা খুব সহজ - ডেস্কটপে বা মোবাইলে৷ উদাহরণস্বরূপ, যখন একটি অঙ্গভঙ্গি নিয়ন্ত্রণকারী currentTime সম্পূর্ণ হয়:
var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);
var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
var srcTime = player.currentTime;
var dstTime = findNearest(setpoints, srcTime);
var driftDuration = dstTime - srcTime;
if (!driftDuration) {
runCallback(dstTime);
return;
}
var driftPlayer = target.animate(steps, {
duration: duration,
iterationStart: Math.min(srcTime, dstTime) / duration,
iterations: Math.abs(driftDuration) / duration,
playbackRate: Math.sign(driftDuration)
});
driftPlayer.onfinish = function() { runCallback(dstTime); };
player.currentTime = dstTime;
});
এটি একটি অতিরিক্ত অ্যানিমেশন তৈরি করে যা একটি 'ড্রিফট' সম্পাদন করে। এটি আমাদের পরিচিত ভাল লক্ষ্যের মাধ্যমে যেখানে অঙ্গভঙ্গিটি সম্পূর্ণ হয়েছিল তার মধ্যে চলে।
এটি কাজ করে কারণ অ্যানিমেশনগুলি তাদের ক্রিয়েশন অর্ডারের উপর ভিত্তি করে অগ্রাধিকার দেয়: এই ক্ষেত্রে, driftPlayer প্লেয়ারের চেয়ে অগ্রাধিকার পাবে। driftPlayer সম্পূর্ণ হলে, এটি এবং এর প্রভাবগুলি অদৃশ্য হয়ে যাবে। যাইহোক, এর চূড়ান্ত সময় অন্তর্নিহিত প্লেয়ারের বর্তমান সময়ের সাথে মিলবে, তাই আপনার UI সামঞ্জস্যপূর্ণ থাকবে।
অবশেষে, আপনি যদি বিড়ালছানা পছন্দ করেন তবে একটি ডেমো ওয়েব অ্যাপ্লিকেশন রয়েছে যা এই অঙ্গভঙ্গিগুলি দেখায়। এটি মোবাইল-বন্ধুত্বপূর্ণ এবং পিছনের-সামঞ্জস্যতার জন্য পলিফিল ব্যবহার করে, তাই এটি আপনার মোবাইল ডিভাইসে লোড করার চেষ্টা করুন!
এগিয়ে যান এবং element.animate
element.animate পদ্ধতিটি এখনই সম্পূর্ণভাবে ধাক্কা খাচ্ছে - আপনি এটিকে সাধারণ অ্যানিমেশনের জন্য ব্যবহার করছেন বা অন্য উপায়ে এটির ফিরে আসা AnimationPlayer ব্যবহার করছেন।
লাইটওয়েট পলিফিলের মাধ্যমে অন্যান্য আধুনিক ব্রাউজারগুলিতেও এই দুটি বৈশিষ্ট্য সম্পূর্ণরূপে সমর্থিত। এই পলিফিলটি বৈশিষ্ট্য সনাক্তকরণও সম্পাদন করে, তাই ব্রাউজার বিক্রেতারা স্পেকটি বাস্তবায়ন করে, এই বৈশিষ্ট্যটি সময়ের সাথে সাথে দ্রুত এবং আরও ভাল হবে।
ওয়েব অ্যানিমেশন স্পেকটিও বিকশিত হতে থাকবে। আপনি যদি আসন্ন বৈশিষ্ট্যগুলি নিয়ে খেলতে আগ্রহী হন তবে সেগুলি এখন আরও বিস্তারিত পলিফিলে উপলব্ধ: web-animations-next ।