XAML এবং WPF (Windows Presentation Foundation) এর মধ্যে অ্যানিমেশন একটি গুরুত্বপূর্ণ ফিচার। অ্যানিমেশন UI উপাদানগুলোর ভিজ্যুয়াল বৈশিষ্ট্যগুলির পরিবর্তন প্রদর্শন করতে সাহায্য করে, যেমন একটি বাটনের আকার, রঙ, বা অবস্থান পরিবর্তন করা। DoubleAnimation, ColorAnimation, এবং KeyFrame Animation হল WPF-এ ব্যবহৃত কিছু সাধারণ অ্যানিমেশন কনসেপ্ট। এই অ্যানিমেশনগুলি UI উপাদানগুলির ভিজ্যুয়াল প্রপার্টি পরিবর্তন করতে ব্যবহৃত হয়।
DoubleAnimation
DoubleAnimation একটি অ্যানিমেশন ক্লাস যা একটি ডাবল প্রপার্টির মান ধীরে ধীরে পরিবর্তন করে। এটি সাধারণত UI উপাদানগুলোর এস্কেল বা অবস্থান পরিবর্তন করতে ব্যবহৃত হয়, যেমন বাটন বা ইমেজের আকার বৃদ্ধি বা কমানো।
উদাহরণ:
<Button Content="Click Me" Width="100" Height="50">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width"
From="100"
To="200"
Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
এখানে, বাটনের Width প্রপার্টি 100 থেকে 200 পর্যন্ত 2 সেকেন্ড সময়ের মধ্যে বৃদ্ধি পাবে যখন বাটনে ক্লিক করা হবে।
অ্যানিমেশন প্রপার্টি:
- From: অ্যানিমেশনের শুরু মান।
- To: অ্যানিমেশনের শেষ মান।
- Duration: অ্যানিমেশনটি সম্পন্ন হতে যে সময় নেবে।
ColorAnimation
ColorAnimation একটি অ্যানিমেশন ক্লাস যা একটি Color প্রপার্টি (যেমন ব্যাকগ্রাউন্ড কালার) ধীরে ধীরে পরিবর্তন করতে ব্যবহৃত হয়। এটি সাধারণত UI উপাদানের ব্যাকগ্রাউন্ড বা ফ্রন্টগ্রাউন্ড কালার পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
<Button Content="Click Me" Width="150" Height="50" Background="Blue">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
From="Blue"
To="Red"
Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
এখানে, বাটনের Background প্রপার্টি Blue থেকে Red-এ 2 সেকেন্ডের মধ্যে পরিবর্তিত হবে যখন বাটনে ক্লিক করা হবে।
অ্যানিমেশন প্রপার্টি:
- From: অ্যানিমেশনের শুরু কালার।
- To: অ্যানিমেশনের শেষ কালার।
- Duration: অ্যানিমেশনটি সম্পন্ন হতে যে সময় নেবে।
KeyFrame Animation
KeyFrame Animation একটি শক্তিশালী অ্যানিমেশন প্রযুক্তি যা সিকোয়েন্সে একাধিক মান পরিবর্তন করতে ব্যবহৃত হয়। এতে, আপনি নির্দিষ্ট সময়ে একাধিক মানের "KeyFrame" সেট করতে পারেন। এটি KeyTime এবং KeyFrame ব্যবহার করে। KeyFrame অ্যানিমেশনটি একটি উপাদানের অবস্থান বা আকার পরিবর্তন করার জন্য ধাপে ধাপে অ্যানিমেশন তৈরি করতে সাহায্য করে।
উদাহরণ:
<Button Content="Animate Me" Width="100" Height="50" Background="LightBlue">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="Width"
Duration="0:0:5">
<LinearDoubleKeyFrame KeyTime="0:0:1" Value="150"/>
<LinearDoubleKeyFrame KeyTime="0:0:3" Value="100"/>
<LinearDoubleKeyFrame KeyTime="0:0:5" Value="200"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
এখানে, বাটনের Width প্রপার্টি তিনটি KeyFrame এর মাধ্যমে পরিবর্তিত হবে:
- প্রথম KeyFrame এ বাটনের প্রস্থ 150 পিক্সেল হবে ১ সেকেন্ডে।
- দ্বিতীয় KeyFrame এ প্রস্থ 100 পিক্সেল হবে ৩ সেকেন্ডে।
- তৃতীয় KeyFrame এ প্রস্থ 200 পিক্সেল হবে ৫ সেকেন্ডে।
KeyFrame Animation প্রপার্টি:
- KeyTime: একটি নির্দিষ্ট সময়ে কোন মান হবে তা নির্ধারণ করে।
- Value: KeyFrame এর মান যা নির্দিষ্ট সময়ের মধ্যে পৌঁছাবে।
সারাংশ
- DoubleAnimation: একটি ডাবল প্রপার্টি (যেমন প্রস্থ, উচ্চতা) পরিবর্তন করার জন্য ব্যবহৃত হয়।
- ColorAnimation: একটি রঙ (যেমন ব্যাকগ্রাউন্ড, ফ্রন্টগ্রাউন্ড কালার) পরিবর্তন করার জন্য ব্যবহৃত হয়।
- KeyFrame Animation: একাধিক মান নির্ধারণ করতে ব্যবহৃত হয়, যেখানে নির্দিষ্ট সময়ে ভিন্ন ভিন্ন মান অর্জিত হয়, যেমন প্রস্থ, উচ্চতা, বা অন্যান্য প্রপার্টি।
এই অ্যানিমেশনগুলো UI কে জীবন্ত এবং ইন্টারঅ্যাকটিভ করে তোলে, এবং ডেভেলপারদের জন্য একটি সহজ এবং শক্তিশালী উপায় দেয় ভিজ্যুয়াল পরিবর্তন সৃষ্টির জন্য।
Read more
