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"];
- 创建一个CGPathRef对象，就是动画的路线
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);
- 旋转动画
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"];
