CAKeyframeAnimation

CoreAnimation入门
需求如下：

屏幕快照 2019-03-12 下午3.12.57.png
通过负载率的百分比调整箭头的角度，图一个简单，背景那个圆圈是UI提供的图片。

思路

给一个路径，然后设置其百分比就行了。

具体实现如下：

#import "ViewController.h"
#include <math.h>

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UITextField *precentField;
@property (weak, nonatomic) IBOutlet UIImageView *arrowView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}


- (IBAction)confirmAction:(UIButton *)sender {
    [self.view endEditing:YES];
    NSString *precent = self.precentField.text;
    CGFloat precentValue = [precent floatValue];
    [self turnWithPrecent:precentValue];
}

- (void)turnWithPrecent:(CGFloat)precent{
    
    
    CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRelativeArc(path, NULL, 73, 73,55, -M_PI-(0.5*M_PI-acos(47.0/73.0)), (2*M_PI-acos(47.0/73.0)*2)*precent);

    keyframeAnimation.path = path;
//    keyframeAnimation.delegate = self;
    CGPathRelease(path);

    
    CABasicAnimation* rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.fromValue = [NSNumber numberWithFloat: -M_PI-(0.5*M_PI-acos(47.0/73.0))];

    rotationAnimation.toValue = [NSNumber numberWithFloat: -M_PI-(0.5*M_PI-acos(47.0/73.0))+(2*M_PI-acos(47.0/73.0)*2)*precent];

    
    
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.animations = @[keyframeAnimation,rotationAnimation];
    animationGroup.duration = 2.0*precent;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.removedOnCompletion = NO;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [self.arrowView.layer addAnimation:animationGroup forKey:@"rotationAnimation"];

}

@property (nonatomic, strong)UIImageView *imageView;  //设备进度背景
@property (nonatomic, strong)UIImageView *deviceIcon;  //设备图片
@property (nonatomic, strong)UILabel *percentageLabel;  //百分比
@property (nonatomic, strong)UILabel *deviceRateLabel; //负载率
@property (nonatomic, nonatomic) UIImageView *arrowView;

- (void)addSubViews{
    [self addSubview:self.imageView];
    [self addSubview:self.deviceIcon];
    [self addSubview:self.percentageLabel];
    [self addSubview:self.deviceRateLabel];
    [self.imageView addSubview:self.arrowView];
}

- (void)setConstraints{
    [self.imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.mas_equalTo(self);
        make.top.mas_equalTo(self).mas_offset(20);
        make.height.mas_equalTo(120);
        make.width.mas_equalTo(146);
    }];
    
    [self.arrowView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.imageView.mas_bottom).mas_offset(1);
        make.left.mas_equalTo(self.imageView).offset(10);
        make.height.mas_equalTo(10);
        make.width.mas_equalTo(10);
    }];
    
    [self.deviceIcon mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.mas_equalTo(self.imageView);
        make.centerY.mas_equalTo(self.imageView);
        make.width.mas_equalTo(50);
        make.height.mas_equalTo(50);
        
    }];
    
    [self.percentageLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self);
        make.top.mas_equalTo(self.deviceIcon.mas_bottom).mas_offset(10);
        make.width.mas_equalTo(kSCREEN_WIDTH);
        make.height.mas_equalTo(30);
        
    }];
    
    [self.deviceRateLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self);
        make.top.mas_equalTo(self.percentageLabel.mas_bottom).mas_offset(10);;
        make.width.mas_equalTo(kSCREEN_WIDTH);
        make.height.mas_equalTo(12);
        
    }];
}

- (UIImageView *)imageView{
    return _imageView = _imageView?:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"fmp_Path_img"]];
}

- (UIImageView *)deviceIcon{
    return _deviceIcon = _deviceIcon?:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"fmp_device_01_img"]];
}

-(UILabel *)percentageLabel{
    if(!_percentageLabel){
        _percentageLabel = [[UILabel alloc]init];
        _percentageLabel.textColor = [UIColor colorWithHexString:@"#07C08C"];
        _percentageLabel.font = [UIFont systemFontOfSize:12];
        _percentageLabel.textAlignment = NSTextAlignmentCenter;
        
    }
    return _percentageLabel;
}

-(UILabel *)deviceRateLabel{
    if(!_deviceRateLabel){
        _deviceRateLabel = [[UILabel alloc]init];
        _deviceRateLabel.textColor = [UIColor SCTextGrayColor];
        _deviceRateLabel.font = [UIFont systemFontOfSize:12];
        _deviceRateLabel.textAlignment = NSTextAlignmentCenter;

    }
    return _deviceRateLabel;
}

- (UIImageView *)arrowView{
    return _arrowView = _arrowView?:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"fmp_path_arrowImg"]];
}

相关知识点：

1、这个需求点最核心的内容就是如何使用CAKeyframeAnimation创建一个带路径的动画效果。Path方式
1）创建动画对象进行位移

CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

2. 创建一个CGPathRef对象，就是动画的路线

CGMutablePathRef path = CGPathCreateMutable();

3. 自动沿着弧度移动

CGPathAddRelativeArc(path, NULL, 73, 73,55, -M_PI-(0.5*M_PI-acos(47.0/73.0)), (2*M_PI-acos(47.0/73.0)*2)*precent);

4. 旋转动画

CABasicAnimation* rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

5）动画组

CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = @[keyframeAnimation,rotationAnimation];    
animationGroup.duration = 2.0*precent; 
//填充效果：动画结束后，动画将保持最后的表现状态
animationGroup.fillMode = kCAFillModeForwards; 
animationGroup.removedOnCompletion = NO;
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 
[self.arrowView.layer addAnimation:animationGroup forKey:@"rotationAnimation"];

核心动画组例子