3

私はExpressionBlendでWPFアプリケーションを開発しました。これは、バウンス効果のあるストーリーボードを備えたシンプルなボタンアタッチです。

これまでのところ、マウスがボタンに入るとボタンがバウンドするようになりました。しかし、それはそれを続けています。マウスを1回動かすと、再びバウンドした後、マウス領域に移動し（マウスを動かしていないので、マウスカーソルは静止しています）、再びバウンドを開始します。

これは私が使用しているコード全体です

    <Window.Resources>
    <Storyboard x:Key="Storyboard1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="button">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="button">
            <EasingDoubleKeyFrame KeyTime="0" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BounceEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-29">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BounceEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="51" Margin="76,100,0,0" VerticalAlignment="Top" Width="130" RenderTransformOrigin="0.5,0.5">
        <Button.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Button.RenderTransform>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseEnter">
                <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>
</Grid>

xamlウィンドウにコピーして貼り付けるだけで、準備完了です。

マウスをマウスの上隅に置いたままにします。問題が表示されます。

ありがとう

4

3 に答える 3

0

このボタンアニメーションを例として見てみましょう。

<Grid>  
    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="Test  ">
      <Button.RenderTransform>
        <ScaleTransform ScaleX="1.0" ScaleY="1.0" />
      </Button.RenderTransform> 
      <Button.Style>
        <Style TargetType="Button">
          <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
              <EventTrigger.Actions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" To="2.0" />
                    <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="RenderTransform.ScaleY" To="2.0" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
              <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.0" />
                    <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.0" />
                  </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
          </Style.Triggers>
        </Style>
      </Button.Style>     
    </Button>
  </Grid>

したがって、マウスがボタン領域に入ると拡大し、マウスが離れると縮小します。

デフォルトでは、StoryBoardの：

  • AutoReverse = False、trueの場合、アニメーションは終了するとすぐに元に戻ります。
  • FillBehavior = HoldEnd、これにより、アニメーションが終了した後のボタンの外観がそのままになります（つまり、マウスをボタンの上に置いている限り、ボタンは2倍の大きさのままになります）。に設定するとStop、アニメーションが終了するとすぐに元の状態に戻ります（アニメーションなし。これはAutoReverseとは異なります）。
  • RepeatBehavior = 1x、これをに設定できます。ここで、TimeSpannはアニメーションを繰り返す回数です。そうしないと、永久ループになります。nxForever

これらの設定が改ざんされていないことを確認する必要があります。

最後になりましたが、アニメーションに関連付けられたロジックが意味をなし、ループを引き起こさないことを確認してください（これにより、アニメーションがループします）。たとえば、マウスが要素の上にあることに基づいてアニメーションを作成し、アニメーションが要素を移動した場合、マウスは要素の上にないため、アニメーションが元に戻り、マウスの下にあるボタンなどが永久に戻ります。

于 2012-11-23T16:01:53.333 に答える
0

背景が透明（ヌルではない）のキャンバス内にマウスを置き、マウスがキャンバスを越えたときにボタンをアニメーション化することができます。ボタンはその位置を離れますが、キャンバスは離れません。たとえば、そのソリューションをテンプレートコントロール内で使用できます。

于 2012-11-29T04:35:15.703 に答える
0

飛び出すのは、ボタンの高さが51ピクセルのときに、ボタンを29ピクセル下に移動していることです。ボタンがマウスから離れ、アニメーションを反転するために戻り始める可能性があります。

これを回避するには、ボタンとアニメーションを作り直します。-ボタンをコンテナに配置します（グリッド、スタックパネル-機能するものなら何でも）-コンテナの背景を「透明」にします（これは「null」と同じではありません）-ボタンをそのコンテナの下部に揃えます-コンテナでアニメーションをトリガーし、コンテナの高さを変更します。その結果、ボタンが離れてもマウスはコンテナの上にあるため、アニメーションが停止したり反転したりすることはありません。-AutoReverseとRepeatBehaviorを使用してアニメーションの動作を制御します

-これは明らかにあなたが使用しているコード全体ではないので（「i」名前空間宣言はどこにありますか？）、私はあなたの問題を私の側で見ることができません。

于 2012-11-29T15:59:25.587 に答える