Animation এবং Storyboard এর মৌলিক ধারণা

WPF (Windows Presentation Foundation) এ Animation এবং Storyboard ব্যবহার করে আপনি UI উপাদানগুলিতে ডাইনামিক ইফেক্ট এবং ট্রান্সফর্মেশন তৈরি করতে পারেন। এগুলি আপনাকে আপনার অ্যাপ্লিকেশনের UI তে আকর্ষণীয় এবং ইন্টারেকটিভ অ্যানিমেশন যোগ করার সুযোগ দেয়। এই ধারণাগুলি WPF অ্যাপ্লিকেশনগুলিতে কাস্টম অ্যানিমেশন এবং ট্রান্সফর্মেশন তৈরির জন্য অত্যন্ত গুরুত্বপূর্ণ।

Animation (অ্যানিমেশন)

Animation হল একটি প্রক্রিয়া যা UI উপাদানের অবস্থান, আকার, রঙ, অথবা অন্য কোনো বৈশিষ্ট্য পরিবর্তন করতে ব্যবহৃত হয়, যা সময়ের সাথে সাথে পরিবর্তিত হয়। অ্যানিমেশনগুলি আপনাকে গ্রাফিক্যাল ইন্টারফেসে সজীবতা যোগ করার সুযোগ দেয় এবং এটি ইউজারদের জন্য ইন্টারেকটিভ ও মনোমুগ্ধকর অভিজ্ঞতা তৈরি করতে সাহায্য করে।

WPF এ, অ্যানিমেশন সাধারণত KeyFrames ব্যবহার করে করা হয়। KeyFrames হল নির্দিষ্ট মান, যা একটি অ্যানিমেশনের মধ্যে অন্তর্বর্তী সময়ের মাধ্যমে কন্ট্রোল করতে সাহায্য করে।

Animation এর ধরণ (Types of Animation in WPF)

1. DoubleAnimation:
   এটি একটি সংখ্যা বা স্লাইডারের মান পরিবর্তন করতে ব্যবহৃত হয়।
2. ColorAnimation:
   এটি UI উপাদানের রঙ পরিবর্তন করতে ব্যবহৃত হয়।
3. PointAnimation:
   এটি পয়েন্টের অবস্থান পরিবর্তন করতে ব্যবহৃত হয় (যেমন, একটি উপাদানকে একটি স্থান থেকে অন্য স্থানে সরানো)।
4. ThicknessAnimation:
   এটি UI উপাদানের সীমানার প্রস্থ বা উচ্চতা পরিবর্তন করতে ব্যবহৃত হয়।
5. DoubleAnimationUsingKeyFrames:
   এটি একটি একাধিক মানের মধ্যে পরিবর্তন করতে ব্যবহৃত হয়, যেখানে আপনি বিভিন্ন সময়ে নির্দিষ্ট মান সেট করতে পারেন।

Animation উদাহরণ (Example of Animation)

নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি বাটনের আকার পরিবর্তন করা হচ্ছে DoubleAnimation ব্যবহার করে:

<Button Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">
    <Button.RenderTransform>
        <ScaleTransform x:Name="scaleTransform"/>
    </Button.RenderTransform>
</Button>

C# কোডে অ্যানিমেশন যোগ করা:

private void Button_Click(object sender, RoutedEventArgs e)
{
    DoubleAnimation scaleAnimation = new DoubleAnimation
    {
        From = 1,
        To = 2,
        Duration = TimeSpan.FromSeconds(1)
    };

    scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimation);
    scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
}

এখানে, বাটনের ক্লিক করার মাধ্যমে বাটনের আকার দ্বিগুণ হয়ে যাবে।

Storyboard (স্টোরিবোর্ড)

Storyboard হলো একটি বিশেষ ধরনের ক্লাস যা একাধিক অ্যানিমেশন এবং তাদের কার্যাবলী সংবদ্ধভাবে সংগঠিত করে। এটি একাধিক অ্যানিমেশনকে একত্রে নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়। Storyboard এ আপনি একাধিক Timeline সংরক্ষণ করতে পারেন, এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে একাধিক অ্যানিমেশন পরিচালনা করতে সক্ষম।

Storyboard একটি নির্দিষ্ট Timeline এ বিভিন্ন অ্যানিমেশন একত্রে প্রয়োগ করে, যা একাধিক প্রপার্টি এবং উপাদানের জন্য একত্রে সমন্বিত অ্যানিমেশন তৈরি করতে সাহায্য করে।

Storyboard এর গঠন (Structure of Storyboard)

<Window x:Class="WPFApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Storyboard Example" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="myStoryboard">
            <DoubleAnimation
                Storyboard.TargetName="myButton"
                Storyboard.TargetProperty="Width"
                From="100" To="300" Duration="0:0:2"/>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Button Name="myButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click"/>
    </Grid>
</Window>

C# কোডে Storyboard শুরু করা:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard myStoryboard = (Storyboard)FindResource("myStoryboard");
    myStoryboard.Begin();
}

এখানে, একটি Storyboard তৈরি করা হয়েছে যা বাটনের প্রস্থ পরিবর্তন করবে। বাটনে ক্লিক করার সাথে সাথে এটি স্টোরিবোর্ডটি শুরু করবে এবং বাটনের প্রস্থ ধীরে ধীরে 100 থেকে 300 এ পরিবর্তিত হবে।

Animation এবং Storyboard এর মধ্যে পার্থক্য

Animation এবং Storyboard একত্রে ব্যবহার

আপনি Animation এবং Storyboard একসাথে ব্যবহার করে আরও জটিল এবং ডাইনামিক অ্যানিমেশন তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি একটি Storyboard ব্যবহার করতে পারেন যা একাধিক অ্যানিমেশন চালাবে, যেমন একটি বাটনের আকার পরিবর্তন, রঙ পরিবর্তন, এবং অবস্থান পরিবর্তন একই সময়ের মধ্যে।

উদাহরণ:

<Window x:Class="WPFApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Storyboard and Animation Example" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="MyStoryboard">
            <!-- Scale Animation -->
            <DoubleAnimation 
                Storyboard.TargetName="myButton" 
                Storyboard.TargetProperty="Width" 
                From="100" To="300" Duration="0:0:2"/>
            <DoubleAnimation 
                Storyboard.TargetName="myButton" 
                Storyboard.TargetProperty="Height" 
                From="50" To="100" Duration="0:0:2"/>
            <ColorAnimation 
                Storyboard.TargetName="myButton" 
                Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
                From="LightBlue" To="Red" Duration="0:0:2"/>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Button Name="myButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click"/>
    </Grid>
</Window>

C# কোড:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard myStoryboard = (Storyboard)FindResource("MyStoryboard");
    myStoryboard.Begin();
}

এখানে, বাটনটির আকার (প্রস্থ এবং উচ্চতা) এবং ব্যাকগ্রাউন্ড রঙ একই সময়ে পরিবর্তিত হবে।

সারাংশ (Summary)

• Animation: UI উপাদানগুলোর একক বৈশিষ্ট্য পরিবর্তন করতে ব্যবহৃত হয় (যেমন আকার, রঙ, অবস্থান)।
• Storyboard: একাধিক অ্যানিমেশন একত্রে এবং টাইমলাইনে পরিচালনা করার জন্য ব্যবহৃত হয়।

এই দুটি একত্রে ব্যবহৃত হলে, আপনি WPF অ্যাপ্লিকেশনে জটিল এবং ইন্টারেকটিভ অ্যানিমেশন তৈরি করতে সক্ষম হবেন।