流体网格高度动画 UWP答案

【问题标题】：Fluid grid height animation UWP流体网格高度动画 UWP
【发布时间】：2019-10-18 00:00:15
【问题描述】：

我必须创建一个网格高度的动画（这与麦克风的 db 数据一起，我随机模拟了数据的接收）。但是我创建的动画一点也不流畅。如何获得动画以制作带有四个彩色条的谷歌助手（谷歌播放应用程序）之类的示例（我的意思是作为流体动画）？

MainPage.xaml：

<Grid>
    <Grid x:Name="ColorGrid" Background="Blue" Height="150" Width="40" CornerRadius="20"/>
</Grid>

MainPage.xaml.cs：

DispatcherTimer TimerHeight = new DispatcherTimer();
Storyboard storyboard1 = new Storyboard();
double AnimationTime = 50;

public MainPage()
{
    this.InitializeComponent();
    TimerHeight.Interval = TimeSpan.FromMilliseconds(50);
    TimerHeight.Tick += TimerHeight_Tick;
    TimerHeight.Start();
}

private void TimerHeight_Tick(object sender, object e)
{
    double ActualHeight = GetRandomNumber(150,350);
    //ColorGrid.Height = ActualHeight;
    StartAnimation(ColorGrid, ActualHeight);
}

public double GetRandomNumber(double minimum, double maximum)
{
    Random random = new Random();
    return random.NextDouble() * (maximum - minimum) + minimum;
}

private void StartAnimation(Grid GridColor, double GridHight)
{
    storyboard1 = new Storyboard();
    var AnimationOne = new EasingDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(AnimationTime)), Value = GridHight, EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseOut } };
    var AnimOne = new DoubleAnimationUsingKeyFrames();
    AnimOne.EnableDependentAnimation = true;
    AnimOne.KeyFrames.Add(AnimationOne);
    Storyboard.SetTargetProperty(AnimOne, "(FrameworkElement.Height)");
    Storyboard.SetTarget(AnimOne, GridColor);
    storyboard1.Children.Add(AnimOne);
    storyboard1.Begin();
}

虽然我用过动画，但好像有镜头。如何获得流畅的动画？

提前致谢。

【问题讨论】：

我运行了你的代码，它对我来说运行良好。 “不流动”是什么意思？您能否对此进行一些扩展，并展示您最终结果的 gif 或视频？

标签： c# xaml animation uwp

【解决方案1】：

您好，欢迎来到我们美丽的社区！

首先，您是否尝试过在没有所有 Visual Studio 调试系统的情况下运行该应用程序？因为它很重并且可能导致动画不流畅......我也曾经经历过。因此，首先要做的是部署您的应用程序，然后只需单击它即可运行它，就好像它是从商店安装的一样。

第二……你不是想在这么几毫秒内制作太多动画吗？尝试将TimeSpan 设置更长一点（例如 1000），看看会发生什么...

【讨论】：

我提到的例子更加流畅，在这个问题中我并没有说我的动画是解决方案，但我正在寻找替代解决方案。将时间跨度设置为 1000 就像延迟一秒。

【解决方案2】：

虽然我用过动画，但好像有镜头。如何获得流畅的动画？

如果你想让动画更流畅，你可以将AnimationTime(KeyTime) 设置得更大一些。

对于我的测试，如果你将AnimationTime设置为600，动画会很流畅。

private void StartAnimation(Grid GridColor, double GridHight)
{
    storyboard1 = new Storyboard();
    var AnimationOne = new EasingDoubleKeyFrame() {
        KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600)),
        Value = GridHight,
        EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseOut } };
    var AnimOne = new DoubleAnimationUsingKeyFrames();
    AnimOne.EnableDependentAnimation = true;
    AnimOne.KeyFrames.Add(AnimationOne);
    Storyboard.SetTargetProperty(AnimOne, "(FrameworkElement.Height)");
    Storyboard.SetTarget(AnimOne, GridColor);
    storyboard1.Children.Add(AnimOne);
    storyboard1.Begin();
}

【讨论】：