WPF (Windows Presentation Foundation) এ DoubleAnimation, ColorAnimation, এবং ObjectAnimation এর মাধ্যমে আপনি বিভিন্ন UI উপাদানের প্রপার্টি অ্যানিমেট করতে পারেন। এই অ্যানিমেশনগুলো UI উপাদানগুলির ভিজ্যুয়াল পরিবর্তন এবং ইন্টারঅ্যাকটিভ ইফেক্ট তৈরি করতে সাহায্য করে। WPF অ্যানিমেশনগুলি মূলত Storyboard এর সাথে কাজ করে, যা একাধিক অ্যানিমেশন একসাথে পরিচালনা করতে ব্যবহৃত হয়।
1. DoubleAnimation
DoubleAnimation ব্যবহার করে আপনি double টাইপের প্রপার্টি অ্যানিমেট করতে পারেন। এটি বিভিন্ন UI প্রপার্টির মান পরিবর্তন করতে ব্যবহৃত হয় যেমন Width, Height, Opacity, Canvas.Left, Canvas.Top ইত্যাদি।
উদাহরণ: DoubleAnimation
<Button Content="Click Me" Width="100" Height="50" Click="Button_Click">
<Button.RenderTransform>
<TranslateTransform x:Name="btnTransform"/>
</Button.RenderTransform>
</Button>
C# কোড:
private void Button_Click(object sender, RoutedEventArgs e)
{
// DoubleAnimation
DoubleAnimation animation = new DoubleAnimation();
animation.From = 0;
animation.To = 200;
animation.Duration = new Duration(TimeSpan.FromSeconds(1));
// Animate the TranslateTransform X property (Horizontal movement)
btnTransform.BeginAnimation(TranslateTransform.XProperty, animation);
}
এখানে, DoubleAnimation ব্যবহার করে বাটনের X প্রপার্টি 0 থেকে 200 পিক্সেল পর্যন্ত 1 সেকেন্ডের মধ্যে পরিবর্তিত হবে। এর ফলে বাটনটি অনুভূমিকভাবে সরবে।
2. ColorAnimation
ColorAnimation ব্যবহার করে আপনি UI উপাদানের Color প্রপার্টি পরিবর্তন করতে পারেন, যেমন Background, Foreground, BorderBrush, ইত্যাদি। এটি আপনার UI উপাদানের রঙ পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ: ColorAnimation
<Button Content="Click Me" Width="100" Height="50" Click="Button_Click">
<Button.Background>
<SolidColorBrush x:Name="buttonBrush" Color="LightBlue"/>
</Button.Background>
</Button>
C# কোড:
private void Button_Click(object sender, RoutedEventArgs e)
{
// ColorAnimation
ColorAnimation colorAnimation = new ColorAnimation();
colorAnimation.From = Colors.LightBlue;
colorAnimation.To = Colors.Green;
colorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
// Animate the Background color of the button
buttonBrush.BeginAnimation(SolidColorBrush.ColorProperty, colorAnimation);
}
এখানে, ColorAnimation ব্যবহার করে বাটনের ব্যাকগ্রাউন্ড রঙ 1 সেকেন্ডের মধ্যে LightBlue থেকে Green এ পরিবর্তিত হবে।
3. ObjectAnimationUsingKeyFrames
ObjectAnimationUsingKeyFrames ব্যবহৃত হয় যখন আপনি একাধিক অবজেক্টের মান পরিবর্তন করতে চান বা একই টাইপের একাধিক মান পর্যায়ক্রমে পরিবর্তন করতে চান। এটি সাধারণত KeyFrames এর মাধ্যমে কাজ করে, যা একাধিক স্টেপে মান পরিবর্তন করার সুযোগ দেয়।
উদাহরণ: ObjectAnimationUsingKeyFrames
<Button Content="Animate Color" Width="100" Height="50" Click="Button_Click">
<Button.Background>
<SolidColorBrush x:Name="buttonBrush" Color="LightBlue"/>
</Button.Background>
</Button>
C# কোড:
private void Button_Click(object sender, RoutedEventArgs e)
{
// Create ObjectAnimationUsingKeyFrames
ObjectAnimationUsingKeyFrames animation = new ObjectAnimationUsingKeyFrames();
animation.Duration = new Duration(TimeSpan.FromSeconds(3));
// Create ColorKeyFrames
ColorKeyFrame keyFrame1 = new DiscreteColorKeyFrame(Colors.LightBlue, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)));
ColorKeyFrame keyFrame2 = new DiscreteColorKeyFrame(Colors.Green, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)));
ColorKeyFrame keyFrame3 = new DiscreteColorKeyFrame(Colors.Red, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)));
// Add keyframes to the animation
animation.KeyFrames.Add(keyFrame1);
animation.KeyFrames.Add(keyFrame2);
animation.KeyFrames.Add(keyFrame3);
// Apply animation to the Background color of the button
buttonBrush.BeginAnimation(SolidColorBrush.ColorProperty, animation);
}
এখানে, ObjectAnimationUsingKeyFrames ব্যবহার করে বাটনের ব্যাকগ্রাউন্ড রঙ 3 সেকেন্ডের মধ্যে তিনটি ধাপে পরিবর্তিত হবে: LightBlue, Green, এবং Red।
Storyboard এর মাধ্যমে Multiple Animations
যখন আপনি একাধিক অ্যানিমেশন একসাথে চালাতে চান, তখন আপনি Storyboard ব্যবহার করে সেগুলিকে একত্রে পরিচালনা করতে পারেন। Storyboard হল একটি কন্টেইনার যা একাধিক অ্যানিমেশনকে সিঙ্ক্রোনাইজডভাবে চালানোর সুযোগ দেয়।
উদাহরণ: Storyboard with Multiple Animations
<Button Content="Animate All" Width="100" Height="50" Click="Button_Click">
<Button.RenderTransform>
<TranslateTransform x:Name="btnTransform"/>
</Button.RenderTransform>
<Button.Background>
<SolidColorBrush x:Name="buttonBrush" Color="LightBlue"/>
</Button.Background>
</Button>
C# কোড:
private void Button_Click(object sender, RoutedEventArgs e)
{
Storyboard storyboard = new Storyboard();
// DoubleAnimation (Move the button horizontally)
DoubleAnimation moveAnimation = new DoubleAnimation();
moveAnimation.From = 0;
moveAnimation.To = 200;
moveAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTarget(moveAnimation, btnTransform);
Storyboard.SetTargetProperty(moveAnimation, new PropertyPath(TranslateTransform.XProperty));
// ColorAnimation (Change background color)
ColorAnimation colorAnimation = new ColorAnimation();
colorAnimation.From = Colors.LightBlue;
colorAnimation.To = Colors.Green;
colorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTarget(colorAnimation, buttonBrush);
Storyboard.SetTargetProperty(colorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
// Add animations to storyboard
storyboard.Children.Add(moveAnimation);
storyboard.Children.Add(colorAnimation);
// Begin the storyboard (start animations)
storyboard.Begin();
}
এখানে, Storyboard ব্যবহার করে দুটি অ্যানিমেশন একসাথে চালানো হয়েছে: একটি DoubleAnimation যা বাটনকে অনুভূমিকভাবে সরায়, এবং একটি ColorAnimation যা বাটনের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করে।
সারাংশ (Summary)
- DoubleAnimation:
doubleটাইপের প্রপার্টির মান পরিবর্তন করতে ব্যবহৃত হয় (যেমনWidth,Height,Opacityইত্যাদি)। - ColorAnimation: UI উপাদানের Color প্রপার্টি (যেমন
Background,Foreground) পরিবর্তন করতে ব্যবহৃত হয়। - ObjectAnimationUsingKeyFrames: বিভিন্ন অবজেক্টের প্রপার্টি (যেমন
Point,Brush) অ্যানিমেট করতে ব্যবহৃত হয়, যেখানে একাধিক মান পর্যায়ক্রমে পরিবর্তিত হয়। - Storyboard: একাধিক অ্যানিমেশন একসাথে সিঙ্ক্রোনাইজডভাবে চালানোর জন্য ব্যবহৃত হয়।
এই অ্যানিমেশনগুলো WPF অ্যাপ্লিকেশনে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউআই তৈরি করতে সাহায্য করে, যা ইউজার ইন্টারফেসকে আরও আকর্ষণীয় ও ইন্টারঅ্যাকটিভ করে তোলে।
Read more