2

あるイベントでボタンが左から右に移動する次のアニメーションがあります。

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

しかし、何も起こりません。何が問題なのですか？

4

2 に答える 2

4

あなたは近いですが、いくつか微調整する必要があります。

ボタンでプロパティを開き、何を扱っているかを認識させます。現在、変換ではなくオブジェクトをターゲットにしています。したがって、次のようなことを行います。

<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>
于 2016-04-07T14:23:35.917 に答える
1

これを試してください（ボタン内でトリガーを移動しました）：

<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>
于 2016-04-07T14:20:02.090 に答える