c# - 为什么这个翻译动画不起作用？

Question

我有以下动画，在某些事件中应该导致按钮从左向右移动:

<UserControl.Resources>
    <Storyboard x:Key="Storyboard1">
        <DoubleAnimation Storyboard.TargetName="Studio" Storyboard.TargetProperty="Opacity" From="0" To="{Binding StudioOpacityValue}" Duration="0:0:2"/>
        <DoubleAnimation Storyboard.TargetName="Studio" Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" From="0" To="500"  Duration="0:0:2">
            <DoubleAnimation.EasingFunction>
                <CubicEase EasingMode="EaseInOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>
</UserControl.Resources>

<Grid Name="mainGrid" >

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="FadeInMainButtonsAfterImport" SourceObject="{Binding Mode=OneWay}">
            <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <Button x:Name ="Studio" Grid.Row="33" Grid.Column="57" Grid.ColumnSpan="36" Grid.RowSpan="36"  IsEnabled="{Binding IsStudioEnabled}" Opacity="{Binding StudioOpacityValue}" >
        <Button.RenderTransform>
            <TranslateTransform/>
        </Button.RenderTransform>
    </Button>

<Grid>

但什么也没发生。可能是什么问题？

Answer 1

您已经很接近了，但我们需要调整一些东西。

打开按钮上的属性，以便它知道我们正在处理的内容。现在您的目标是对象，而不是变换。所以我们做了类似的事情；

<Button x:Name="Studio" 
        Grid.Row="33" Grid.Column="57" 
        Grid.ColumnSpan="36" Grid.RowSpan="36" 
        IsEnabled="{Binding IsStudioEnabled}" 
        Opacity="{Binding StudioOpacityValue}" >
   <Button.RenderTransform>
      <TranslateTransform x:Name="StudioTranslate" X="0"/>
   </Button.RenderTransform>
</Button>

您已经接近 DoubleAnimation，但动画发生之间存在关键帧，因此请处理那些讨厌的样条插值，例如；

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StudioTranslate" 
                               Storyboard.TargetProperty="X" Duration="0:0:2">
   <SplineDoubleKeyFrame KeyTime="0:0:2" Value="500" />
</DoubleAnimationUsingKeyFrames>

无论如何，我通常都是这样做的。希望对您有帮助，干杯。

附录:

为了将缓动函数关联到 DoubleAnimationUsingKeyFrames，我们从样条线翻转到 EasingDoubleKeyFrame :

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="StudioTranslate" 
                               Storyboard.TargetProperty="X" Duration="0:0:2">
   <EasingDoubleKeyFrame KeyTime="0:0:2" Value="500">
      <EasingDoubleKeyFrame.EasingFunction>
         <CubicEase EasingMode="EaseInOut"/>
      </EasingDoubleKeyFrame.EasingFunction>
   </EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>