iOS 边框 跑马灯效果

simulator_screenshot_87077558-99FF-4C72-A575-97C45131EDF0.png

代码

- (void)viewDidLoad {
    [super viewDidLoad];
     
    UIView *layerView = [[UIView alloc] initWithFrame:CGRectMake(20, 150, [UIScreen mainScreen].bounds.size.width - 40, 200)];
    layerView.layer.cornerRadius = 8;
    layerView.backgroundColor = [UIColor blackColor];
    layerView.layer.masksToBounds = YES;
    [self.view addSubview:layerView];
    
    
    CAShapeLayer *lineShapeLayer = [CAShapeLayer layer];
    lineShapeLayer.path = [self bezierPath].CGPath;
    lineShapeLayer.fillColor= [UIColor clearColor].CGColor;
    lineShapeLayer.strokeColor= [UIColor redColor].CGColor;
    lineShapeLayer.lineWidth=4;
//    lineShapeLayer.opacity=0.5;
//    lineShapeLayer.position= layerView.center;
//    lineShapeLayer.transform = CATransform3DMakeScale(0.9,0.9,1.0f);
    [layerView.layer addSublayer:lineShapeLayer];
    
    
    
    CAShapeLayer*scrollShapeLayer = [CAShapeLayer layer];
    scrollShapeLayer.path= [self bezierPath].CGPath;
    scrollShapeLayer.strokeEnd=0.f;
    scrollShapeLayer.lineWidth= 6;
    scrollShapeLayer.fillColor= [UIColor clearColor].CGColor;
    scrollShapeLayer.strokeColor= [UIColor greenColor].CGColor;
    scrollShapeLayer.shadowColor= [UIColor greenColor].CGColor;
    scrollShapeLayer.shadowRadius=4;
    scrollShapeLayer.shadowOpacity=1;
    scrollShapeLayer.lineCap=kCALineCapRound;
    [layerView.layer addSublayer:scrollShapeLayer];
    
    
    CABasicAnimation*strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    strokeStartAnimation.fromValue = @0; //百分比
    strokeStartAnimation.toValue = @(0.95);
    CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    strokeEndAnimation.fromValue = @(0.05);
    strokeEndAnimation.toValue=@(1);
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration= 2.f;
    group.repeatCount = MAXFLOAT;
    group.autoreverses = NO;///来回循环
    group.animations=@[strokeStartAnimation, strokeEndAnimation];
    [scrollShapeLayer addAnimation:group forKey:nil];
 
}

- (UIBezierPath *)bezierPath {
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGFloat selfWidth = [UIScreen mainScreen].bounds.size.width - 40;
    [path moveToPoint:CGPointMake(0, 8)];
    [path addArcWithCenter:CGPointMake(8, 8) radius:8 startAngle:M_PI endAngle:M_PI * 1.5 clockwise:YES];
    [path addLineToPoint:CGPointMake(selfWidth - 8, 0)];
    [path addArcWithCenter:CGPointMake(selfWidth - 8, 8) radius:8 startAngle:M_PI * -0.5 endAngle:0 clockwise:YES];
    [path addLineToPoint:CGPointMake(selfWidth, 192)];
    [path addArcWithCenter:CGPointMake(selfWidth -8, 192) radius:8 startAngle:0 endAngle:M_PI * 0.5 clockwise:YES];
    [path addLineToPoint:CGPointMake(8, 200)];
    [path addArcWithCenter:CGPointMake(8, 192) radius:8 startAngle:M_PI * 0.5 endAngle:M_PI clockwise:YES];
    [path closePath];
    return path;
}
 

分为 3个步骤
1 边框线
2 光标
3 动画