如何在 Xamarin.ios（C#，Xaml）中使标签自动滚动

Question

她的问题是我在BoxView（BoxLabel）中包含一个标签（metroLabel），它可以显示很多信息，超出了盒子所能容纳的范围，所以我想让标签自动从右向左滚动并使盒子里装不下的字母出现和消失。目前，我创建了两个列表来制作一个可见列表和一个等待列表，并且我将信件从一个列表转移到另一个列表，但结果一点也不流畅。

 private async void StartAnimation3()
    {
        List<char> firstQueue = new List<char>();
        List<char> secondQueue = new List<char>();
        string texteComplet = "Température bureau 20°C - 15000 lumens - Volets a 80%             ";

        foreach (char s in texteComplet)
        {
            secondQueue.Add(s);
        }

        while (true)
        {
            if (secondQueue.Count < BoxLabel.WidthRequest / 6)
            {

                if (secondQueue.Count != 0)
                {
                    char s = secondQueue[0];
                    secondQueue.RemoveAt(0);
                    firstQueue.Add(s);
                    await Task.Delay(50);
                }


                if (firstQueue.Count != 0)
                {
                    char s = firstQueue[0];
                    firstQueue.RemoveAt(0);
                    secondQueue.Add(s);
                    await Task.Delay(50);
                }
            }
            else
            {
                char s = secondQueue[0];
                secondQueue.RemoveAt(0);
                firstQueue.Add(s);
                await Task.Delay(50);
            }


            metroLabel.Text = String.Join("", secondQueue.ToArray());
            Console.WriteLine(metroLabel.Text);


        }

    }

我还尝试让它在 TranslationX 上工作，它非常适合第一个滚动，但是当我尝试用子字符串使字母消失时，同样的问题出现，并且结果不平滑（扫视）。我认为同时使用这两种方法不是一个好主意，但如果您有想法，我将其放在这里。 （数字 6 大约是每个字母的像素数）

for (int i = 0; i < 6; i++)
{
     metroLabel.TranslationX -= 1;
     await Task.Delay(20);
}

Answer 1

您使用 TranslationX 方法面临的问题是，它会在文本滚动时导致可见的跳跃，并且看起来可能不平滑。这是因为您每次将标签移动固定数量的像素，这可能会导致外观不稳定。

要创建更平滑的滚动效果，您可以使用更连续的动画方法。您可以通过以下方式修改代码来实现此目的：

private async Task StartSmoothScrollAnimation()
{
    string originalText = "Température bureau 20°C - 15000 lumens - Volets a 80%        ";
    metroLabel.Text = originalText; // Set the initial text
    
    while (true)
    {
        // Measure the width of the label
        double labelWidth = metroLabel.Measure(metroLabel.Width, metroLabel.Height).Request.Width;

        // Calculate the duration based on the label width and a desired scrolling speed
        double durationInSeconds = labelWidth / 50; // Adjust the speed as needed

        // Animate the TranslationX property to create a smooth scrolling effect
        await metroLabel.TranslateTo(-labelWidth, 0, (uint)(durationInSeconds * 1000), Easing.Linear);

        // Reset the position to the right of the BoxView when the scrolling is complete
        metroLabel.TranslationX = BoxLabel.Width;

        // Delay before starting the next scroll
        await Task.Delay(1000); // Adjust the delay as needed
    }
}

在此代码中，我们使用

TranslateTo

方法来平滑地设置标签位置的动画。我们根据标签的宽度和所需的滚动速度计算动画持续时间。动画完成后，我们将标签的位置重置到 BoxView 的右侧，创建连续滚动的效果。

您可以调整速度和延迟值以实现所需的滚动行为。这种方法应该为 BoxView 内的标签提供更平滑、更流畅的滚动效果。