如何在Xamarin.iOS（C#、Xaml）中实现流畅的Label自动滚动动画

需要实现BoxView中无法完全显示的Label自动滚动效果，当前采用两个字符列表（显示/隐藏）切换字符的方式，但动画不流畅——消失字符的尺寸会导致Label向左跳跃。尝试通过TranslationX向右补偿消失字符宽度，再用TranslationTo实现平滑过渡，但无法精确获取字符像素宽度，只能手动设置数值。

已尝试的方法均无效：

• 获取Label的Width属性，结果始终为-1
• 调用TextRenderer.MeasureText，无法使用
• 调用graphics.MeasureString，System.Drawing.Common不支持当前平台

现有实现代码如下：

private async void StartAnimation3()
{
    List<char> firstQueue = new List<char>();         //存储未显示的字符
    List<char> secondQueue = new List<char>();          //显示的字符队列

    int initialX = (int)metroLabel.TranslationX; 
    int sizeStringVisble = 60;                                 //假设可显示60个字符
    firstQueue.AddRange(new char[] { ' ', '/', ' ' }); 
    string texteComplet = "Température bureau 20°C - 15000 lumens - Volets a 80%";      //完整文本

    foreach (char s in texteComplet)     //填充字符队列
    {
        if (secondQueue.Count < sizeStringVisble)
        { 
            secondQueue.Add(s);
        }
        else
        {
            firstQueue.Add(s);
        }  
    }
    
    if (secondQueue.Count < sizeStringVisble)   //用空格补全到预设显示长度
    {
        int nbEspace = sizeStringVisble - (secondQueue.Count);
        for (int i= 0; i < nbEspace; i++)
        {
            secondQueue.Add(' ');
        }
    }

    while (true)
    {
        if (secondQueue.Count < sizeStringVisble)    //切换字符
        {
            if (secondQueue.Count != 0)
            {
                char s = secondQueue[0];
                secondQueue.RemoveAt(0);
                firstQueue.Add(s);
            }

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

        //根据字符类型手动设置补偿宽度和动画时长
        if (firstQueue.Last() == ' ' || firstQueue.Last() == '/' || firstQueue.Last() == '°') 
        {
            metroLabel.TranslationX += 5;    
            await metroLabel.TranslateTo(initialX, metroLabel.TranslationY, 80);
        }
        else if (char.IsUpper(firstQueue.Last()) || firstQueue.Last() == '%')
        {
            metroLabel.TranslationX += 7;     
            await metroLabel.TranslateTo(initialX, metroLabel.TranslationY, 175);
        }
        else
        {
            metroLabel.TranslationX += 6;    
            await metroLabel.TranslateTo(initialX, metroLabel.TranslationY, 150);
        }

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

一、精确获取字符像素宽度的方法 #

通过创建临时Label并复用目标Label的字体属性，可精确测量单个字符的实际宽度：

private double GetCharWidth(char c, Label targetLabel)
{
    // 创建临时Label，完全匹配目标Label的字体配置
    var tempLabel = new Label
    {
        Text = c.ToString(),
        FontFamily = targetLabel.FontFamily,
        FontSize = targetLabel.FontSize,
        FontAttributes = targetLabel.FontAttributes,
        LineBreakMode = LineBreakMode.NoWrap
    };

    // 测量文本尺寸，传入无限大约束确保获取完整宽度
    var size = tempLabel.Measure(double.PositiveInfinity, double.PositiveInfinity);
    return size.Request.Width;
}

使用示例：

char targetChar = 'A';
double charWidth = GetCharWidth(targetChar, metroLabel);

二、更流畅的Label自动滚动实现方案 #

放弃字符列表切换的复杂逻辑，直接对包含完整文本的Label做整体平移动画，视觉效果更流畅：

实现思路 #

1. 等待控件完成布局，确保测量值准确
2. 计算完整文本宽度与容器宽度的差值，确定滚动距离
3. 执行匀速平移动画，循环滚动文本

代码示例 #

private async void StartSmoothScrollAnimation()
{
    // 等待控件完成初始布局，避免测量值异常
    await Task.Delay(100);

    var containerWidth = boxView.Width; // 容器BoxView的宽度
    metroLabel.Text = "Température bureau 20°C - 15000 lumens - Volets a 80%";
    
    // 测量完整文本的实际宽度
    var textSize = metroLabel.Measure(double.PositiveInfinity, double.PositiveInfinity);
    var textWidth = textSize.Request.Width;

    // 文本未超出容器时，无需执行滚动
    if (textWidth <= containerWidth)
        return;

    var scrollDistance = textWidth - containerWidth;
    const int animationDuration = 10000; // 单次滚动时长（毫秒）

    while (true)
    {
        // 匀速滚动到最左侧
        await metroLabel.TranslateTo(-scrollDistance, metroLabel.TranslationY, animationDuration, Easing.Linear);
        // 停顿显示文本末尾
        await Task.Delay(500);
        // 快速重置到初始位置
        metroLabel.TranslationX = 0;
        // 停顿显示文本开头
        await Task.Delay(500);
    }
}

优化说明 #

• 使用Easing.Linear保持匀速滚动，避免变速带来的突兀感
• 添加首尾停顿，让用户清晰看到文本的起始和结束内容
• 仅在文本宽度超出容器时触发滚动，减少无效动画执行

内容的提问来源于stack exchange，提问作者Antoine21000