The Eighth

Continue to study silverlight

About Storyboard

First we need a test data

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition  Height="30"/>
        </Grid.RowDefinitions>
        <Rectangle x:Name="LeftRect" HorizontalAlignment="Center" VerticalAlignment="Center"
                   Height="70" Width="70" Fill="Blue" RenderTransformOrigin="0.5,0.5" >
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="RightRect" HorizontalAlignment="Center" VerticalAlignment="Center"
                   Height="70" Width="70" Fill="Red" Grid.Column="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Button x:Name="btnRun" Content="Run" Grid.Row="1" Grid.ColumnSpan="2"
                VerticalAlignment="Center" Margin="20,0,20,10"
                Click="btnRun_Click"/>
 </Grid>

Then in UserControl.Resources

<Storyboard x:Name="myStoryboard" 
                    Storyboard.TargetName="LeftRect"   // This property can set in <DoubleAnimation>
                    FillBehavior="Stop"                           // Stop when run over
                    AutoReverse="True"                         // Reverse operation to restore
                    RepeatBehavior="Forever"                 // Repeat do
                    BeginTime="00:00:02"                        // do this action after 2 seconds
                    Completed="myStoryboard_Completed">         // Can write codes in cs   
            <DoubleAnimation    
                Duration="00:00:05"  
                From="1" 
                To="0"                  
                Storyboard.TargetProperty="(UIElement.Opacity)"> // Opacity
            </DoubleAnimation>
            <DoubleAnimation  
                Duration="00:00:05"  
                By="20"
                Storyboard.TargetProperty="(Rectangle.Height)"> // Height or Width
            </DoubleAnimation>
        </Storyboard>

 

 

To create an object using scripting, see the CreateFromXAML method.

 方法

Equals、FindName (DependencyObject)、GetHost、GetValue、SetValue

 属性

AutoReverse, BeginTime, By (DoubleAnimation)、Duration (Timeline)、FillBehavior, From (DoubleAnimation)、Name (DependencyObject)、RepeatBehavior (Timeline)、SpeedRatio、Storyboard.TargetName、Storyboard.TargetProperty、To (DoubleAnimation)

 托管等效项

DoubleAnimation

 备注

动画在一段时间内更新属性值。动画的效果可能十分微小，例如将 Shape 对象左右移动几个像素；也可能十分显著，例如将对象放大到其原始大小的 200 倍，同时对其进行旋转并更改其颜色。若要创建动画，请将动画与对象的属性值关联。

DoubleAnimation 对象可创建两个目标值之间的过渡。若要设置目标值，请使用对象的 From、To 和 By 属性。下表概括了如何将 From、To 和 By 属性一起使用或单独使用来确定动画的目标值。

有关基本概念的更多信息，请参见动画概述。请注意，动画概述主题主要是为托管 API 的用户编写的，可能没有适合 JavaScript API 情形的代码示例或特定信息。

指定的属性	结果行为
From	动画从 From 属性的值继续到正在进行动画处理的属性的基值。
From 和To	动画从 From 属性的值继续到 To 属性的值。
From 和By	动画从 From 属性的值继续到 From 与 By 属性之和的值。
To	动画从进行动画处理的属性的基值或前一动画的输出值继续到 To 属性的值。
By	动画从正在进行动画处理的属性的基值或前一动画的输出值继续到该值与 By 属性的值之和。

如果同时设置了 To 和 By 属性，则 To 属性优先，而 By 属性会被忽略。

若要在两个以上的目标值之间使用其他内插方法或者进行动画处理，请使用 DoubleAnimationUsingKeyFrames 对象。

 

IN cs

 private void btnRun_Click(object sender, RoutedEventArgs e)
        {
            //myStoryboard.SetValue(Storyboard.TargetNameProperty, "RightRect");
            //Storyboard.SetTargetName(myStoryboard,"RightRect");
            //Storyboard.SetTarget(myStoryboard, RightRect);         //the same effect
            myStoryboard.Begin();
        }
       
        private void myStoryboard_Completed(object sender, EventArgs e)
        {
            myStoryboard.Stop();
        }

 

We can don't set UserControl.Resources and use cs directly

private void btnRun_Click(object sender, RoutedEventArgs e)
        {
            Storyboard newSb = new Storyboard();
            newSb.Completed += new EventHandler(newSb_Completed);
            Storyboard.SetTarget(newSb, RightRect);

            DoubleAnimation newAnim = new DoubleAnimation();
            newAnim.From = 1.0;
            newAnim.To = 0.0;
            newAnim.Duration = new Duration(new TimeSpan(0, 0, 3));
            Storyboard.SetTargetProperty(newAnim,
                new PropertyPath("(UIElment.Opacity)"));

            newSb.Children.Add(newAnim);
            newSb.Begin();

        }

        void newSb_Completed(object sender, EventArgs e)
        {
            ((Storyboard)sender).Stop();
        }