贝塞尔结合CAShapeLayer绘制路线,CABasicAnimation实现的小动画

蔚落 2022-07-17 00:52 165阅读 0赞

最近项目需求,做的一个标识正在直播的小动画,代码如下:

\#import "YGIsOnLiveAnmationView.h"  
  
@interface YGIsOnLiveAnmationView ()  
  
@property (strong, nonatomic) CAShapeLayer \* progressLayer;  
@property (strong, nonatomic) CAShapeLayer \* triangleLayer;  
  
@property (strong, nonatomic) CABasicAnimation \*rotateAnimation;  
  
@property (assign, nonatomic) CGFloat progressLineWidth;  
  
@property (strong, nonatomic) UIColor \* progressLineColor;  
  
@end  
  
@implementation YGIsOnLiveAnmationView  
  
/\*  
// Only override drawRect: if you perform custom drawing.  
// An empty implementation adversely affects performance during animation.  
\- (void)drawRect:(CGRect)rect \{  
    // Drawing code  
\}  
\*/  
  
\- (instancetype)initWithFrame:(CGRect)frame lineWidth:(CGFloat)lineWidth  lineColor:(UIColor \*)lineColor \{  
      
    self  = \[self initWithFrame:frame\];  
      
    if (self) \{  
          
        self.progressLineWidth = lineWidth;  
        self.progressLineColor = lineColor;  
          
        \[self.layer addSublayer:self.progressLayer\];  
        \[self.layer addSublayer:self.triangleLayer\];  
    \}  
      
    return self;  
\}  
  
\- (void)startProgressAnimation \{  
    \[self.progressLayer addAnimation:self.rotateAnimation forKey:@"group"\];  
\}  
  
//画三角形  
\- (CAShapeLayer \*)triangleLayer \{  
      
    if (!\_triangleLayer) \{  
          
        \_triangleLayer     = \[CAShapeLayer layer\];  
  
        UIBezierPath \*path = \[UIBezierPath bezierPath\];  
          
        CGFloat X = self.center.x;  
        CGFloat Y = self.center.y;  
          
        \[path moveToPoint   :CGPointMake(X-3, Y-5)\];  
        \[path addLineToPoint:CGPointMake(X-3, Y+5)\];  
        \[path addLineToPoint:CGPointMake(X+5, Y)\];  
          
        \[path closePath\];  
        \[self.progressLineColor setFill\];  
        \[path fill\];  
          
        \_triangleLayer.path = path.CGPath;  
    \}  
    return \_triangleLayer;  
\}  
  
//画进度  
\- (CAShapeLayer \*)progressLayer \{  
    if (!\_progressLayer) \{  
        \_progressLayer = \[CAShapeLayer layer\];  
          
        CGFloat width           = CGRectGetWidth(self.frame);  
        CGFloat height          = CGRectGetHeight(self.frame);  
          
        \_progressLayer.frame    = CGRectMake(0, 0, width, height);  
        \_progressLayer.position = CGPointMake(width/2.0,height/2.0);  
          
        UIBezierPath \*aPath     = \[UIBezierPath bezierPathWithArcCenter:CGPointMake(width/2.0, height/2.0)  
                                                             radius:(width - self.progressLineWidth)/2.0  
                                                         startAngle:0  
                                                           endAngle:M\_PI\_4 \* 7  
                                                          clockwise:YES\];  
        \[aPath stroke\];  
          
        \_progressLayer.path        = aPath.CGPath;  
        \_progressLayer.fillColor   = \[UIColor clearColor\].CGColor;  
        \_progressLayer.lineWidth   = self.progressLineWidth;  
        \_progressLayer.strokeColor = self.progressLineColor.CGColor;  
        \_progressLayer.lineCap     = kCALineCapRound;  
    \}  
    return \_progressLayer;  
\}  
  
\- (CABasicAnimation \*)rotateAnimation \{  
    if (!\_rotateAnimation) \{  
        \_rotateAnimation                     = \[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"\];  
        \_rotateAnimation.timingFunction      = \[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear\];  
        \_rotateAnimation.toValue             = @(M\_PI \* 2);  
        \_rotateAnimation.fromValue           = @(0);  
        \_rotateAnimation.duration            = 1;  
        \_rotateAnimation.removedOnCompletion = NO;  
        \_rotateAnimation.repeatCount         = FLT\_MAX;  
    \}  
    return \_rotateAnimation;  
\}  
  
@end