XAML Heartbeat動畫 - 如何確保心跳至少兩次

Question

Greetings，

我想直觀顯示後臺進程何時工作。此過程每隔一段時間（例如每30秒）發生一次，可能需要10ms或1000ms +才能完成。我正在使用MVVM-Light框架，因此創建了一個數據觸發器，用於連接到心臟衰減進出的圖像上的視圖模型屬性。

我的業餘動畫技術正在工作，當過程需要一秒或更多時間，但我也希望它完成一個完整的心跳（2重複），當過程需要一段時間（< 100毫秒），否則動畫過快，你不能（視覺上）告訴過程正在工作。

問題是心臟在整個過程中應該繼續跳動，所以我不能將重複行爲設置爲2. XAML解決方案是首選，但如果需要一些代碼，我不會畏縮:)

<Image 
    Height="60" Width="60" Margin="0,6,6,6" 
    Name="Heartbeat" Source="/Resources/Heartbeat.png" 
    VerticalAlignment="Bottom" HorizontalAlignment="Right" 
    Opacity=".05" Stretch="UniformToFill"> 
    <Image.Style> 
     <Style> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding IsHeartBeating}" Value="True"> 
        <DataTrigger.EnterActions> 
         <BeginStoryboard Name="HeartbeatStoryboard"> 
          <Storyboard RepeatBehavior="Forever"> 
           <DoubleAnimation 
            Storyboard.TargetProperty="Opacity" 
            From="0.05" To="0.8" Duration="0:0:0.100"> 
           </DoubleAnimation> 
           <DoubleAnimation 
            Storyboard.TargetProperty="Opacity" 
            From="0.8" To="0.05" Duration="0:0:0.300"> 
            <DoubleAnimation.EasingFunction> 
             <PowerEase EasingMode="EaseOut" Power="6" /> 
            </DoubleAnimation.EasingFunction> 
           </DoubleAnimation> 
          </Storyboard> 
         </BeginStoryboard> 
        </DataTrigger.EnterActions> 
        <DataTrigger.ExitActions> 
         <StopStoryboard BeginStoryboardName="HeartbeatStoryboard" /> 
        </DataTrigger.ExitActions> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </Image.Style> 
</Image> 

如果任何人有關於如何提高心跳動畫任何提示，我很開放的建議，謝謝！

Answer 1

我認爲你必須指定RepeatBehavior =「2x」並訂閱StoryBoard的Completed事件，如果IsHeartBeating仍然是true，那麼你重新啓動它。

<Image Height="60" Width="60" Margin="0,6,6,6" 
     Name="Heartbeat" Source="/Resources/Heartbeat.png" 
     VerticalAlignment="Bottom" HorizontalAlignment="Right"  
     Opacity=".05" Stretch="UniformToFill"> 
    <Image.Resources> 
     <Storyboard x:Key="HeartbeatStoryboard2x" 
        RepeatBehavior="2x" 
        Completed="Storyboard_Completed"> 
      <DoubleAnimation Storyboard.TargetProperty="Opacity" 
          Storyboard.Target="{Binding ElementName=Heartbeat}" 
          From="0.05" To="0.8" Duration="0:0:0.500"> 
      </DoubleAnimation> 
      <DoubleAnimation Storyboard.TargetProperty="Opacity" 
          Storyboard.Target="{Binding ElementName=Heartbeat}" 
          From="0.8" To="0.05" Duration="0:0:1.500"> 
       <DoubleAnimation.EasingFunction> 
        <PowerEase EasingMode="EaseOut" Power="6" /> 
       </DoubleAnimation.EasingFunction> 
      </DoubleAnimation> 
     </Storyboard> 
    </Image.Resources> 
    <Image.Style> 
     <Style> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding IsHeartBeating}" Value="True"> 
        <DataTrigger.EnterActions> 
         <BeginStoryboard Name="HeartbeatStoryboard"> 
          <StaticResource ResourceKey="HeartbeatStoryboard2x"/> 
         </BeginStoryboard> 
        </DataTrigger.EnterActions> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </Image.Style> 
</Image> 

事件處理程序後面的代碼。
更新
添加布爾標誌，僅停止故事板時就是已經重新啓動

private bool m_restartedAnimation = false; 
private void Storyboard_Completed(object sender, EventArgs e) 
{ 
    ClockGroup clockGroup = sender as ClockGroup; 
    Storyboard heartbeatStoryboard = clockGroup.Timeline as Storyboard; 
    if (IsHeartBeating == true) 
    { 
     m_restartedAnimation = true; 
     heartbeatStoryboard.Begin(); 
    } 
    else 
    { 
     if (m_restartedAnimation == true) 
     { 
      heartbeatStoryboard.Stop(); 
     } 
     m_restartedAnimation = false; 
    } 
}