Как анимировать текстовый блок так, чтобы он выглядел так, как будто он подпрыгивает на поверхности в XAML или C#?

Question

Здравствуйте, если этот вопрос непонятен или нуждается в улучшении / дополнительной информации, сообщите мне в комментариях.

Я создаю приложение и в игре пользователь приложение получает опыт, играя и выигрывая испытания. Я заинтересован в создании подпрыгивающей текстовой анимации, вот что мне нужно:

введите описание изображения здесь

Я слышал, что вы можете смоделировать это с помощью BounceEase, но я не нашел достаточно информации / ресурсов для достижения этого определенного эффекта.

Я надеюсь, что информация, которую я дал, достаточно удовлетворительна для того, чтобы вы попытались найти решение этой проблемы, если нет, пожалуйста, скажите мне.

Answer 1

Вы можете использовать функцию BounceEasy для анимации перевода y. Посмотрите следующую демонстрацию.

void BounceText(string text, int x, int y)
{
    var tb = new TextBlock
    {
        Text = text,
        RenderTransform = new TranslateTransform(x, y)
    };
    RootCanvas.Children.Add(tb);

    //--x animation 1
    var xAnim = new DoubleAnimation(x, x + 40, new Duration(TimeSpan.FromSeconds(.6)));
    Storyboard.SetTarget(xAnim, tb);
    Storyboard.SetTargetProperty(xAnim, new PropertyPath("RenderTransform.X"));
    
    //--x animation 2
    var xAnim2 = new DoubleAnimation(x + 40, x + 80, new Duration(TimeSpan.FromSeconds(.6)))
    {
        BeginTime = TimeSpan.FromSeconds(0.6)
    };
    Storyboard.SetTarget(xAnim2, tb);
    Storyboard.SetTargetProperty(xAnim2, new PropertyPath("RenderTransform.X"));
    
    //--y animation 
    var yAnim = new DoubleAnimation(y, y - 40, new Duration(TimeSpan.FromSeconds(.3)))
    {
        AutoReverse = true,
        EasingFunction = new BounceEase { EasingMode = EasingMode.EaseIn, Bounces = 0 },
        RepeatBehavior = new RepeatBehavior(2)
    };
    Storyboard.SetTarget(yAnim, tb);
    Storyboard.SetTargetProperty(yAnim, new PropertyPath("RenderTransform.Y"));

    var sb = new Storyboard();
    sb.Children.Add(xAnim);
    sb.Children.Add(yAnim);
    sb.Children.Add(xAnim2); //--add this to animate 2 times

    sb.Begin();
}

Затем вы можете использовать его как:

BounceText("+2 XP", 80, 80);

Вы можете показать элементы, используя холст, например:

...
<Canvas x:Name="RootCanvas"/>
...