Mo.JS দিয়ে কিভাবে সুন্দর কোডেড ওয়েব অ্যানিমেশন তৈরি করবেন

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

প্রোগ্রামারিকভাবে অ্যানিমেশন তৈরির জন্য লাইব্রেরিও রয়েছে। Histতিহাসিকভাবে, ওয়েব কোডাররা সহজ অ্যানিমেশন তৈরি করতে jQuery ব্যবহার করেছিল, কিন্তু ওয়েবের বিকাশ এবং HTML5 নতুন স্ট্যান্ডার্ড হয়ে গেল, নতুন বিকল্পগুলি হাজির হল। ব্রাউজারে বিশেষভাবে ভেক্টর অ্যানিমেশনের জন্য ডিজাইন করা জাভাস্ক্রিপ্ট লাইব্রেরির পাশাপাশি অ্যানিমেশনের জন্য CSS লাইব্রেরিগুলি নতুন কাঠামোর অধীনে অবিশ্বাস্যভাবে শক্তিশালী হয়ে ওঠে।

---

---

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

Mo.js লিখুন

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

আমরা আরও কিছু করার আগে, আসুন আমরা আজ কী তৈরি করতে যাচ্ছি তা একবার দেখে নেওয়া যাক:

আমরা ব্যবহার করব কোডপেন আজকের প্রকল্পের জন্য, যেহেতু এটি আমাদের একই ব্রাউজার উইন্ডোতে সবকিছুতে কাজ করার অনুমতি দেয়। আপনি যদি পছন্দ করেন, আপনি একটি এ কাজ করতে পারেন আপনার পছন্দের সম্পাদক পরিবর্তে. আপনি যদি ধাপে ধাপে টিউটোরিয়ালটি এড়িয়ে যেতে চান তবে সম্পূর্ণ কোডটি এখানে পাওয়া যাবে।

একটি নতুন কলম সেট আপ করুন, এবং আপনাকে এই স্ক্রিন দিয়ে স্বাগত জানানো হবে:

---

---

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

আমরা ব্যবহার করতে যাচ্ছি বাবেল আমাদের কোড প্রি-প্রসেসর হিসাবে, তাই ড্রপ ডাউন মেনু থেকে এটি নির্বাচন করুন। ব্যাবেল প্রদান সহ জাভাস্ক্রিপ্টকে বুঝতে সহজ করে তোলে ECMAScript 6 পুরানো ব্রাউজারের জন্য সমর্থন। আপনি যদি এর অর্থ না জানেন, চিন্তা করো না , এটি আমাদের জীবনকে এখানে একটু সহজ করে তুলবে।

---

---

আমাদের প্রকল্পে mo.js লাইব্রেরি আমদানি করতে হবে। অনুসন্ধান করে এটি করুন mo.js মধ্যে বাহ্যিক স্ক্রিপ্ট/কলম যোগ করুন টেক্সট প্রম্পট, এবং এটি নির্বাচন।

এই দুটি জিনিসের জায়গায়, ক্লিক করুন সংরক্ষণ করেন এবং বন্ধ করেন । আমরা শুরু করার জন্য প্রস্তুত!

Mo.js সহ মৌলিক আকার

গ্রাফিক্স দিয়ে শুরু করার আগে, ভিউ প্যানে সেই সাদা সাদা পটভূমি সম্পর্কে কিছু করা যাক। এই কোডটি লিখে ব্যাকগ্রাউন্ড কালার প্রপার্টি পরিবর্তন করুন সিএসএস রুটি

body{
background: rgba(11,11,11,1);
}

একটি আকৃতি তৈরি করা একটি সহজ প্রক্রিয়া এবং এর পেছনের ধারণাটি পুরো লাইব্রেরিকে চালিত করে। একটি ডিফল্ট বৃত্ত আকৃতি সেট আপ করা যাক। এ এই কোডটি প্রবেশ করান জেএস রুটি:

const redCirc = new mojs.Shape({
isShowStart:true
});

