Silverlight - Hoạt hình

Hoạt ảnh cho phép bạn tạo giao diện người dùng thực sự năng động. Nó thường được sử dụng để áp dụng các hiệu ứng, chẳng hạn như các biểu tượng phát triển khi bạn di chuyển qua chúng, biểu trưng xoay tròn, văn bản cuộn vào chế độ xem, v.v.

Đôi khi, những hiệu ứng này có vẻ như quá lắt léo. Nếu được sử dụng đúng cách, hình ảnh động có thể nâng cao ứng dụng theo một số cách. Họ có thể làm cho một ứng dụng có vẻ nhanh nhạy, tự nhiên và trực quan hơn.

Ví dụ: một nút trượt vào khi bạn nhấp vào, cảm giác đó giống như một nút thực, vật lý, chứ không chỉ là một hình chữ nhật màu xám khác. Hoạt ảnh cũng có thể thu hút sự chú ý đến các yếu tố quan trọng và hướng dẫn người dùng chuyển đổi sang nội dung mới.

Cách tiếp cận của Silverlight đối với hoạt ảnh là mang tính khai báo thay vì tập trung vào chuỗi hoạt ảnh khung hình.

Xác định hoạt ảnh

Hoạt ảnh thường được xác định trong các phần tài nguyên. Trên thực tế, chúng thường được bao bọc trong một yếu tố bảng câu chuyện, chúng ta sẽ xem chi tiết ngay sau đây.

Nó cung cấp một phương thức Begin (), vì vậy hoạt ảnh có thể được gọi từ mã.
Hoạt ảnh cũng có thể được đặt bên trong các phần tử trạng thái trực quan trong một mẫu điều khiển.

Hoạt ảnh khai báo

Hoạt ảnh trong Silverlight mang tính chất khai báo. Họ mô tả những gì muốn xảy ra. Hãy để Silverlight tìm cách biến điều đó thành hiện thực. Vì vậy, các hoạt ảnh thường tuân theo mẫu mà chúng tôi cho Silverlight biết chúng tôi muốn thay đổi.

Đây luôn là một số thuộc tính trên một số phần tử được đặt tên, tức là TargetName và TargetProperty.

<DoubleAnimation 
   Storyboard.TargetName = "myRectangle" 
   Storyboard.TargetProperty = "Opacity" 
   From = "0" To = "1" 
   Duration = "0:0:5"  
/>

Chúng tôi nói rằng chúng tôi muốn thuộc tính đó thay đổi như thế nào trong trường hợp này, chúng tôi đang thay đổi độ mờ từ giá trị 0 thành giá trị bằng một. Nói cách khác, chúng tôi muốn các phần tử mục tiêu mờ dần từ mờ sang trong suốt.
Cuối cùng, chúng tôi nói rằng chúng tôi muốn điều này mất bao lâu, trong trường hợp này sẽ mất năm giây.
tầm quan trọng của double trong hoạt ảnh kép này là nó nhắm mục tiêu đến một thuộc tính có kiểu double, vì vậy giá trị dấu phẩy động.
Nếu bạn muốn tạo hoạt ảnh cho một thuộc tính đại diện cho một màu, bạn hãy sử dụng hoạt ảnh màu để thay thế.

Chúng ta hãy xem một ví dụ đơn giản về hoạt ảnh kép. Dưới đây là mã XAML, trong đó hai nút, một hình chữ nhật và hai bảng phân cảnh được thêm vào.

<UserControl x:Class = "DoubleAnimationExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "fadeDown"> 
         <DoubleAnimation  
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "1" To = "0" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
      <Storyboard x:Name = "fadeUp"> 
         <DoubleAnimation 
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "0" To = "1" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
   </UserControl.Resources> 
	
   <Grid x:Name = "LayoutRoot"> 
      <Rectangle x:Name = "myRectangle" 
         Fill = "Blue" Width = "300" Height = "100"  
         HorizontalAlignment = "Center" 
         VerticalAlignment = "Top" Margin = "0,30" /> 
			
      <Button x:Name = "fadeUpButton" Content = "Up" Width = "80"  
         Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,140,0,0"  
         Click = "fadeUpButton_Click" /> 
			
      <Button x:Name = "fadeDownButton" Content = "Down"  
         Width = "80" Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,180,0,0"  
         Click = "fadeDownButton_Click" />
			
   </Grid>
	
</UserControl>

Đây là cách triển khai cho các sự kiện khác nhau trong C #.

using System.Windows; 
using System.Windows.Controls;  

namespace DoubleAnimationExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void fadeUpButton_Click(object sender, RoutedEventArgs e) { 
         fadeUp.Begin(); 
      }
	  
      private void fadeDownButton_Click(object sender, RoutedEventArgs e) { 
         fadeDown.Begin(); 
      } 
   } 
}

Khi đoạn mã trên được biên dịch và thực thi, bạn sẽ thấy kết quả sau.

Lặp lại và đảo ngược

Hoạt ảnh cung cấp một số thuộc tính để tự động lặp lại và tất cả các hoạt ảnh đảo ngược.

Nếu bạn đặt thuộc tính hành vi lặp lại thành một thời gian spam, hoạt ảnh sẽ lặp lại lặp lại cho đến khi hết khoảng thời gian được chỉ định hoặc bạn có thể cho nó biết bạn muốn nó lặp lại bao nhiêu lần.
Điều này hỗ trợ dấu thập phân để bạn có thể lặp lại bốn lần rưỡi.
Bạn có thể lặp lại mãi mãi và bạn cũng có thể cho hoạt ảnh biết rằng sau khi kết thúc, nó sẽ chạy ngược lại từ đầu.

Hoạt ảnh khung chính

Thường thì một hình động đơn giản từ A đến B hơi quá đơn giản. Ví dụ: bạn muốn tạo hoạt ảnh cho một quả bóng nảy lên khỏi mặt đất. Đây không phải là một điểm đơn giản để chuyển động điểm. Quả bóng rơi xuống, tăng tốc dần dần rồi đổi hướng khi chạm đáy. Chạy chậm một lần nữa khi nó quay trở lại đầu hành trình.

Hãy để chúng tôi xem xét một ví dụ đơn giản về Key Frame animation.

Dưới đây là mã XAML, chứa một hình elip và hoạt ảnh kép với các khung hình chính.

<UserControl x:Class = "LinearKeyFrames.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" 
   Width = "400" Height = "300">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "ballAnim" SpeedRatio = "0.2"> 
         <DoubleAnimation From = "0" Duration = "00:00:03" To = "96" 
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Left)" />
				
         <DoubleAnimationUsingKeyFrames  
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Top)"> 

            <LinearDoubleKeyFrame KeyTime = "00:00:00"   Value = "0"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" /> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:03"   Value = "0"/> 
				
         </DoubleAnimationUsingKeyFrames> 
			
      </Storyboard>
		
   </UserControl.Resources>
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas> 
         <Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" /> 
      </Canvas> 
   </Grid> 
	
</UserControl>

Đây là cách triển khai cho mouse left sự kiện nút xuống, sẽ bắt đầu hoạt ảnh khi người dùng nhấn nút trái chuột xuống trên trang web.

using System.Windows.Controls; 
using System.Windows.Input; 
 
namespace LinearKeyFrames { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent();  
         this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown); 
      } 
	  
      void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { 
         ballAnim.Begin(); 
      } 
   } 
}

Khi đoạn mã trên được biên dịch và thực thi, bạn sẽ thấy kết quả sau.

Khi bạn nhấp vào trang web, bạn sẽ thấy rằng quả bóng bắt đầu di chuyển.