WPF 制作三个点从左到右过渡隐藏显示

 

Code:

<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Storyboard x:Key="storyboard1">
<!--这个效果是从左到中间快，从中间到右边快.-->
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0"
Storyboard.TargetName="t1"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="100" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="200" KeySpline="0,1,1,1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0"
Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="(Ellipse.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1" KeySpline="0,1,1,1"/>
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0.4"
Storyboard.TargetName="t2"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="100" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="200" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0.4"
Storyboard.TargetName="ellipse2"
Storyboard.TargetProperty="(Ellipse.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0.6"
Storyboard.TargetName="t3"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="100" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="200" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
RepeatBehavior="Forever"
BeginTime="0:0:0.6"
Storyboard.TargetName="ellipse3"
Storyboard.TargetProperty="(Ellipse.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="1" KeySpline="0,1,1,1" />
<SplineDoubleKeyFrame KeyTime="0:0:4" Value="0" KeySpline="0,1,1,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid Width="200" Height="200">
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource storyboard1}"/>
</EventTrigger>
</Grid.Triggers>
<Border>
<Ellipse x:Name="ellipse1" Opacity="0" Fill="Red" Width="10" Height="10" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="t1"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Border>
<Ellipse x:Name="ellipse2" Opacity="0" Fill="Green" Width="10" Height="10" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="t2"/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Border>
<Ellipse x:Name="ellipse3" Opacity="0" Fill="Blue" Width="10" Height="10" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="t3"/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
</Grid>
</Window>