এখানে, আমরা একটি তৈরি করেছি const নামের সাথে মান redCirc এবং এটি একটিকে বরাদ্দ করা হয়েছে নতুন মোজ আকৃতি । আপনি যদি কোডিং এর ক্ষেত্রে সম্পূর্ণ নতুন হন, তাহলে এখানে বন্ধনী অর্ডারের দিকে মনোযোগ দিন এবং শেষে সেমিকোলনটি ভুলে যাবেন না!

এখন পর্যন্ত আমরা ছাড়া কোন পরামিতি পাস করেছি isShowStart: সত্য , এর অর্থ হল এটি স্ক্রিনে প্রদর্শিত হবে এমনকি আমরা এটিকে কোনো গতি দেওয়ার আগে। আপনি দেখতে পাবেন যে এটি পর্দার কেন্দ্রে একটি গোলাপী বৃত্ত স্থাপন করেছে:

এই বৃত্তটি ডিফল্ট আকৃতি mo.js এর জন্য আমরা আমাদের কোডে একটি লাইন যোগ করে সহজেই এই আকৃতি পরিবর্তন করতে পারি:

const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

একটি বস্তুর আরো বৈশিষ্ট্য যুক্ত করার জন্য, আমরা এটিকে আলাদা করার জন্য একটি কমা ব্যবহার করি। এখানে, আমরা a যোগ করেছি আকৃতি সম্পত্তি, এবং এটি একটি হিসাবে সংজ্ঞায়িত 'রেকট' । আপনার কলম সংরক্ষণ করুন, এবং আপনি পরিবর্তে একটি বর্গক্ষেত্রের মধ্যে ডিফল্ট আকৃতি পরিবর্তন দেখতে পাবেন।

মূল্যবোধের কাছে যাওয়ার এই প্রক্রিয়া আকৃতি বস্তু হল কিভাবে আমরা তাদের কাস্টমাইজ করি। এই মুহুর্তে আমাদের একটি বর্গক্ষেত্র রয়েছে যা সত্যিই অনেক কিছু করে না। আসুন কিছু অ্যানিমেট করার চেষ্টা করি।

মোশনের মৌলিক বিষয়

এমন কিছু পেতে যা একটু বেশি চিত্তাকর্ষক মনে হয় আসুন একটি বৃত্ত স্থাপন করি, তার চারপাশে একটি লাল স্ট্রোক এবং ভিতরে কোন ভরাট নেই।

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

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

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

radius: {15:30},
opacity: {1:0},
duration:1000

পরিবর্তন করে ব্যাসার্ধ সম্পত্তি, এবং যোগ করা অস্বচ্ছতা এবং সময়কাল বৈশিষ্ট্য, আমরা সময়ের সাথে সাথে চালানোর জন্য আকৃতির নির্দেশনা দিয়েছি। এইগুলো বদ্বীপ বস্তু, এই বৈশিষ্ট্যগুলির জন্য শুরু এবং শেষ তথ্য ধরে রাখা।

আপনি লক্ষ্য করবেন যে এখনও কিছুই ঘটছে না। এর কারণ হল আমরা যোগ করিনি .play () ফাংশন এটা আমাদের নির্দেশ পালন করতে বলুন। শেষ বন্ধনী এবং সেমিকোলন এর মধ্যে এটি যোগ করুন, এবং আপনি আপনার বৃত্তটি জীবিত দেখতে পাবেন।

এখন আমরা কোথাও পাচ্ছি, কিন্তু এটিকে সত্যিই বিশেষ করে তুলতে, আসুন আরও কিছু গভীরতার সম্ভাবনা দেখি।

Mo.js দিয়ে অর্ডার করা এবং সহজ করা

এখনই, বৃত্তটি প্রদর্শিত হওয়ার সাথে সাথে এটি বিবর্ণ হতে শুরু করে। এটি পুরোপুরি সূক্ষ্মভাবে কাজ করবে, তবে একটু বেশি নিয়ন্ত্রণ করলে ভালো লাগবে।

