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



xaml animation (3)

我想移动矩形对象的动画以在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或在Value属性中使用134,70,0,0

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


Answer #1

作为替代答案@McGarnagle您可以将动画用于HorizontalAlignmentVerticalAlignment属性。

例:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="GroupTileSecond" 
                               Storyboard.TargetProperty="HorizontalAlignment">

    <DiscreteObjectKeyFrame KeyTime="0:0:0">
        <DiscreteObjectKeyFrame.Value>
            <HorizontalAlignment>Center</HorizontalAlignment>
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

Answer #2

你无法为Margin.Left设置动画(因为Left不是依赖属性),但你可以为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中,并使用Canvas.Left为其x位置设置动画。
  2. TranslateTransform应用于目标,并使用TranslateTransform.X为其x位置设置动画。

Answer #3

实际上,你可以做你想做的事情,就像你想要使用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来获得你想要的东西。 希望这会有所帮助,欢呼。





margin