Pourquoi cette animation de traduction ne fonctionne-t-elle pas?

J'ai l'animation suivante que sur un événement devrait utiliser un bouton pour passer de gauche à droite:Pourquoi cette animation de traduction ne fonctionne-t-elle pas?

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

, mais rien ne se passe. Quel peut être le problème?

Source

2016-04-07 Ivan

'FadeInMainButtonsAfterImport' quel est cet événement? –

c'est l'événement qui devrait déclencher cette animation et cela fonctionne. Je sais que parce que sur cet événement, le même bouton s'estompe, mais ne veut pas traduire. – Ivan

essayez d'accéder à la propriété target comme ceci: '(UIElement.RenderTransform) .Children [0]. (TranslateTransform.X)' –

Vous êtes à proximité, mais nous devons modifier une ou deux choses. Ouvrez la propriété sur votre bouton pour savoir à quoi nous avons affaire. En ce moment, vous ciblez l'objet, pas la transformation. Donc nous faisons quelque chose comme;

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

Vous êtes proche avec le DoubleAnimation, mais il y a des images clés entre les deux pour que l'animation se produire Manipulez les interpolation spline embêtants comme;

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

C'est généralement ainsi que je le fais. J'espère que cela aide, acclamations.

ADDENDA:

Pour associer des fonctions à un assouplissement DoubleAnimationUsingKeyFrames nous renversons de spline à 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>

Source

2016-04-07 14:23:35

Merci, cela a fonctionné. Le seul problème est que je ne peux pas appliquer la fonction d'accélération comme je l'ai fait avec une double animation standard: Comment résoudre ce problème? – Ivan

@Ivan Je suis désolé, j'ai oublié tout sur l'assouplissement! Voir la mise à jour, nous passons simplement de spline à easing. Faites-moi savoir si vous rencontrez des problèmes. À votre santé! –

N'oubliez pas de changer KeyTime de '0: 0: 0' '0: 0: 2', l'animation ne fonctionnera pas autrement :) –

Essayez ceci (j'ai déplacé la gâchette dans le bouton):

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

Source

2016-04-07 14:20:02 auburg

Pourquoi cette animation de traduction ne fonctionne-t-elle pas?

Répondre

Questions connexes