আমরা এটি দিয়ে করতে পারি তারপর () ফাংশন আমাদের ব্যাসার্ধ বা অস্বচ্ছতা পরিবর্তনের পরিবর্তে, আসুন একটি নির্দিষ্ট পরিমাণ সময় পরে পরিবর্তনের আগে আমাদের আকৃতিটি যেখানে শুরু হয় সেখানেই থাকি।

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

এখন, আমাদের আকৃতি আমরা যে মানগুলি দিয়েছি তা দিয়ে প্রদর্শিত হবে, আমরা যে কিছু দিয়েছি তা বহন করার আগে 1000 ms অপেক্ষা করুন তারপর () ফাংশন আসুন বন্ধনীগুলির মধ্যে কিছু নির্দেশনা যুক্ত করি:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

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

বিভিন্ন বক্ররেখার একটি ভিজ্যুয়াল রান ডাউন জন্য, চেক আউট easings.net । এর সাথে একত্রিত করুন স্ট্রোক প্রস্থ আমাদের নির্ধারিত সময়সীমার উপর 0 তে পরিবর্তন হচ্ছে, এবং আপনার অনেক বেশি গতিশীল অদৃশ্য প্রভাব রয়েছে।

আকারগুলি Mo.js- এর সবকিছুর ভিত্তি, তবে সেগুলি কেবল গল্পের শুরু। এদিকে তাকান ফেটে যায় ।

Mo.js- এ সম্ভাবনার সাথে ফেটে যাওয়া

প্রতি ফেটে যায় Mo.js এ একটি কেন্দ্রীয় বিন্দু থেকে নির্গত আকারের সংগ্রহ। আমরা আমাদের সমাপ্ত অ্যানিমেশনের ভিত্তি তৈরি করতে যাচ্ছি। আপনি যেভাবে একটি আকৃতি করেন সেভাবে আপনি একটি ডিফল্ট বিস্ফোরণ কল করতে পারেন। আসুন কিছু স্ফুলিঙ্গ তৈরি করি:

const sparks = new mojs.Burst({
}).play();

আপনি দেখতে পারেন, শুধু একটি খালি যোগ করে ফেটে যায় বস্তু এবং এটি খেলতে বলা, আমরা ডিফল্ট বিস্ফোরণ প্রভাব পেতে। আমরা বিস্ফোরণের অ্যানিমেশন করে এর আকার এবং ঘূর্ণনকে প্রভাবিত করতে পারি ব্যাসার্ধ এবং কোণ বৈশিষ্ট্য:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

ইতিমধ্যে, আমরা আমাদের বিস্ফোরণে একটি কাস্টম ব্যাসার্ধ এবং স্পিন যুক্ত করেছি:

তাদের আরও স্ফুলিঙ্গের মতো দেখতে, আসুন বিস্ফোরণের আকারগুলি পরিবর্তন করি এবং কতগুলি আকার ফেটে যায়। আপনি বিস্ফোরণের শিশুদের বৈশিষ্ট্য সম্বোধন করে এটি করেন।

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

আপনি লক্ষ্য করবেন যে শিশু বৈশিষ্ট্যগুলি একই আকারের বৈশিষ্ট্যগুলির মতো যা আমরা ইতিমধ্যে কাজ করেছি। এবার আমরা আকৃতি হিসেবে একটি ক্রস বেছে নিয়েছি। এই সমস্ত আকারের 50 টি এখন একই বৈশিষ্ট্য ধারণ করে। দেখতে বেশ ভালো লাগছে! মাউস ক্লিক করলে ব্যবহারকারী প্রথম দেখবেন।

ইতিমধ্যে যদিও আমরা দেখতে পাচ্ছি যে আমাদের প্রাথমিকের লাল স্ট্রোক redCirc আকৃতি প্রায় দীর্ঘ সময় ধরে থাকে। এর সময়কাল পরিবর্তন করার চেষ্টা করুন যাতে উভয় অ্যানিমেশন একসাথে ফিট হয়। এটি এরকম কিছু দেখতে শেষ করা উচিত:

