অ্যানিমেশন একটি শক্তিশালী টুল যা একটি ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতা বাড়াতে পারে। সঠিকভাবে ব্যবহার করা হলে, তারা একটি ওয়েবসাইটকে আরও আকর্ষক, ইন্টারেক্টিভ এবং স্বজ্ঞাত করে তুলতে পারে। এই নিবন্ধে, আমরা SwifWeb-এর জন্য অ্যানিমেশন লাইব্রেরি অন্বেষণ করব।

আমি সবচেয়ে বিখ্যাত animate.css লাইব্রেরির কথা বলছি। আসুন এটি ইনস্টল করি এবং এটি কীভাবে ব্যবহার করবেন তা দেখে নেওয়া যাক!

স্থাপন

আপনি যদি SwifWeb এ নতুন হন তাহলে অনুগ্রহ করে এই নিবন্ধে নতুন প্রকল্প কীভাবে তৈরি করবেন তা দেখে নিন।

প্রকল্পে Package.swift খুলুন এবং dependencies বিভাগটি সম্পাদনা করুন যাতে এটি দেখতে এইরকম হয়:

 dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ]

পরবর্তী সম্পাদনা executableTarget এর মত দেখতে:

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]),

তারপর App.swift অ্যাড import Animate খুলুন এবং এটিকে didFinishLaunching পদ্ধতিতে কনফিগার করুন:

 Lifecycle.didFinishLaunching { Animate.configure() }

ব্যবহার

মূল লাইব্রেরি থেকে সমস্ত ক্লাস হুডের অধীনে, এবং SwiftWeb ব্যবহারকারীদের জন্য, একটি খুব সুবিধাজনক এবং সুন্দর সুইফট ইন্টারফেস উপলব্ধ।

যেকোনো উপাদান নিন এবং এটিতে একটি অ্যানিমেশন যোগ করুন যেটি DOM-এ যোগ করার পরে চালু হবে।

 @DOM override var body: DOM.Content { Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello) // <- here we added jello animation }

