Bu çeviri animasyonu neden çalışmıyor?

Question

Bazı olayı bir düğme soldan sağa hareket etmesine neden olmalıdır aşağıdaki animasyon var:

<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> 

ama hiçbir şey olmuyor. Sorun ne olabilir?

Answer 1

Sen yakınsın ama birkaç şey çimdik gerekir.

Düğmenizdeki özelliği açın, böylece uğraştığımızı biliyoruz. Şu anda nesneyi hedefliyorsunuz, dönüşümü değil. Yani böyle bir şey yaparız;

<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> 

Sen DoubleAnimation ile yakın, ama anahtar çerçeveler bu animasyon böylece ortaya gibi bu sinir bozucu spline interpolasyon işlemek için aradaki var;

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

Bu, genellikle nasıl yaptığım da budur. Umarım yardımcı olur, şerefe.

EK:

biz EasingDoubleKeyFrame üzere kaymanın dan çevirmek bir DoubleAnimationUsingKeyFrames için hareket hızı işlevi ilişkilendirmek için:

<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> 

Answer 2

(i düğme içinde tetiği taşıdığınız) bu deneyin:

<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" > 

     <Button x:Name ="Studio" Grid.Row="33" Grid.Column="57" Grid.ColumnSpan="36" Grid.RowSpan="36" IsEnabled="{Binding IsStudioEnabled}" Opacity="{Binding StudioOpacityValue}" > 
      <i:Interaction.Triggers> 
        <i:EventTrigger EventName="FadeInMainButtonsAfterImport" SourceObject="{Binding Mode=OneWay}"> 
         <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/> 
        </i:EventTrigger> 
      <Button.RenderTransform> 
         <TranslateTransform/> 
        </Button.RenderTransform> 

      </Button> 

    <Grid>