আমরা আমাদের অ্যানিমেশন শেষ করা থেকে অনেক দূরে, কিন্তু এটি ব্যবহারকারী-প্রতিক্রিয়াশীল করতে একটু সময় নিই।

মূল ঘটনা

ব্যবহারকারী যে অবস্থানে ক্লিক করে আমরা আমাদের অ্যানিমেশন ট্রিগার করার জন্য একটি ইভেন্ট হ্যান্ডলার ব্যবহার করব। আপনার কোড ব্লক শেষে, এটি যোগ করুন:

document.addEventListener( 'click', function(e) {
});

এই কোডের টুকরা মাউস ক্লিকের জন্য শোনে, এবং আমাদের জন্য বন্ধনীতে যা নির্দেশ আছে তা বহন করে। আমরা আমাদের যোগ করতে পারি redCirc এবং স্ফুলিঙ্গ এই শ্রোতার প্রতি আপত্তি।

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

দুটি ফাংশন যা আমরা এখানে কল করি .tune () এবং .আবার দেখাও() । রিপ্লে ফাংশনটি প্লে ফাংশনের অনুরূপ, যদিও এটি নির্দিষ্ট করে যে এনিমেশনটি প্রতিবার ক্লিক করার পরে আবার শুরু করা উচিত।

দ্য সুর ফাংশন আমাদের অবজেক্টে মান দিয়ে যায় যাতে আপনি ট্রিগার হলে জিনিস পরিবর্তন করতে পারেন। এক্ষেত্রে আমরা পৃষ্ঠার স্থানাঙ্ক দিয়ে যাচ্ছি যেখানে মাউসটি ক্লিক করা হয়েছিল এবং সেই অনুযায়ী আমাদের অ্যানিমেশনের x এবং y অবস্থান নির্ধারণ করা হচ্ছে। আপনার কোড সংরক্ষণ করুন এবং স্ক্রিনে ক্লিক করার চেষ্টা করুন। আপনি কয়েকটি সমস্যা লক্ষ্য করবেন।

প্রথমত, আমাদের প্রাথমিক অ্যানিমেশন এখনও স্ক্রিনের মাঝখানে প্রদর্শিত হয়, এমনকি যদি ব্যবহারকারী কিছু ক্লিক না করে। দ্বিতীয়ত, অ্যানিমেশনটি মাউস পয়েন্টে ট্রিগার করা হয় না, তবে অফসেট ডাউন এবং ডানদিকে। আমরা এই দুটোই সহজে ঠিক করতে পারি।

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

পজিশনিং সমস্যা সমাধানের জন্য আমাদের বস্তুর জন্য অবস্থানের মান নির্ধারণ করতে হবে। আপনি আমাদের প্রথম আকৃতি থেকে মনে রাখবেন, mo.js তাদের ডিফল্টভাবে পৃষ্ঠার কেন্দ্রে রাখে। যখন এই মানগুলি মাউস অবস্থানের সাথে মিলিত হয়, এটি অফসেট তৈরি করে। এই অফসেট থেকে পরিত্রাণ পেতে, কেবল এই লাইন দুটিতে যোগ করুন redCirc এবং স্ফুলিঙ্গ বস্তু:

left: 0,
top: 0,

এখন আমাদের বস্তুর একমাত্র অবস্থান মান ইভেন্ট শ্রোতা দ্বারা পাস করা মাউস অবস্থানের মান। এখন জিনিসগুলি আরও ভালভাবে কাজ করা উচিত।

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

সাইকেডেলিক হচ্ছে

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

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

এখানে সবকিছু এখন মোটামুটি পরিচিত হওয়া উচিত, যদিও নতুন কিছু পয়েন্ট আছে। আপনি লক্ষ্য করবেন যে আকৃতিটিকে ত্রিভুজ হিসাবে সংজ্ঞায়িত করার পরিবর্তে, আমরা একে a বলেছি বহুভুজ এর সংখ্যা নির্ধারণ করার আগে পয়েন্ট এটি 3 হিসাবে আছে

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

