WPF Path Animationがちらつくのはなぜですか？

Question

MouseLeaveで、次のアニメーションがちらつき、動かないのはなぜですか？再編集できる場合は、スクリーンキャストを投稿します。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Canvas> 
    <Path Fill="Blue" Margin="15,15,15,15"> 
     <Path.Data> 
     <!-- Describes an ellipse. --> 
     <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="200,100" RadiusX="15" RadiusY="15" /> 
     </Path.Data> 
     <Path.Triggers> 
     <EventTrigger RoutedEvent="UIElement.MouseEnter"> 
      <BeginStoryboard> 
      <Storyboard Duration="0:0:.5"> 
       <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" 
         Storyboard.TargetProperty="RadiusX" 
         From="15" To="100" /> 
       <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" 
         Storyboard.TargetProperty="RadiusY" 
         From="15" To="100" /> 
      </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="UIElement.MouseLeave"> 
      <BeginStoryboard> 
      <Storyboard Duration="0:0:.5"> 
       <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" 
         Storyboard.TargetProperty="RadiusX" 
         From="100" To="15" /> 
       <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" 
         Storyboard.TargetProperty="RadiusY" 
         From="100" To="15" /> 
      </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
     </Path.Triggers> 
    </Path> 
    </Canvas> 
</Page> 

Answer 1

あなたのDoubleAnimationにFromを指定するのは、その理由です。

MouseLeaveが発生した場合、半径が100未満の場合、Fromプロパティは100にジャンプし、MouseEnterになる可能性があります。次に、競合する2つのアニメーションがあり、カーソルの下の楕円の半径がちらつくとマウスイベントが狂ってしまいます。あなたがStoryboard.Durationを設定すると、それは加速しません、無関係な注記で

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1"> 
    <Canvas> 
     <Path Margin="15,15,15,15" Fill="Blue"> 
      <Path.Data> 
       <!-- Describes an ellipse. --> 
       <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="200,100" RadiusX="15" RadiusY="15"/> 
      </Path.Data> 
      <Path.Triggers> 
       <EventTrigger RoutedEvent="UIElement.MouseEnter"> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusX" To="100"/> 
          <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusY" To="100"/> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="UIElement.MouseLeave"> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusX" To="15"/> 
          <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusY" To="15"/> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Path.Triggers> 
     </Path> 
    </Canvas> 
</Page> 

：

ソリューションはちょうどFromプロパティを省略することで、これはアニメーションが現在の半径がどこからスタートしますあなたの子供のアニメーションをアップすると、ちょうどStoryboardがちょうど終了します。あなたは本当にあなたの子供のDurationを設定したいと思っていますDoubleAnimation s - 私はこれを行うために上記のXAMLを修正しました。

Answer 2

ハードウェアの通常の犯人は常にあります。しかし、私はそれがアニメーションを実行するために取られている時間と関係があるかもしれないと思うでしょう。アニメーションが実行される時間を長くするか、移動する値のサイズを調整してみてください。

100秒から15秒に移行するのにあまり時間がかからないため、十分なスムーズな移行が行われていないため、不安定なアニメーションが発生する可能性があります。その時間は重要であり、目標は滑らかなアニメーションのために少なくとも30 fpsでなければならないことを忘れないでください。