翻转动画类似于未读的主屏幕计数

Question

我正在寻找一个Windows Phone控件(或源代码)，以便在主屏幕上有一个类似于显示短信和邮件未读计数的计数器。例如，当值从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);
    }

您可以从这里和这里(Silverlight TV)阅读更多关于Rx的信息。

希望这对你有帮助。:)