要了解动画和用户界面,我制作了一个基本的WPF / C#应用程序,用户选择要显示的车辆数量,然后这些车辆(即不同车辆的图像)出现在画布中并四处移动。
WPF非常简单:
<Grid>
<Canvas x:Name="MenuTabCanvas" Visibility="Visible">
<Label x:Name="AnimateDemo" Content="Animate!" HorizontalAlignment="Left" VerticalAlignment="Top" Width="104" Background="#25A0DA" Foreground="White" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Cursor="Hand" MouseDown="AnimateGrid" Canvas.Left="640" Canvas.Top="87"/>
<Canvas x:Name="AnimationCanvas" Canvas.Top="150" Canvas.Left="224" Width="814" Height="489">
</Canvas>
</Grid>
我使用this post中描述的方法开始使用淡入淡出动画,但效果很好。然后我尝试了如下所示的translatetransform,将淡化代码留在注释中,图像出现但没有任何动作:
private void AnimateGrid(object sender, EventArgs e)
{
int NumberOfVehicles = 5;
var sb = new Storyboard();
for (int i = 0; i < NumberOfVehicles; i++)
{
//create & add the images to our target canvas
Image Img = getRandomVehicleImage(); //returns image of vehicle
AnimationCanvas.Children.Add(Img);
Canvas.SetTop(Img, 30 + 60 * i); //position image w/in canvas
Canvas.SetLeft(Img, 30 + 80 * i);
//add an animation
DoubleAnimation myAnimation = new DoubleAnimation()
{
// From = 0,
To = 150,
Duration = TimeSpan.FromSeconds(2),
};
Storyboard.SetTarget(myAnimation, Img);
// Storyboard.SetTargetProperty(myAnimation, new PropertyPath(Button.OpacityProperty));
Storyboard.SetTargetProperty(myAnimation, new PropertyPath(TranslateTransform.XProperty));
sb.Children.Add(myAnimation);
}
sb.Begin();
}
我已经能够使用TranslateTransform.BeginAnimation,但我更喜欢在这里使用故事板。
为什么translate变换的行为与不透明度动画的行为不同,为了让它按预期运行,我需要做些什么呢?
答案 0 :(得分:5)
默认情况下,没有应用于UIElement的TranslateTransform。因此,如果要移动Image,首先必须将其RenderTransform
属性设置为TranslateTransform,然后将TargetProperty设置为正确的属性路径:
Img.RenderTransform = new TranslateTransform();
...
Storyboard.SetTargetProperty(myAnimation, new PropertyPath("RenderTransform.X"));
或者,您可以直接为TranslateTransform设置动画,即使没有故事板:
var transform = new TranslateTransform();
Img.RenderTransform = transform;
transform.BeginAnimation(TranslateTransform.XProperty, myAnimation);