Flipping animation similar to the unread count of the home screen

问题

I'm looking for a Windows Phone control (or source code) in order to have a counter similar to the one showing the unread count for SMS and mail in the home screen. When the value changes from 2 to 5 for example, we have various animations showing briefly 3, 4 and 5.

回答1:

one way is to use Reactive Extension.

First you need Microsoft.Phone.Reactive and System.Observable references.

In my xaml page, I defined a TextBlock named NumberTextBlock. Also I created a Storyboard that animates the appearance of the Text by modifying its ScaleY.

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

In my code-behind, I used a method from Rx called GenerateFromTime() which adds a time dimension to generated sequence. TimeSpan.FromMilliseconds(100) here is the delay between each number.

    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);
    }

You can read more about Rx from here and here (Silverlight TV).

Hope this helps. :)

来源：https://stackoverflow.com/questions/8113495/flipping-animation-similar-to-the-unread-count-of-the-home-screen