如何在WPF中为Margin属性设置动画

Question

我想移动矩形对象的动画以在x轴上移动它.我是WPF动画的新手,从以下开始:

<Storyboard x:Key="MoveMe">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                   Storyboard.TargetName="GroupTileSecond"
                                   Storyboard.TargetProperty="(**Margin.Left**)">

        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="**134, 70,0,0**" />
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="**50, 70,0,0**" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

很明显发现,我不能使用Margin.Left的Storyboard.TargetProperty或使用134,70,0,0的Value属性.

那么,如何在XAML WPF中移动对象.

Answer 1

Margin 属性可以使用动画 ThicknessAnimation

<Storyboard >
     <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
        <SplineThicknessKeyFrame KeyTime="00:00:00" Value="134, 70,0,0" />
        <SplineThicknessKeyFrame KeyTime="00:00:03" Value="50, 70,0,0" />
     </ThicknessAnimationUsingKeyFrames>
</Storyboard>

Answer 2

实际上,你可以做你想做的事情,就像你想做的那样,RenderTransform混合一些DoubleAnimation,甚至为它添加一些额外的天赋,例如;

<Grid x:Name="TheObject" Opacity="0">
      <Grid.RenderTransform>
            <TranslateTransform x:Name="MoveMeBaby" X="50" />
      </Grid.RenderTransform>
      <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                  <BeginStoryboard>
                         <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoveMeBaby" Storyboard.TargetProperty="X">
                                   <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />
                              </DoubleAnimationUsingKeyFrames>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TheObject" Storyboard.TargetProperty="Opacity">
                                   <SplineDoubleKeyFrame KeyTime="0:0:1.55" Value="1" />
                              </DoubleAnimationUsingKeyFrames>
                         </Storyboard>
                  </BeginStoryboard>
            </EventTrigger>
      </Grid.Triggers>

将该对象在X轴上移动50px,甚至在它移动时将其淡入.给它一个镜头,玩X物业的价值和KeyTime得到你想要的.希望这会有所帮助,欢呼.

Answer 3

您不能设置Margin.Left的动画（因为Left不是依赖项属性），但是可以设置animate Margin。用途ObjectAnimationUsingKeyFrames：

<Storyboard x:Key="MoveMe">
    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" 
            Storyboard.TargetName="GroupTileSecond" 
            Storyboard.TargetProperty="Margin">
        <DiscreteObjectKeyFrame KeyTime="00:00:00">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>134,70,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="00:00:03">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>50,70,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

有一些替代方法可让您使用DoubleAnimation而不是关键帧：

1. 将目标放置在Canvas中，并使用设置其x位置动画Canvas.Left。
2. 将a TranslateTransform应用于目标，并使用设置其x位置动画TranslateTransform.X。