翻轉動畫類似於主屏幕的未讀計數

Question

我正在尋找一個Windows Phone控件（或源代碼），以便擁有類似於顯示主屏幕中的SMS和郵件的未讀計數的計數器。例如，當數值從2變爲5時，我們有各種動畫短暫顯示3,4和5.

Answer 1

一種方法是使用Reactive Extension。

首先您需要Microsoft.Phone.Reactive和System.Observable參考。

在我的xaml頁面中，我定義了一個名爲NumberTextBlock的TextBlock。我還創建了一個Storyboard，通過修改ScaleY來動畫Text的外觀。

<phone:PhoneApplicationPage.Resources> 
    <Storyboard x:Name="Storyboard1"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="NumberTextBlock"> 
      <EasingDoubleKeyFrame KeyTime="0" Value="0.8"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 
</phone:PhoneApplicationPage.Resources> 

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <TextBlock x:Name="NumberTextBlock" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource PhoneTextTitle1Style}"> 
      <TextBlock.RenderTransform> 
       <CompositeTransform /> 
      </TextBlock.RenderTransform> 
    </TextBlock> 
</Grid> 

以我代碼隱藏，我用從Rx稱爲GenerateFromTime()的方法，其增加了一個時間維度來生成的序列。 TimeSpan.FromMilliseconds(100)這裏是每個數字之間的延遲。

public MainPage() 
    { 
     InitializeComponent(); 

     this.Loaded += new RoutedEventHandler(MainPage_Loaded); 
    } 

    private void MainPage_Loaded(object sender, RoutedEventArgs e) 
    { 
     var getNumbers = this.GetNumbers(10); 

     getNumbers.ObserveOnDispatcher().Subscribe(ChangeNumberTextBlock); 
    } 

    private void ChangeNumberTextBlock(int number) 
    { 
     this.NumberTextBlock.Text = number.ToString(); 
     Storyboard1.Begin(); 
    } 

    private IObservable<int> GetNumbers(int total) 
    { 
     return Observable.GenerateWithTime(0, i => i <= total, i => i, _ => TimeSpan.FromMilliseconds(100), i => ++i); 
    } 

您可以閱讀here和here (Silverlight TV)更多Rx。

希望這會有所幫助。 :)