时间戳

首页 > 解决方案 > Xamarin 在数字值中形成动画增加/减少作为标签文本

xamarin.forms - Xamarin 在数字值中形成动画增加/减少作为标签文本

问题描述

我有一个标签，其 Text 属性是一个数值。当该数字发生变化时，我想对数字的变化进行动画处理。因此，例如，如果 Text 设置为 100 并更改为 120，我想显示它每隔几毫秒从 100 增加到 101 再到 102 等，直到它达到新的值 120。

我可以在代码后面手动执行此操作，但由于我使用的是 MVVM，我想找到一种在 XAML 中执行此操作的方法（例如行为、效果等）。我确信我也可以通过使用自定义渲染器来做到这一点，但感觉应该有一种更简单的方法来做到这一点，我不知道。有任何想法吗？

谢谢！

标签： xamarin.forms

解决方案

您可以使用 Animation 类在开始值和结束值之间更改数字，使用 Easing 函数来指定数字更改的发生方式以及发生的持续时间。

然后，您可以将标签绑定到例如“Amount”属性，设置_targetAmount，然后使用您想要的动画属性在当前数量和_targetAmount 之间为“Amount”设置动画。标签将通过绑定相应地更新。

为了对视图模型上的属性进行动画处理，您必须首先将视图模型类标记为 IAnimatable。然后只需设置 _targetAmount 并调用 AnimateAmountChange() 以更新动画样式中的标签。

    private void AnimateAmountChange()
    {
        var change = new Animation(x => Amount = (int)x, Amount, _targetAmount);
        change.Commit(this, "ChangeAmount", 10, 300, Easing.SinOut);
    }

    #region IAnimatable
    public void BatchBegin()
    {
    }

    public void BatchCommit()
    {
    }
    #endregion

推荐阅读