Storyboard故事版

**

Storyboard故事版

**

开发工具与关键技术：Visual Studio 2015、WPF

作者：黄元进

撰写时间： 2019年6月25日

首先来了解一下故事版：

1、Storyboard(故事板)是动画的基本单元

2、Storyboard用于控制动画的播放，暂停，停止等操作

3、需要指定TargetName和TargetProperty属性

4、动画类型声明过之后，需要使用EventTrigger（事件触发器）触发
然后用Storyboard(故事板)来做了一个例子，见下用XAML代码实现：

<Window x:Class="Wpf1.Window5"

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

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

       
Title="Window5" Height="300" Width="300"
Name="win" WindowStartupLocation="CenterScreen">

   
<Window.Triggers>

       
<!--BeginStoryboard：要在EventTrigger中触发调用，RoutedEvent是响应的事件-->

       
<EventTrigger RoutedEvent="Window.Loaded"
SourceName="win">

           
<EventTrigger.Actions>

               
<BeginStoryboard>

                   
<Storyboard>

                        <DoubleAnimation
From="1" To="100" RepeatBehavior="Forever"
Duration="0:0:5" Storyboard.TargetName="Line1"
Storyboard.TargetProperty="1"/>

                        <DoubleAnimation
From="1" To="100" RepeatBehavior="Forever"
Duration="0:0:5" Storyboard.TargetName="Line2"
Storyboard.TargetProperty="2"/>

                        <DoubleAnimation
From="1" To="100" RepeatBehavior="Forever"
Duration="0:0:5" Storyboard.TargetName="Line3"
Storyboard.TargetProperty="3"/>

                   
</Storyboard>

               
</BeginStoryboard>

           
</EventTrigger.Actions>

       
</EventTrigger>

   
</Window.Triggers>

    <!--画布-->

    <Canvas
Background="AliceBlue" x:Name="c" Margin="0,0,-6.4,-1.6">

       
<Line Name="Line1" X1="0" Y1="0"
X2="0" Y2="200" Stroke="Black"
StrokeDashArray="2,1" StrokeThickness="4"
Canvas.Left="152" Canvas.Top="34"
RenderTransformOrigin="0.5,0.5" Width="2">

           
<Line.RenderTransform>

                <TransformGroup>

                   
<ScaleTransform ScaleY="1.139"
ScaleX="0.878"/>

                   
<SkewTransform AngleX="16.321"/>

                   
<RotateTransform Angle="-38.047"/>

                   
<TranslateTransform/>

                </TransformGroup>

           
</Line.RenderTransform>

       
</Line>

       
<Line Name="Line2" X1="0" Y1="0"
X2="0" Y2="200" Stroke="Black"
StrokeDashArray="2,1" StrokeThickness="4"
Canvas.Left="139" Canvas.Top="30"
RenderTransformOrigin="0.5,0.5" Width="2">

           
<Line.RenderTransform>

               
<TransformGroup>

                   
<ScaleTransform ScaleY="1.14" ScaleX="0.877"/>

                   
<SkewTransform AngleY="-15.914"/>

                   
<RotateTransform Angle="-133.478"/>

                    <TranslateTransform/>

               
</TransformGroup>

           
</Line.RenderTransform>

       
</Line>

       
<Path Name="Line3" Stroke="White"
StrokeThickness="5" Canvas.Left="23.3"
Stretch="Fill" Width="254.2" Height="225.4" Canvas.Top="24.9">

           
<Path.Data>

               
<EllipseGeometry Center="100,100" RadiusX="50"
RadiusY="50"/>

           
</Path.Data>

       
</Path>

   
</Canvas>

</Window>

实现效果：