»-(¯¤(¯`º» 3ndL3ss L(@)v3 «º´¯)¤¯)-«

1. Giới thiệu về Hiệu ứng
   
2. Making a UIElement Fade In and Out of View
   
3. Start, Stop, Pause, and Resume một đối tượng Animation
   
4. Quản lý thời gian bắt đầu Hiệu ứng
   
5. Tạo ra một Hiệu ứng trong Mã Thủ tục (Creating an Animation in Procedural Code )
   
6. Các loại Hiệu ứng
   
7. Ứng dụng một loại Hiệu ứng cho một Property
   
8. Các biến đổi Hiệu ứng
   
9. Điều gì sẽ xảy ra sau khi một Hiệu ứng kết thúc?
   

Chú ý:
Trong Silverlight, bạn có thể thực hiện những hiệu ứng đơn giản chỉ trên những thuộc tính mà những giá trị của chúng thuộc loại Double, Color, hoặc Point. Thêm vào đó, bạn có thể tạo hiệu ứng cho các thuộc tính của những loại khác bằng cách sử dụng ObjectAnimationUsingKeyFrames, nhưng điều này được thực hiện sử dụng phép nội suy riêng rẽ (nhảy từ giá trị này sang giá trị khác), đó không phải là cái mà hầu hết mọi người coi là hiệu ứng thật.

<StackPanel>
<Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle"
              Width="100" Height="100" Fill="Blue" /> 
</StackPanel>

<DoubleAnimation From="1.0" To="0.0"  />

<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" />

<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" 
  AutoReverse="True" RepeatBehavior="Forever"/>

<Storyboard>
  <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

<Storyboard>
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

 <Storyboard>
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle" 
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1" 
    AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

<StackPanel>   
      <StackPanel.Resources>     
        <!-- Animates the rectangle's opacity. -->     
         <Storyboard x:Name="myStoryboard">       
           <DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity"  From="1.0" To="0.0" Duration="0:0:1"  AutoReverse="True" RepeatBehavior="Forever" />     
         </Storyboard>   
        </StackPanel.Resources>   
     <Rectangle  x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" />
 </StackPanel>

 <Rectangle MouseLeftButtonDown="Mouse_Clicked"
  x:Name="MyAnimatedRectangle"
  Width="100" Height="100" Fill="Blue" />

 // When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}

  <UserControl x:Class="animation_ovw_intro.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Width="400" Height="300">
  <StackPanel>
    <StackPanel.Resources>
      <!-- Animates the rectangle's opacity. -->
      <Storyboard x:Name="myStoryboard">
        <DoubleAnimation
          Storyboard.TargetName="MyAnimatedRectangle"
          Storyboard.TargetProperty="Opacity"
          From="1.0" To="0.0" Duration="0:0:1" 
          AutoReverse="True" 
          RepeatBehavior="Forever" />
       </Storyboard>
    </StackPanel.Resources>
    <Rectangle MouseLeftButtonDown="Mouse_Clicked"
      x:Name="MyAnimatedRectangle"
      Width="100" Height="100" Fill="Blue" />
  </StackPanel>
</UserControl>

 // When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}

<UserControl x:Class="interactive_animation.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Width="400" Height="300">
  <Canvas>
    <Canvas.Resources>
      <Storyboard x:Name="myStoryboard">
        <!-- Animate the center point of the ellipse. -->
        <PointAnimation Storyboard.TargetProperty="Center"
          Storyboard.TargetName="MyAnimatedEllipseGeometry"
          Duration="0:0:5"
          From="20,200"
          To="400,100"
          RepeatBehavior="Forever" />
      </Storyboard>
    </Canvas.Resources>
    <Path Fill="Blue">
      <Path.Data>
        <!-- Describes an ellipse. -->
        <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
          Center="20,20" RadiusX="15" RadiusY="15" />
      </Path.Data>
    </Path>
    <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
      <!-- Button that begins the animation. -->
      <Button Click="Animation_Begin"
        Width="65" Height="30" Margin="2" Content="Begin" />
      <!-- Button that pauses the animation. -->
      <Button Click="Animation_Pause"
        Width="65" Height="30" Margin="2" Content="Pause" />
      <!-- Button that resumes the animation. -->
      <Button Click="Animation_Resume"
        Width="65" Height="30" Margin="2" Content="Resume" />
      <!-- Button that stops the animation. Stopping the animation returns 
        the ellipse to its original location. -->
      <Button Click="Animation_Stop"
        Width="65" Height="30" Margin="2" Content="Stop" />
    </StackPanel>
  </Canvas>
</UserControl>

private void Animation_Begin(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
    myStoryboard.Stop();
}

<StackPanel>
    <StackPanel.Resources>
        <!-- Storyboard starts 2 seconds after its Begin
             method is called. -->
        <Storyboard BeginTime="0:0:2" x:Name="myStoryboard">
            <!-- Animates the rectangle's width. No 
                 BeginTime specified so by default begins 
                 as soon as it's parent (the Storyboard)
                 begins. -->
            <DoubleAnimation 
              Storyboard.TargetName="MyAnimatedRectangle" 
              Storyboard.TargetProperty="Width"
              To="300" Duration="0:0:1" />
            <!-- Animates the rectangle's opacity. A BeginTime
                 of 3 seconds specified so begins three seconds
                 after the Storyboard begins (total of 5 seconds)-->
            <DoubleAnimation BeginTime="0:0:3"
              Storyboard.TargetName="MyAnimatedRectangle" 
              Storyboard.TargetProperty="Opacity"
              To="0" Duration="0:0:1" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="MyAnimatedRectangle" 
               Loaded="Start_Animation"
               Width="100" Height="100" Fill="Blue" />
</StackPanel>

// Start the animation when the object loads.
private void Start_Animation(object sender, EventArgs e)
{
    myStoryboard.Begin();
}

private void Create_And_Run_Animation(object sender, EventArgs e)
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 200;
    myRectangle.Height = 200;
    Color myColor = Color.FromArgb(255, 255, 0, 0);
    SolidColorBrush myBrush = new SolidColorBrush();
    myBrush.Color = myColor;
    myRectangle.Fill = myBrush;
    // Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle);
    // Create a duration of 2 seconds.
    Duration duration = new Duration(TimeSpan.FromSeconds(2));
    // Create two DoubleAnimations and set their properties.
    DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
    DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
    myDoubleAnimation1.Duration = duration;
    myDoubleAnimation2.Duration = duration;
    Storyboard sb = new Storyboard();
    sb.Duration = duration;
    sb.Children.Add(myDoubleAnimation1);
    sb.Children.Add(myDoubleAnimation2);
    Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
    Storyboard.SetTarget(myDoubleAnimation2, myRectangle);
    // Set the attached properties of Canvas.Left and Canvas.Top
    // to be the target properties of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
    Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));
    myDoubleAnimation1.To = 200;
    myDoubleAnimation2.To = 200;
    // Make the Storyboard a resource.
    LayoutRoot.Resources.Add("unique_id", sb);
    // Begin the animation.
    sb.Begin();
}