类似于主屏幕未读计数的翻转动画 [英] Flipping animation similar to the unread count of the home screen

问题描述

我正在寻找一个 Windows Phone 控件(或源代码)，以便拥有一个类似于在主屏幕中显示 SMS 和邮件未读计数的计数器.例如，当值从 2 变为 5 时，我们有各种动画简要显示 3、4 和 5.

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.

推荐答案

一种方法是使用Reactive Extension.

首先你需要 Microsoft.Phone.Reactive 和 System.Observable 引用.

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

在我的 xaml 页面中，我定义了一个名为 NumberTextBlock 的 TextBlock.我还创建了一个 Storyboard，它通过修改 ScaleY 来为 Text 的外观设置动画.

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>

在我的代码隐藏中，我使用了来自 Rx 的方法，称为 GenerateFromTime()，它为生成的序列添加了时间维度.TimeSpan.FromMilliseconds(100) 这里是每个数字之间的延迟.

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

您可以从 这里 和此处(Silverlight TV).

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

希望这会有所帮助.:)

Hope this helps. :)

这篇关于类似于主屏幕未读计数的翻转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！