等到WPF动画背后的代码完成
本文关键字：代码 背后 WPF 动画 等到 | 更新日期: 2023-09-27 18:18:56
我正在构建一个看起来像RoboZZle的应用程序，但我有一个问题:(答案中的编程语言并不重要:c#或VB.NET)代码中有三个动画，如下所示:
Private Sub btngo_Click(sender As Object, e As RoutedEventArgs) Handles btngo.Click
go_stright()
go_stright()
go_stright()
go_stright()
End Sub
Private Sub go_stright()
Dim da As New DoubleAnimation()
Dim tt As New TranslateTransform()
da.From = offsety
offsety -= 50
da.To = offsety
da.Duration = New Duration(TimeSpan.FromSeconds(1))
tt.BeginAnimation(TranslateTransform.YProperty, da)
End Sub
这就是问题所在:当我点击"btngo"按钮时，最后一个动画(第4个go_straight)具有动画效果。我需要等到一个动画完成后再开始下一个。
我该怎么做呢?
注意:在《roboZZle》中，用户使用他的算法将精灵移动到目的地，而精灵的移动并不是预先定义的。
我是WPF的新手。更新:我没有故事板
更新2:My XAML:
<Page x:Class="Level1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Level1" Width="794" Height="535" Loaded="Page_Loaded_1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="735*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="65"/>
</Grid.RowDefinitions>
<Button x:Name="m1" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="10,0,0,0">
<Button.Background>
<SolidColorBrush Color="White"/>
</Button.Background>
</Button>
<Button x:Name="m2" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="69,1,0,0">
<Button.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}"/>
</Button.Background>
</Button>
<Button x:Name="m3" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="128,1,0,0">
<Button.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}"/>
</Button.Background>
</Button>
<Button x:Name="m4" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="187,1,0,0">
<Button.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}"/>
</Button.Background>
</Button>
<Button x:Name="m5" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="246,0,0,0">
<Button.Background>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.ControlLightLightColorKey}}"/>
</Button.Background>
</Button>
<Button x:Name="m6" Content="" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="54" Height="54" Margin="305,0,0,0">
<Button.Background>
<SolidColorBrush Color="White"/>
</Button.Background>
</Button>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,149,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,199,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,249,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="215,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="264,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="314,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="364,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,299,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,149,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,199,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="413,249,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="264,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="314,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="50" Margin="364,100,0,0" VerticalAlignment="Top" Width="50">
<Rectangle.Stroke>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Rectangle.Stroke>
<Rectangle.Fill>
<ImageBrush ImageSource="Images/l1khoone.png" Stretch="None"/>
</Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="g1" HorizontalAlignment="Left" Height="25" Margin="228,313,0,0" VerticalAlignment="Top" Width="25">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF005DFF" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Button Content="" x:Name="btnup" HorizontalAlignment="Center" Width="54" Height="54" FlowDirection="RightToLeft" Margin="721,48,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None">
<ImageBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform CenterY="0.5" CenterX="0.5"/>
<TranslateTransform/>
</TransformGroup>
</ImageBrush.RelativeTransform>
</ImageBrush>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/up.jpg"/>
</Button.Background>
</Button>
<Button Content="" x:Name="btnleft" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,107,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None"/>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/left.jpg"/>
</Button.Background>
</Button>
<Button Content="" x:Name="btnright" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,166,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None"/>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/Right.jpg"/>
</Button.Background>
</Button>
<Button Content="" x:Name="btnf1" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,225,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None"/>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/F1.jpg"/>
</Button.Background>
</Button>
<Button Content="" x:Name="btnf2" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,284,19,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2" IsEnabled="False">
<Button.Foreground>
<ImageBrush ImageSource="Images/up.jpg" Stretch="None"/>
</Button.Foreground>
<Button.Background>
<ImageBrush ImageSource="Images/F2.jpg"/>
</Button.Background>
</Button>
<Button Content="GO!" x:Name="btngo" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,343,19,0" Background="Red" Foreground="White" FontFamily="Meiryo" FontSize="19" FontWeight="Bold" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2"/>
<Button Content="Reset" x:Name="btnreset" HorizontalAlignment="Center" Width="54" Height="54" Margin="721,402,19,0" Foreground="White" FontFamily="Meiryo" FontSize="16" FontWeight="Bold" Background="Cyan" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Top" Grid.ColumnSpan="2"/>
<Ellipse x:Name="g2" HorizontalAlignment="Left" Height="25" Margin="427,313,0,0" VerticalAlignment="Top" Width="25">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF005DFF" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="g3" HorizontalAlignment="Left" Height="25" Margin="427,112,0,0" VerticalAlignment="Top" Width="25">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FF005DFF" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Image x:Name="sprite" Margin="215,100,461,320" Source="Images/downsprite.png" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Page>
你可以在动画中添加一个已完成的事件，如果你还没有完成，你可以在动画中检查你需要制作和执行多少步骤:
Private Sub btngo_Click(sender As Object, e As RoutedEventArgs) Handles btnGo.Click
PerformNextAction(actions(0))
End Sub
Private Sub go_stright()
Dim da As New DoubleAnimation(offsety, offsety - 50, New Duration(TimeSpan.FromSeconds(1)))
offsety -= 50
Dim tt As New TranslateTransform()
AddHandler da.Completed, AddressOf AnimationCompleted
tt.BeginAnimation(TranslateTransform.YProperty, da)
End Sub
Private Sub AnimationCompleted(sender As Object, e As EventArgs)
If actionCounter < 4 Then
actionCounter += 1
PerformNextAction(actions(actionCounter))
End If
End Sub
Private Sub PerformNextAction(ByVal action As Action)
Select Case action
Case MainWindow.Action.GoStraight
go_stright()
Case MainWindow.Action.RotateLeft
rotate_left()
Case MainWindow.Action.RotateRight
rotate_right()
End Select
End Sub
别忘了这一条:
Private goStraightCounter As Integer
这个会记录你的进程(你需要调用这个方法多少次)。
编辑要回答您的评论，您可以创建一个像这样的enum:
Public Enum Action
GoStraight
RotateRight
RotateLeft
End Enum
在您链接的应用程序中，用户必须创建一个操作列表，因此您可以将该列表创建为操作列表(参见enum)。然后，不是调用" go_straight "，而是查看动作列表中的下一个条目并调用该动作的方法。
编辑2:要深入操作，创建一个操作列表:
Public actions As ObservableCollection(Of Action)
如果用户选择了5个动作，你会在你的列表中有5个枚举动作。列表可能看起来像这样例如:GoStraight, RotateLeft, GoStraight, RotateLeft, GoStraight。在animationcompleted事件中，你可以实现一个select case来检查你必须调用哪个方法，而不是仅仅调用go_straight(参见上面更新的代码)。我只是猜测了你的向左和向右方法是如何被调用的，所以你可能需要更改这些名称。
为c#中已完成的事件注册一个新的eventandler:
public MainWindow()
{
InitializeComponent();
System.Windows.Media.Animation.DoubleAnimation ani = new System.Windows.Media.Animation.DoubleAnimation();
ani.Completed += new EventHandler(ani_Completed);
}
void ani_Completed(object sender, EventArgs e)
{
throw new NotImplementedException();
}
我也有同样的问题。连接一个完成的事件和一个属性，然后使用一个方法在返回之前清除分派器线程。
// at the end of animation routine
progressTransition.Completed += new EventHandler(progressFlyOut_Completed);
progressTransition.Begin(ControlElement);
// allow animation to complete
WaitForCompletion(seconds * 2);
// completion event
private static void progressFlyOut_Completed(object sender, EventArgs e)
{
AnimationCompleted = true;
}
// wait routine
private static void WaitForCompletion(double TimeOut)
{
System.Diagnostics.Stopwatch stopwatch = new System.Diagnostics.Stopwatch();
stopwatch.Start();
while (AnimationCompleted == false)
{
if (stopwatch.Elapsed.TotalSeconds > TimeOut)
break;
Application.Current.Dispatcher.BeginInvoke(DispatcherPriority.ApplicationIdle, new Action(() => { })).Wait();
}
AnimationCompleted = false;
}