Giới thiệu về Hoạt Ảnh trong Silverlight

Silverlight cung cấp một nền tảng mạnh mẽ để xây dựng các ứng dụng web phong phú, trong đó hoạt ảnh đóng vai trò thiết yếu để tạo ra trải nghiệm người dùng sống động. Để thực hiện các hiệu ứng chuyển động, Silverlight hỗ trợ hai phương pháp chính: định nghĩa khai báo trong XAML và tạo lập trình bằng C#. Cả hai cách tiếp cận đều sử dụng đối tượng Storyboard để điều phối và quản lý các chuỗi hoạt ảnh phức tạp.

1. Định nghĩa Hoạt Ảnh bằng XAML

Phương pháp này cho phép bạn mô tả hoàn toàn các hoạt ảnh trực tiếp trong tệp XAML của ứng dụng. Đây là cách tiếp cận ưu tiên cho các hoạt ảnh tĩnh hoặc các hoạt ảnh đã biết trước, giúp tách biệt rõ ràng giữa thiết kế giao diện và logic hoạt động.

1.1. Khai báo Storyboard trong XAML

Một Storyboard thường được định nghĩa trong phần tài nguyên của một điều khiển người dùng (UserControl.Resources) hoặc cửa sổ. Ví dụ sau đây minh họa cách tạo một Storyboard tên là RectMovementAnim. Hoạt ảnh này sẽ di chuyển một hình chữ nhật trên trục X và Y sử dụng các khung hình chính (KeyFrames).

<UserControl.Resources>
    <Storyboard x:Name="RectMovementAnim">
        <!-- Hoạt ảnh di chuyển trên trục X -->
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                     Storyboard.TargetName="animatedRect"
                                     Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            <SplineDoubleKeyFrame KeyTime="00:00:01" Value="150"/>
        </DoubleAnimationUsingKeyFrames>
        <!-- Hoạt ảnh di chuyển trên trục Y -->
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                     Storyboard.TargetName="animatedRect"
                                     Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            <SplineDoubleKeyFrame KeyTime="00:00:01" Value="15"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="mainLayout" Background="White">
    <Rectangle Height="70" Width="90" Fill="#FFADD8E6" Stroke="Black"
               HorizontalAlignment="Left" Margin="100,50,0,0" VerticalAlignment="Top"
               x:Name="animatedRect" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Rectangle.RenderTransform>
    </Rectangle>
    <Button x:Name="activateButton" Content="Kích hoạt Hoạt Ảnh XAML"
            HorizontalAlignment="Left" Margin="100,0,0,100" VerticalAlignment="Bottom"
            Height="40" Width="180"/>
</Grid>

1.2. Kích hoạt Hoạt Ảnh từ Code-behind

Sau khi đã định nghĩa Storyboard trong XAML, việc kích hoạt nó từ mã C# rất đơn giản. Bạn chỉ cần truy cập đối tượng Storyboard thông qua tên đã gán và gọi phương thức Begin().

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

public partial class MyPage : UserControl
{
    public MyPage()
    {
        InitializeComponent();
        activateButton.Click += OnActivateButtonClick;
    }

    private void OnActivateButtonClick(object sender, RoutedEventArgs e)
    {
        RectMovementAnim.Begin();
        // Bạn có thể thiết lập hành vi lặp lại cho Storyboard,
        // ví dụ: RectMovementAnim.RepeatBehavior = RepeatBehavior.Forever;
        // hoặc lặp một số lần cụ thể: RectMovementAnim.RepeatBehavior = new RepeatBehavior(3);
    }
}

Thuộc tính RepeatBehavior cho phép bạn điều khiển số lần hoạt ảnh lặp lại, từ lặp vô hạn (RepeatBehavior.Forever) đến một số lần cụ thể.

2. Tạo Hoạt Ảnh bằng C#

Trong một số trường hợp, việc tạo và điều khiển hoạt ảnh trực tiếp trong C# sẽ mang lại sự linh hoạt cao hơn, đặc biệt khi các tham số hoạt ảnh cần được tính toán động hoặc phụ thuộc vào logic ứng dụng.

2.1. Chuẩn bị các phần tử UI trong XAML

Để làm việc với hoạt ảnh được tạo bằng C#, chúng ta vẫn cần các phần tử UI cơ bản được khai báo trong XAML để làm mục tiêu cho các hiệu ứng.

<Grid x:Name="rootGrid" Background="LightGray">
    <Rectangle Height="80" Width="100" Fill="#FF98FB98" Stroke="DarkGreen"
               HorizontalAlignment="Left" Margin="250,50,0,0" VerticalAlignment="Top"
               x:Name="dynamicRect" RenderTransformOrigin="0.5,0.5" />
    <Button x:Name="codeAnimateButton" Content="Kích hoạt Hoạt Ảnh C#"
            HorizontalAlignment="Left" Margin="250,0,0,100" VerticalAlignment="Bottom"
            Height="40" Width="180"/>
</Grid>

2.2. Xây dựng Hoạt Ảnh trong C#

Ví dụ sau đây minh họa cách tạo một hoạt ảnh thay đổi độ mờ (Opacity) của hình chữ nhật khi nhấn nút, hoàn toàn bằng C#.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

public partial class MyPage : UserControl
{
    public MyPage()
    {
        InitializeComponent();
        codeAnimateButton.Click += OnCodeAnimateClick;
    }

    private void OnCodeAnimateClick(object sender, RoutedEventArgs e)
    {
        // Khởi tạo một hoạt ảnh DoubleAnimation để thay đổi giá trị số (độ mờ)
        DoubleAnimation opacityAnimation = new DoubleAnimation();
        opacityAnimation.From = 1.0; // Bắt đầu từ độ mờ đầy đủ (trong suốt)
        opacityAnimation.To = 0.2;   // Kết thúc ở độ mờ 20% (hơi mờ)
        opacityAnimation.Duration = new Duration(TimeSpan.FromSeconds(2)); // Hoạt ảnh kéo dài 2 giây
        opacityAnimation.AutoReverse = true; // Hoạt ảnh sẽ tự động đảo ngược sau khi hoàn thành
        opacityAnimation.RepeatBehavior = RepeatBehavior.Forever; // Lặp lại hoạt ảnh vô hạn

        // Tạo một Storyboard để chứa và điều khiển hoạt ảnh đã tạo
        Storyboard dynamicStoryboard = new Storyboard();

        // Gán đối tượng mục tiêu cho hoạt ảnh (hình chữ nhật "dynamicRect")
        Storyboard.SetTarget(opacityAnimation, dynamicRect);

        // Gán thuộc tính mục tiêu mà hoạt ảnh sẽ tác động (ở đây là thuộc tính Opacity của UIElement)
        Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath("(UIElement.Opacity)"));

        // Thêm hoạt ảnh vào Storyboard
        dynamicStoryboard.Children.Add(opacityAnimation);

        // Bắt đầu phát Storyboard, kích hoạt hoạt ảnh
        dynamicStoryboard.Begin();
    }
}