Storyboard

Silverlight

通过时间线控制动画，并为其子动画提供对象和属性目标信息。

<Storyboard   ...>

  oneOrMoreChildTimelines

</Storyboard>

XAML 值

值	描述
oneOrMoreChildTimelines	从 Timeline 派生的以下对象元素中的一个或多个：Storyboard、ColorAnimation、ColorAnimationUsingKeyFrames、DoubleAnimation、DoubleAnimationUsingKeyFrames、PointAnimation或 PointAnimationUsingKeyFrames。在运行时访问 Children 属性时，此处定义的对象元素成为 Children 集合的成员。

从微软官网上定义，我们可以知道这个Storyborad正是实现动画的一个重要的元素。

备注

在对象加载或要启动、暂停、继续和停止动画时，可以使用 Storyboard 对象的交互式方法来自动启动演示图板。

Storyboard 是 Resources 属性唯一支持的资源类型。

从微软官网上我们得到这个东西需要可以定义一些诶设置在Canvas.Resources节点下，官网给出了一个Rectangle颜色变化的一个例子：

 <Canvas

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

   <Rectangle

     x:Name="MyAnimatedRectangle"

     Width="100"

     Height="100"

     Fill="Blue">

     <Rectangle.Triggers>

       <!-- Animates the rectangle's opacity. -->

       <EventTrigger RoutedEvent="Rectangle.Loaded">

         <BeginStoryboard>

           <Storyboard>

             <DoubleAnimation

               Storyboard.TargetName="MyAnimatedRectangle"

               Storyboard.TargetProperty="Opacity"

               From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />

           </Storyboard>

         </BeginStoryboard>

       </EventTrigger>

     </Rectangle.Triggers>

   </Rectangle>

 </Canvas>

示例解读：

在Canvas下有一个长100px宽100px的的Rectangle对象，在Rectangle的Targegers节点下，定义了一个动画规则，该动画是用来修改Rectangle的透明度（Opacity）属性的，

设置透明度在5秒内按照DoubleAnimation的方式从1.0变化到0.0，且不重复播放。

有了这样的一个例子，我们知道我们要实现Line动态显示效果，就必不可少要用到的对象有Storyboard对象，且要在该对象下制定一个修改X2,Y2的方式（是按照DoubleAnnimation还是ColorAnimation，还是其他方式）

下边我们定一个额Line让他初始化的点在500，500处，当开始启动播放时，从500,500一直画到（200，200)处：

 private void myButton_Click(object sender, RoutedEventArgs e)

        {

            Line myLine = new Line();

            myLine.X1 = ;

            myLine.Y1 = ;

            myLine.X2 = ;

            myLine.Y2 = ;

            myLine.Stroke = new SolidColorBrush(Color.FromArgb(, , , ));

            myLine.Fill = new SolidColorBrush(Color.FromArgb(, , , ));

            // 把矩形加入到Canvas中

            this.cnsDesignerContainer.Children.Add(myLine);

            // 创建二个double型的动画，并设定播放时间为2秒

            Duration duration = new Duration(TimeSpan.FromSeconds());

            DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();

            DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();

            myDoubleAnimation1.Duration = duration;

            myDoubleAnimation2.Duration = duration;

            // 创建故事版，并加入上面的二个double型动画

            Storyboard sb = new Storyboard();

            sb.Duration = duration;

            sb.Children.Add(myDoubleAnimation1);

            sb.Children.Add(myDoubleAnimation2);

            // 设置动画的Target目标值

            Storyboard.SetTarget(myDoubleAnimation1, myLine);

            Storyboard.SetTarget(myDoubleAnimation2, myLine);

            // 设置动画的变化属性

            Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(X2)"));

            Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Y2)"));

            myDoubleAnimation1.To = ;

            myDoubleAnimation2.To = ;

            if (!cnsDesignerContainer.Resources.Contains("unique_id"))

            {

                // 将动画版加入Canvas资源,注意：这里的unique_id必须是资源中没有的唯一键

                cnsDesignerContainer.Resources.Add("unique_id", sb);

                sb.Completed += new EventHandler(sb_Completed);

                // 播放

                sb.Begin();

            }

            else

            {

                sb = null;

                cnsDesignerContainer.Children.Remove(myLine);

            }

        }

        void sb_Completed(object sender, EventArgs e)

        {

            // 播放完成后，移除资源，否则再次点击时将报错

            cnsDesignerContainer.Resources.Remove("unique_id");

        }

显示的效果正是画线的动画显示方式。

秒客网

Silverlight动画显示Line线

Storyboard

相关文章