CATextLayer的fontSize属性CABasicAnimation动画不生效问题求助

Let's figure out why your pulse animation isn't working for the CATextLayer when users hit the character limit. I’ve gone through your code and spotted a few key issues that are blocking the animation from showing up properly.

Key Issues in Your Original Code #

1. Incorrect Animation Key Path: CATextLayer doesn’t reliably animate the fontSize property directly via that key path. Core Animation handles transform-based animations (like scaling) much more consistently for layer subclasses.
2. Incomplete Font Configuration: Using just SetFont(uiFont.Name) can lead to rendering inconsistencies with CATextLayer, which works better with Core Text fonts (CTFont).
3. Character Count Calculation: Your original logic didn’t account for text being replaced (e.g., selecting and deleting part of the text), leading to incorrect character count checks.

Corrected C# Code #

Here’s the fixed version with explanations for each change:

public partial class MyViewController : UIViewController, IUITextViewDelegate { 
    const int MAX_COMMENTS_CHARS = 500; 
    CATextLayer charsLeftTextLayer; 

    public override void ViewDidLoad() { 
        base.ViewDidLoad(); 
        charsLeftTextLayer = new CATextLayer(); 
        var uiFont = UIFont.SystemFontOfSize(12); 

        charsLeftTextLayer.ContentsScale = UIScreen.MainScreen.Scale; 
        // Use CTFont for better compatibility with CATextLayer's rendering
        charsLeftTextLayer.Font = CTFont.CreateWithName(uiFont.Name, uiFont.PointSize).Handle;
        charsLeftTextLayer.FontSize = uiFont.PointSize; 
        charsLeftTextLayer.String = $"{MAX_COMMENTS_CHARS} chars left"; 
        charsLeftTextLayer.ForegroundColor = UIColor.Black.CGColor; 
        charsLeftTextLayer.BackgroundColor = UIColor.Clear.CGColor; 
        charsLeftTextLayer.Frame = new CGRect(582, 153, 99, 21); 
        // Center text to keep it aligned during scaling
        charsLeftTextLayer.AlignmentMode = CATextLayerAlignmentMode.Center;

        View.Layer.AddSublayer(charsLeftTextLayer); 
    } 

    private void PulseCharsLeft() { 
        // Animate transform.scale instead of fontSize for reliable results
        var animation = CABasicAnimation.FromKeyPath("transform.scale"); 
        animation.From = NSNumber.FromFloat(1.0f); // Original size
        animation.To = NSNumber.FromFloat(1.33f); // Equivalent to scaling 12pt to 16pt
        animation.Duration = 0.6; // Snappier pulse for better user feedback
        animation.AutoReverses = true; 
        animation.TimingFunction = CAMediaTimingFunction.FromName(CAMediaTimingFunction.EaseInEaseOut);
        // Add a key to prevent duplicate animations if user triggers the limit quickly
        charsLeftTextLayer.AddAnimation(animation, "PulseAnimation"); 
    } 

    #region UITextView delegates 
    [Export("textView:shouldChangeTextInRange:replacementText:")] 
    public bool ShouldChangeText(UITextView textView, NSRange range, string text) { 
        // Calculate correct new length (account for replaced text)
        var newLength = textView.Text.Length - range.Length + text.Length;
        
        if (newLength > MAX_COMMENTS_CHARS) { 
            PulseCharsLeft(); 
            return false; 
        }
        // Update the character count display as the user types
        charsLeftTextLayer.String = $"{MAX_COMMENTS_CHARS - newLength} chars left";
        return true; 
    } 
    #endregion 
}

Alternative Swift Implementation #

If you prefer working in Swift, here’s the equivalent solution:

class MyViewController: UIViewController, UITextViewDelegate {
    private let maxCommentsChars = 500
    private var charsLeftTextLayer = CATextLayer()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupCharsLeftLayer()
    }
    
    private func setupCharsLeftLayer() {
        let uiFont = UIFont.systemFont(ofSize: 12)
        charsLeftTextLayer.contentsScale = UIScreen.main.scale
        charsLeftTextLayer.font = CTFontCreateWithName(uiFont.fontName as CFString, uiFont.pointSize, nil)
        charsLeftTextLayer.fontSize = uiFont.pointSize
        charsLeftTextLayer.string = "\(maxCommentsChars) chars left"
        charsLeftTextLayer.foregroundColor = UIColor.black.cgColor
        charsLeftTextLayer.backgroundColor = UIColor.clear.cgColor
        charsLeftTextLayer.frame = CGRect(x: 582, y: 153, width: 99, height: 21)
        charsLeftTextLayer.alignmentMode = .center
        view.layer.addSublayer(charsLeftTextLayer)
    }
    
    private func pulseCharsLeft() {
        let animation = CABasicAnimation(keyPath: "transform.scale")
        animation.fromValue = 1.0
        animation.toValue = 1.33
        animation.duration = 0.6
        animation.autoreverses = true
        animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        charsLeftTextLayer.add(animation, forKey: "PulseAnimation")
    }
    
    func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
        let newLength = textView.text.count - range.length + text.count
        if newLength > maxCommentsChars {
            pulseCharsLeft()
            return false
        }
        charsLeftTextLayer.string = "\(maxCommentsChars - newLength) chars left"
        return true
    }
}

What Changed? #

• Font Compatibility: Switched to CTFont to ensure CATextLayer recognizes the font properly during animation.
• Animation Key Path: Used transform.scale instead of fontSize—this leverages Core Animation’s native transform support, which is far more reliable for layer animations.
• Better User Feedback: Added live character count updates and adjusted the animation duration for a snappier, more noticeable pulse.
• Prevent Duplicate Animations: Added an animation key to avoid stacking multiple pulse animations if the user triggers the limit repeatedly.

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