CSS Transitions এবং Animations

Web Development - সেনচা টাচ (Sencha Touch) - Sencha Touch এর Styling এবং Themable Design

194

CSS Transitions এবং Animations: একটি পরিচিতি

CSS Transitions এবং Animations হল ওয়েব ডেভেলপমেন্টে অত্যন্ত গুরুত্বপূর্ণ টুলস, যা ইউজার ইন্টারফেসে মসৃণ এবং ইন্টারঅ্যাকটিভ প্রভাব তৈরি করতে সহায়তা করে। Sencha Touch একটি শক্তিশালী JavaScript ফ্রেমওয়ার্ক যা বিশেষভাবে মোবাইল ডিভাইসে ইন্টারফেস তৈরি করতে ব্যবহৃত হয়, এবং CSS transitions এবং animations এর সাথে এটি বেশ ভালোভাবে কাজ করে।

CSS Transitions ব্যবহার করে, আপনি একটি স্টাইল প্রোপার্টির পরিবর্তনকে সময়ের সাথে মসৃণভাবে ঘটাতে পারেন। অন্যদিকে, CSS Animations ব্যবহার করে আপনি আরও জটিল এবং নির্দিষ্ট অ্যানিমেশন তৈরির জন্য কিওফ্রেম (keyframes) ব্যবহার করতে পারেন।

এখন, চলুন Sencha Touch-এ CSS Transitions এবং Animations কীভাবে কার্যকরীভাবে ব্যবহার করা যায় তা দেখি।

১. CSS Transitions

CSS Transitions আপনাকে একটি নির্দিষ্ট প্রপার্টির মান পরিবর্তনের সাথে সময়সীমা নির্ধারণ করতে দেয়, যাতে এটি মসৃণভাবে পরিবর্তিত হয়।

CSS Transition Syntax:

selector {
  transition: property duration timing-function delay;
}

property: যেই CSS প্রপার্টি পরিবর্তন হবে।
duration: ট্রানজিশনের সময়কাল।
timing-function: ট্রানজিশনের গতির ধরন।
delay: ট্রানজিশনের শুরু হতে দেরি (অপশনাল)।

উদাহরণ: এক সেলফে অপACITY ট্রানজিশন

button {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

button:hover {
  opacity: 0.5;
}

এখানে, যখন ব্যবহারকারী বোতামের উপর হোভার করবে, তখন opacity ধীরে ধীরে ১ থেকে ০.৫ এ পরিবর্তিত হবে।

Sencha Touch-এ ব্যবহার:

Sencha Touch-এ CSS transitions ব্যবহার করার জন্য, আপনি HTML এবং CSS এ ট্রানজিশন ডেক্লেয়ার করে মোবাইল অ্যাপ্লিকেশনের ইন্টারফেসে মসৃণ অ্যানিমেশন যুক্ত করতে পারেন।

.x-button {
  transition: transform 0.3s ease-in-out;
}

.x-button:active {
  transform: scale(0.95);
}

এখানে, যখন ব্যবহারকারী বোতামে ক্লিক করবেন, বোতামটি ছোট হয়ে আসবে এবং ট্রানজিশন সম্পূর্ণ হবে।

২. CSS Animations

CSS Animations ব্যবহার করে আপনি কিওফ্রেমের মাধ্যমে একাধিক স্টাইল পরিবর্তন করতে পারেন। কিওফ্রেমের মধ্যে আপনি স্টাইলের বিভিন্ন স্তর নির্ধারণ করতে পারেন এবং এই স্টাইলগুলি একটি নির্দিষ্ট সময়কালে অ্যানিমেট হবে।

CSS Animation Syntax:

@keyframes animation-name {
  0% { /* starting styles */ }
  50% { /* intermediate styles */ }
  100% { /* ending styles */ }
}

selector {
  animation: animation-name duration timing-function delay iteration-count direction;
}

animation-name: অ্যানিমেশনের নাম।
duration: অ্যানিমেশনের সময়কাল।
timing-function: অ্যানিমেশনের গতির ধরন।
delay: অ্যানিমেশনের শুরুতে দেরি।
iteration-count: অ্যানিমেশন কতবার চলবে।
direction: অ্যানিমেশনের দিক।

উদাহরণ: কাঁপানো (Shaking) অ্যানিমেশন

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

button {
  animation: shake 0.5s ease-in-out 0s infinite;
}

এখানে, button এর উপর একটি কাঁপানো (shaking) অ্যানিমেশন প্রয়োগ করা হয়েছে যা প্রতি ০.৫ সেকেন্ড পরপর চলবে।

Sencha Touch-এ ব্যবহার:

Sencha Touch ব্যবহার করার সময় CSS Animations ব্যবহার করে মোবাইল অ্যাপ্লিকেশনে আকর্ষণীয় অ্যানিমেশন যুক্ত করা যায়। উদাহরণস্বরূপ:

.x-panel {
  animation: slideIn 1s ease-out forwards;
}

@keyframes slideIn {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

এখানে, x-panel একটি প্যানেলকে বাম থেকে ডানে স্লাইড করে আনবে।

৩. Sencha Touch-এ CSS Transitions এবং Animations ব্যবহার

Sencha Touch অ্যাপ্লিকেশনগুলিতে CSS Transitions এবং CSS Animations অনেক উপকারী হতে পারে। আপনি মোবাইল ইন্টারফেসে মসৃণ পরিবর্তন এবং অ্যানিমেশন দিয়ে ইউজার এক্সপিরিয়েন্স (UX) আরও উন্নত করতে পারেন।

Sencha Touch-এ Transitions এবং Animations যোগ করার প্রক্রিয়া:

CSS ট্রানজিশন/অ্যানিমেশন ডেক্লেয়ার করুন: উপরের উদাহরণগুলির মতো CSS কোড তৈরি করুন।
Sencha Touch কম্পোনেন্টে ক্লাস যোগ করুন: Sencha Touch এর কম্পোনেন্টের সাথে এই CSS ক্লাসগুলি প্রয়োগ করুন।

উদাহরণ:

Ext.create('Ext.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    cls: 'x-button',
    handler: function() {
        alert('Button clicked');
    }
});

এখানে, cls প্রপার্টি ব্যবহার করে CSS ক্লাস অ্যাসাইন করা হয়েছে, এবং তার সাথে সম্পর্কিত ট্রানজিশন বা অ্যানিমেশন কার্যকর হবে।