অথবা স্ক্রিনে যেকোন উপাদান নিন এবং ফ্লাইতে এটিতে একটি অ্যানিমেশন যোগ করুন:

 lazy var img = Img() @DOM override var body: DOM.Content { self.img .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) Button("Animate").onClick { self.img.animate(.jello) // <- here we animate } }

অতিরিক্তভাবে, আপনি duration , delay এবং repeat সেটিংস সেট করতে পারেন।

 .animate(.jello, delay: 0, duration: 1, repeat: 0)

এই সমস্ত পরামিতি ঐচ্ছিক। অ্যানিমেশন শেষ হলে মানগুলি স্বয়ংক্রিয়ভাবে সরানো হবে।

বিকল্পভাবে এই বিকল্পগুলি পৃথক পদ্ধতি ব্যবহার করে সেট করা যেতে পারে:

 .animateDelay(0) .animateDuration(1) .animateRepeat(0)

এবং আপনার এই মানগুলি ম্যানুয়ালি মুছে ফেলা উচিত:

 .removeAnimateDelay() .removeAnimateDuration() .removeAnimateRepeat()

আসুন প্রতিটি বিকল্প সম্পর্কে আরও কথা বলি।

বিলম্ব

পূর্বনির্ধারিত সুবিধার মান:

 .delay0s // animation starts immediately .delay1s // adds a 1-second delay .delay2s // adds a 2-second delay .delay3s // adds a 3-second delay .delay4s // adds a 4-second delay .delay5s // adds a 5-second delay

এক্সটেনশনে আপনার নিজস্ব সুবিধার মান তৈরি করুন:

 extension DelayValue { static var delay10s: Self { 10 } // adds a 10-second delay }

অথবা আপনি উপরের উদাহরণগুলির মতো যেকোন Float বা Int মান ব্যবহার করতে পারেন।

সময়কাল

পূর্বনির্ধারিত সুবিধার মান:

 .slow // executes animation for 2 seconds .slower // executes animation for 3 seconds .fast // executes animation for 0.8 seconds .faster // executes animation for 0.5 seconds

এক্সটেনশনে আপনার নিজস্ব সুবিধার মান তৈরি করুন:

 extension DurationValue { static var verySlow: Self { 5 } // executes animation for 5s }

অথবা আপনি উপরের উদাহরণগুলির মতো যেকোন ফ্লোট বা int মান ব্যবহার করতে পারেন।

পুনরাবৃত্তি করুন

পূর্বনির্ধারিত সুবিধার মান:

 .repeat1 // repeats animation once .repeat2 // repeats animation twice .repeat3 // repeats animation three times .infinite // repeats animation infinitely

এক্সটেনশনে আপনার নিজস্ব সুবিধার মান তৈরি করুন:

 extension RepeatValue { static var repeat5: Self { 5 } // repeats animation five times }

অথবা আপনি উপরের উদাহরণগুলির মতো যেকোন Int মান ব্যবহার করতে পারেন।

সুবিধার মান সহ উদাহরণ

 .animate(.jello, delay: .delay0s, duration: .slower, repeat: .repeat2)

এবং পৃথক পদ্ধতি:

 .animateDelay(.delay0s) .animateDuration(.slower) .animateRepeat(.repeat2)

সেরা অনুশীলন

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

অর্থপূর্ণ অ্যানিমেশন ব্যবহার করুন

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

খেলাধুলা ভাল, কিন্তু সচেতন থাকুন

একটি ইন্টারফেসে খেলাধুলা যোগ করা উপকারী হতে পারে, তবে নিশ্চিত করুন যে অ্যানিমেশনগুলি ব্যবহারকারীর অভিজ্ঞতাকে বাধা দিচ্ছে না বা অতিরিক্ত ব্যবহারের কারণে পৃষ্ঠার কার্যকারিতা প্রভাবিত করছে না।

বড় উপাদান অ্যানিমেটিং এড়িয়ে চলুন

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

অসীম অ্যানিমেশন এড়িয়ে চলুন

যদিও animate.css সীমাহীন অ্যানিমেশনগুলি সহ পুনরাবৃত্তি অ্যানিমেশনগুলির জন্য ইউটিলিটি ক্লাস সরবরাহ করে, এটি অবিরাম অ্যানিমেশনগুলি এড়াতে সুপারিশ করা হয়। এই অ্যানিমেশনগুলি ব্যবহারকারীদের বিভ্রান্ত করতে পারে এবং তাদের বিরক্ত করতে পারে, যার ফলে একটি নেতিবাচক অভিজ্ঞতা হয়। অতএব, তাদের বুদ্ধিমানের সাথে ব্যবহার করুন!

গোটচাস

আপনি ইনলাইন উপাদান অ্যানিমেট করতে পারবেন না

CSS অ্যানিমেশন স্পেসিফিকেশন অনুযায়ী ইনলাইন উপাদান অ্যানিমেট করার পরামর্শ দেওয়া হয় না এবং সব ব্রাউজারে কাজ নাও করতে পারে। block বা inline-block স্তরের উপাদান, grid এবং flex কন্টেনার এবং তাদের বাচ্চাদের পরিবর্তে অ্যানিমেটেড করা উচিত। একটি ইনলাইন-লেভেল এলিমেন্ট অ্যানিমেট করতে, আপনি এর ডিসপ্লে প্রোপার্টি ইনলাইন-ব্লক করতে সেট করতে পারেন।

উপচে পড়া

স্ক্রীন জুড়ে উপাদান অ্যানিমেটিং করার সময়, কিছু Animate.css অ্যানিমেশন আপনার ওয়েবপৃষ্ঠায় স্ক্রলবার তৈরি করতে পারে। এটি এড়াতে, আপনি ওভারফ্লো ব্যবহার করতে পারেন: অ্যানিমেটেড উপাদান ধারণকারী প্যারেন্ট এলিমেন্টে লুকানো সম্পত্তি। যাইহোক, এটি কখন বা কীভাবে ব্যবহার করবেন তার কোনও নির্দিষ্ট রেসিপি নেই।

পুনরাবৃত্তির মধ্যে ব্যবধান

বিশুদ্ধ CSS ব্যবহার করে পুনরাবৃত্তির মধ্যে ব্যবধান সেট করা বর্তমানে সম্ভব নয়।

কিন্তু এটা সম্ভব `.animationEnd` ইভেন্ট লিসেনার ব্যবহার করে:

 Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) .addEventListener( .animationEnd, options: .init(once: true) ) { event, element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } }

বা এমনকি আরো সুবিধাজনক:

 Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) { element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } }

এখানেই শেষ

হ্যাঁ, সেই লাইব্রেরি কমপ্যাক্ট কিন্তু শক্তিশালী!

আরও শিখতে চান? আসন্ন নিবন্ধের জন্য টিউন থাকুন!