যদি কোডটি আপনার জন্য কাজ না করে, তাহলে নিশ্চিত করুন যে আপনি ইভেন্ট শ্রোতা শ্রেণীতে ত্রিভুজ বস্তুটি যুক্ত করেছেন যেমনটি আমরা আগের বস্তুর সাথে করেছি।

বেশ সাইকেডেলিক! এটি অনুসরণ করার জন্য আরেকটি বিস্ফোরণ যোগ করা যাক।

নাচ পেন্টাগন

আমরা আমাদের প্রায় অভিন্ন কিছু ব্যবহার করতে পারি ত্রিভুজ এটি অনুসরণ করে বিস্ফোরণ করতে আপত্তি। এই সামান্য পরিবর্তিত কোডটি উজ্জ্বল রঙের ওভারল্যাপিং স্পিনিং হেক্সাগন তৈরি করে:

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

এখানে প্রধান পরিবর্তন হল যে আমরা a যোগ করেছি বিলম্ব 500ms এর, যাতে ত্রিভুজগুলির পরে বিস্ফোরণ শুরু না হয়। কয়েকটি মান পরিবর্তন করে, এখানে ধারণাটি ছিল বিস্ফোরণকে ত্রিভুজের বিপরীত দিকে ঘুরিয়ে দেওয়া। সুখী দুর্ঘটনায়, যখন পঞ্চভুজগুলি উপস্থিত হয়, ত্রিভুজগুলির স্ট্রবোস্কোপিক প্রভাব দেখে মনে হয় যে তারা একসাথে ঘুরছে।

একটু এলোমেলোতা

আসুন একটি প্রভাব যোগ করি যা এলোমেলো মান ব্যবহার করে। এই বৈশিষ্ট্যগুলির সাথে একটি বিস্ফোরণ তৈরি করুন:

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

এই বিস্ফোরণ রেখা তৈরি করবে যা লাল হতে শুরু করে এবং স্বচ্ছতার সাথে বিবর্ণ হয়ে যায়, সময়ের সাথে সঙ্কুচিত হয়। এই উপাদানটিকে কি আকর্ষণীয় করে তোলে তা হল এর এলোমেলো মানগুলি এর কিছু বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।

দ্য ডিগ্রি শিফট শিশু বস্তুকে একটি শুরুর কোণ দেয়। এটিকে এলোমেলো করে, এটি প্রতিটি ক্লিকের উপর একটি সম্পূর্ণ ভিন্ন বিস্ফোরণ দেয়। এলোমেলো মানগুলিও এর জন্য ব্যবহৃত হয় ব্যাসার্ধ এবং বিলম্ব বিশৃঙ্খল প্রভাব যোগ করার জন্য ফাংশন।

এখানে নিজেই প্রভাব আছে:

যেহেতু আমরা এখানে এলোমেলো মান ব্যবহার করছি, আমাদের বস্তুর জন্য আমাদের ইভেন্ট হ্যান্ডলারে একটি অতিরিক্ত পদ্ধতি যুক্ত করতে হবে:

redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();

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

আপনি mo.js বস্তুর প্রায় প্রতিটি উপাদানের জন্য এলোমেলো মান ব্যবহার করতে পারেন এবং সেগুলি অনন্য অ্যানিমেশন তৈরির একটি সহজ উপায়।

ইনস্টাগ্রাম ফিডকে কালানুক্রমিকভাবে কীভাবে পরিবর্তন করবেন

তবে এলোমেলোতা অ্যানিমেশনে গতিশীল আন্দোলন যোগ করার একমাত্র উপায় নয়। চলুন দেখি স্তব্ধ ফাংশন

স্তম্ভিত লাইন

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

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

এখানে সবকিছুই এখন পরিচিত, একটি বিস্ফোরণ 50 টি বাচ্চা তৈরি করে যা লাল বা কমলা রেখা। পার্থক্য এখানে আমরা পাস বিলম্ব সম্পত্তি a স্তব্ধ (10) ফাংশন এটি প্রতিটি শিশুর নির্গমনের মধ্যে 10ms বিলম্ব যোগ করে, এটিকে আমরা যে স্পিনিং ইফেক্টটি খুঁজছি তা প্রদান করে।

