**
ストーリーボードストーリーボード
**
开发工具与关键技术:Visual Studio 2015、WPF
作者:黄元进
撰写时间: 2019年6月25日
まずは、ストーリーバージョンを見てみましょう:
図1は、ストーリーボード(絵コンテ)は、映画の基本単位であります
図2に示すように、アニメーション再生コントロール用のストーリーボード、一時停止、停止、等
3、あなたはプロパティTargetNameはとTargetPropertyを指定する必要があります
4は、あなたがEventTrigger(イベントトリガ)がトリガー必要な、アニメーションの種類の後に宣言
下の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>
結果を実現: