Translation of the Animation section in Silverlight2 beta2 Document (2)

Implement the fade-in and fade-out effect of a UIElement in the view

This example demonstrates that in SilverLight, the rectangle fades in and out of the view by applying an animation to the attributes of the rectangle. It uses DoubleAnimation, an animation that can generate values of the Double type. by adjusting the Opacity attribute of the rectangle, We can fade in and out the rectangle.
The first part of the example is to create a rectangle element and display it in StackPanel.

XAML code:

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

 

To create an animation and apply it to the OPacity attribute of the rectangle, perform the following steps:
Create a DoubleAnimation
Create a StoryBoard
Start StoryBoard to respond to events

These steps will be described in detail below

Create a DoubleAnimation
Since the Opacity attribute is Double type, we need an animation that can generate Double type values. DoubleAnimation is an animation of this type. It can create a transition between two double values. You can specify the start value of DoubleAnimation by setting the From attribute, and specify its end value by setting the Top attribute.
1. When the Opacity value is 1.0, the object will be completely visible. On the contrary, when its value is 0.0, the object will be completely invisible. To transition opacity From 1.0 to 0.0, you need to set its From attribute value to 1.0To attribute value to 0.0.

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

2. Specify a Duration value for the created Aniamtion. This Duration value specifies the time required for an animation to change from the starting value to the target value. In the following example, the animation Duration value is set to 1 second.

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

3. you have created an Animation to transition an opaque attribute from 1.0 to 0.0, so that the target element is gradually changed from completely visible to completely invisible, to make this element disappear and re-display in the view, we set the AutoReverse attribute to True. To make the animation effect uncertain repetition, set the Repeat attribute to the value Forever.

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

Create a StoryBoard)
To attach an animation to an object, you need to create a storyboard and use the TargeName and TargetProperty attributes (attached Property) to specify which object and which attribute on the object to apply an animation.
1. Create a storyboard and add Animation as the child of the storyboard.

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

Although only one animation is added in this example. It does not mean that only one animation can be created under the story board. We can add multiple animations below.

2. This storyboard needs to know which object has been animated. Use the TargetName appended Property to specify which object to apply an animation. In the following code, we set the TargetName attribute value of DoubleAnimation to myAnimatedRectangle, which is the name of the target object to be animated.

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

3. Use the TargetProperty additional property (attached property) to specify the attributes for applying an animation. In the following code, we set its value to the Opacity attribute of Rectangle.

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

Associate animations with events
So far, you have developed the animation's target object and target attributes, as well as the animation's performance. You also need to specify the animation's start time. You can use events to complete this task.
1. Create a StoryBoard as a Resource: Define the StoryBoard under the Resource tag, so that you can easily access the StoryBoard from the code and interact with it. For example, start, end, stop, and continue the story board. The following Markup Language declares StoryBoard in a Resource block of the StackPanel object. Note: You can declare the StoryBoard in any Resource block on the premise that the Resource block and the target object to be animated are in a range.

<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 ="
AutoReverse = "True" RepeatBehavior = "Forever"/>
</Storyboard>
</StackPanel. Resources>
<Rectangle
X: Name = "MyAnimatedRectangle"
Width = "100" Height = "100" Fill = "Blue"/>
</StackPanel>

2. append an event on the element: we have a great deal of events that can be used to start an animation, including mouse-related events, such as MouseLeftButtonDown. The trigger time of this event is when the user electric an object, for another example, the Loaded event is triggered when the object is first Loaded. In this example, we use MouseLeftButtonDown to start the storyboard. When a user clicks a rectangle, this event is triggered.

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

3. Control the animation in the event processing function: StoryBoard exposes several methods. Yes, you can replay the animation in the StoryBoard. These methods include Begin, stop, pause, and Resume. In the following example, when the user clicks this rectangle and in the event processing function of MouseLeftButtonDown, we will use the Begin method to start the animation.

// When the user clicks the Rectangle, the animation
// Begins.
Public void Mouse_Clicked (object sender, MouseEventArgs e)
{
MyStoryboard. Begin ();
}

Complete code
XAML

<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 ="
AutoReverse = "True"
RepeatBehavior = "Forever"/>
</Storyboard>
</StackPanel. Resources>

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

</StackPanel>

C # code

// When the user clicks the Rectangle, the animation
// Begins.
Public void Mouse_Clicked (object sender, MouseEventArgs e)
{
MyStoryboard. Begin ();
}