Stagger ফাংশন কোন র্যান্ডম মান ব্যবহার করে না, তাই আপনি একটি প্রয়োজন হবে না উৎপন্ন এইবার ইভেন্ট হ্যান্ডলারে কাজ করুন। আসুন আমরা এখন পর্যন্ত যা কিছু দেখেছি তা দেখি:

আমরা সহজেই এখানে থামতে পারতাম, কিন্তু এই প্রকল্পটি বন্ধ করতে আরও একটি বিস্ফোরণ যোগ করা যাক।

স্মার্ট স্কোয়ার

এই শেষ বিস্ফোরণের জন্য, আয়তক্ষেত্র ব্যবহার করে কিছু করা যাক। আপনার কোড এবং ইভেন্ট শ্রোতার সাথে এই বস্তুটি যুক্ত করুন:

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

এই বস্তুটি আমরা আজকে যা ইতিমধ্যে কাজ করেছি তাতে নতুন কিছু যোগ করে না, এটি কেবলমাত্র দেখানোর জন্য অন্তর্ভুক্ত করা হয়েছে কিভাবে জটিল জ্যামিতিক নিদর্শনগুলি সহজেই কোডের মাধ্যমে তৈরি করা যায়।

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

এই চূড়ান্ত বস্তুটি যোগ করার সাথে, আমরা সম্পন্ন করেছি। আসুন পুরো জিনিসটি কার্যক্রমে দেখি।

Mo.js: ওয়েব অ্যানিমেশনের জন্য একটি শক্তিশালী হাতিয়ার

Mo.js এর এই সহজ ভূমিকা সুন্দর অ্যানিমেশন তৈরির জন্য প্রয়োজনীয় মৌলিক সরঞ্জামগুলি জুড়েছে। এই সরঞ্জামগুলি যেভাবে ব্যবহার করা হয় তা প্রায় যেকোনো কিছু তৈরি করতে পারে, এবং অনেক কাজের জন্য ওয়েব লাইব্রেরিগুলি ব্যবহারের একটি সহজ বিকল্প ফটোশপ , After Effects, বা অন্যান্য ব্যয়বহুল সফটওয়্যার।

এই লাইব্রেরিটি প্রোগ্রামিং এবং ওয়েব ডেভেলপমেন্ট উভয় ক্ষেত্রেই কাজ করে, প্রকল্পে ব্যবহৃত ইভেন্ট হ্যান্ডলিং সহজেই প্রতিক্রিয়াশীল বোতাম এবং ওয়েবসাইট বা অ্যাপে পাঠ্য তৈরির জন্য ব্যবহার করা যেতে পারে। এটির সাথে মজা করুন: কোনও ভুল নেই, কেবল সুখী দুর্ঘটনা!

শেয়ার করুন শেয়ার করুন টুইট ইমেইল এটি কি উইন্ডোজ 11 এ আপগ্রেড করার যোগ্য?

উইন্ডোজ নতুন করে ডিজাইন করা হয়েছে। কিন্তু এটি কি আপনাকে উইন্ডোজ 10 থেকে উইন্ডোজ 11 এ স্থানান্তরিত করার জন্য যথেষ্ট?

পরবর্তী পড়ুন সম্পর্কিত বিষয়

• প্রোগ্রামিং
• জাভাস্ক্রিপ্ট

লেখক সম্পর্কে ইয়ান বাকলি(216 নিবন্ধ প্রকাশিত)

ইয়ান বাকলি জার্মানির বার্লিনে বসবাসরত একজন ফ্রিল্যান্স সাংবাদিক, সঙ্গীতশিল্পী, অভিনয়শিল্পী এবং ভিডিও প্রযোজক। যখন তিনি লিখছেন না বা মঞ্চে আসছেন না, তখন তিনি পাগল বিজ্ঞানী হওয়ার আশায় DIY ইলেকট্রনিক্স বা কোড নিয়ে ছটফট করছেন।

ইয়ান বাকলি থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন