Анимация высоты жидкостной сетки UWP

Question

Мне нужно создать анимацию высоты сетки (это с данными дб микрофона, я имитировал прием данных случайным образом).Но созданная мною анимация совсем не плавная.Как получить анимацию для создания примера, подобного помощнику Google (приложение Google Play), с четырьмя цветными полосами (я имею в виду это как плавная анимация)?

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

Хотя я использовал анимацию, все равно, что есть кадры.Как получить плавную анимацию?

Заранее спасибо.

Answer 1

Хотя я использовал анимацию, все равно, что есть кадры.Как получить плавную анимацию?

Если вы хотите сделать анимацию плавной, вы можете увеличить 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();
}

Answer 2

Привет и добро пожаловать в наше прекрасное сообщество!

Во-первых, вы пытались запустить приложение БЕЗ всей системы отладки Visual Studio?Потому что он тяжелый и может привести к тому, что анимация не будет плавной ... Я тоже это иногда испытывал.Итак, первое, что нужно сделать, это развернуть приложение, а затем запустить его, просто щелкнув по нему, как если бы оно было установлено из магазина.

Второе ... не пытаетесь ли вы анимировать слишком много анимаций?так мало миллис?Попробуйте установить TimeSpan немного дольше (например, 1000) и посмотрите, что произойдет ...