在 iOS 中使用 Objective C 为 UlLabel 框架周围的边框设置动画

Posted 2023-03-13

【中文标题】在 iOS 中使用 Objective C 为 UlLabel 框架周围的边框设置动画

【英文标题】：Animating a border around UlLabel frame using Objective C in iOS

【发布时间】：2017-07-14 07:54:42

【问题描述】：

我正在使用 Objective C 开发 iPhone 应用程序，我需要为 UILabel 制作边框动画。

我使用 CABasicAnimation 尝试了以下代码：

CABasicAnimation* borderAnimation = [CABasicAnimation animationWithKeyPath:@"borderWidth"];
[borderAnimation setFromValue:[NSNumber numberWithFloat:4.0f]];
[borderAnimation setToValue:[NSNumber numberWithFloat:0.0f]];
[borderAnimation setRepeatCount:1.0];
[borderAnimation setAutoreverses:NO];
[borderAnimation setDuration:0.7f];
[focusScannerView.layer addAnimation:borderAnimation forKey:@"animateBorder"];

但边框动画效果不佳。有人知道我该怎么做吗？提前谢谢你。

【参考方案1】：

#import "ViewController.h"

@interface ViewController ()

    UIBezierPath *path;
    CAShapeLayer *shapeLayer;
    int lineNo;

@property (nonatomic, weak) IBOutlet UILabel *textLabel;

@end

@implementation ViewController

- (void)viewDidLoad 
    [super viewDidLoad];
    path = [UIBezierPath bezierPath];
    shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
    shapeLayer.lineWidth = 3.0;
    shapeLayer.fillColor = [[UIColor clearColor] CGColor];

    [_textLabel addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(startAnimation)]];

    // Do any additional setup after loading the view, typically from a nib.


-(void)startAnimation
    lineNo = 0;
    [self drawLine:lineNo];


-(void)drawLine:(int)line
    CGPoint startPoint;
    CGPoint endPoint;
    switch (line) 
        case 0:
            startPoint = CGPointMake(self.textLabel.frame.origin.x, self.textLabel.frame.origin.y);
            endPoint = CGPointMake(CGRectGetMaxX(self.textLabel.frame), self.textLabel.frame.origin.y);
            break;
        case 1:
            startPoint = CGPointMake(CGRectGetMaxX(self.textLabel.frame), self.textLabel.frame.origin.y);
            endPoint = CGPointMake(CGRectGetMaxX(self.textLabel.frame), CGRectGetMaxY(self.textLabel.frame));
            break;
        case 2:
            startPoint = CGPointMake(CGRectGetMaxX(self.textLabel.frame), CGRectGetMaxY(self.textLabel.frame));
            endPoint = CGPointMake(self.textLabel.frame.origin.x, CGRectGetMaxY(self.textLabel.frame));
            break;
        case 3:
            startPoint = CGPointMake(self.textLabel.frame.origin.x, CGRectGetMaxY(self.textLabel.frame));
            endPoint = CGPointMake(self.textLabel.frame.origin.x, self.textLabel.frame.origin.y);
            break;
        default:
            return;
    

    [self animateStartPoint:startPoint andEndPoint:endPoint];



-(void)animateStartPoint:(CGPoint) startPoint andEndPoint:(CGPoint)endPoint
    [path moveToPoint:startPoint];
    [path addLineToPoint:endPoint];
    shapeLayer.path = [path CGPath];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 5;
    animation.removedOnCompletion = NO;
    animation.fromValue = @(0);
    animation.toValue = @(1);
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [shapeLayer addAnimation:animation forKey:@"drawLineAnimation"];

    [self.view.layer addSublayer:shapeLayer];
    lineNo++;
    [self drawLine:lineNo];




- (void)didReceiveMemoryWarning 
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.



@end

【讨论】：

我试过上面的代码，这对于在标签框周围绘制一个矩形非常有用。动画后如何重置标签（比如隐藏蓝色边框）？

只需使用以下行：[shapeLayer removeFromSuperlayer];