WPF では、単純に Line コントロールをアニメーション化できます。
<Canvas>
<Line x:Name="line"
X2="{Binding X1, RelativeSource={RelativeSource Mode=Self}}"
Y2="{Binding ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}}" Stroke="Red" StrokeThickness="4">
</Line>
</Canvas>
次のようなメソッドでアニメーションを作成して開始します。
private void StartAnimation()
{
var animation = new DoubleAnimation
{
To = ActualWidth, // width of the window
Duration = TimeSpan.FromSeconds(ActualWidth / 32),
RepeatBehavior = RepeatBehavior.Forever
};
line.BeginAnimation(Line.X1Property, animation);
}
X1
Line のプロパティをアニメーション化してプロパティをX2
バインディングに追従させる代わりに、Line の RenderTransform をアニメーション化することもできます。
<Canvas>
<Line Y2="{Binding ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Canvas}}" Stroke="Red" StrokeThickness="4">
<Line.RenderTransform>
<TranslateTransform x:Name="transform"/>
</Line.RenderTransform>
</Line>
</Canvas>
StartAnimation メソッドは次のようになります。
private void StartAnimation()
{
var animation = new DoubleAnimation
{
To = ActualWidth, // width of the window
Duration = TimeSpan.FromSeconds(ActualWidth / 32),
RepeatBehavior = RepeatBehavior.Forever
};
transform.BeginAnimation(TranslateTransform.XProperty, animation);
}