C# WPF故事板:DoubleAnimation在不透明上工作,但不在TranslateTransform上工作?

C# WPF故事板:DoubleAnimation在不透明上工作,但不在TranslateTransform上工作?,c#,wpf,animation,C#,Wpf,Animation,为了了解动画和UI,我制作了一个基本的WPF/C应用程序,其中用户选择要显示的车辆数量,然后这些车辆(即不同车辆的图像)出现在画布中并四处移动 WPF非常简单: <Grid> <Canvas x:Name="MenuTabCanvas" Visibility="Visible"> <Label x:Name="AnimateDemo" Content="Animate!" HorizontalAlign

为了了解动画和UI,我制作了一个基本的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>

我开始使用中描述的方法制作淡入淡出动画,效果很好。然后,我尝试了如下所示的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();
    }
private void AnimateGrid(对象发送方,事件参数e)
{
int NumberOfVehicles=5;
var sb=新故事板();
对于(int i=0;i
我已经能够让它与TranslateTransform.BeginAnimation一起工作,但我更喜欢在这里使用故事板


为什么“translate transform”的行为与“opacity”动画不同?我需要做什么才能使其按预期运行?

默认情况下,没有TranslateTransform应用于UIElement。因此,如果要移动图像,首先必须将其
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);

默认情况下,没有TranslateTransform应用于UIElement。因此,如果要移动图像,首先必须将其
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);