CoreAnimation入門
需求如下：
屏幕快照 2019-03-12 下午3.12.57.png
通過負載率的百分比調(diào)整箭頭的角度，圖一個簡單，背景那個圓圈是UI提供的圖片。
思路
給一個路徑，然后設(shè)置其百分比就行了。
具體實現(xiàn)如下：
#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; //設(shè)備進度背景
@property (nonatomic, strong)UIImageView *deviceIcon; //設(shè)備圖片
@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"]];
}
相關(guān)知識點：
1、這個需求點最核心的內(nèi)容就是如何使用CAKeyframeAnimation創(chuàng)建一個帶路徑的動畫效果。Path方式
1）創(chuàng)建動畫對象進行位移
CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
- 創(chuàng)建一個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);
- 旋轉(zhuǎn)動畫
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
5）動畫組
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = @[keyframeAnimation,rotationAnimation];
animationGroup.duration = 2.0*precent;
//填充效果：動畫結(jié)束后，動畫將保持最后的表現(xiàn)狀態(tài)
animationGroup.fillMode = kCAFillModeForwards;
animationGroup.removedOnCompletion = NO;
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[self.arrowView.layer addAnimation:animationGroup forKey:@"rotationAnimation"];
