iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer

所属分类: 软件编程 / IOS 阅读数: 864
收藏 0 赞 0 分享

iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer

shape.gif

demo.png

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

 CALayer *layer = [CALayer layer];
 layer.backgroundColor = [UIColor redColor].CGColor; //圆环底色
 layer.frame = CGRectMake(100, 100, 110, 110);


 //创建一个圆环
 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(55, 55) radius:50 startAngle:0 endAngle:M_PI*2 clockwise:YES];

 //圆环遮罩
 CAShapeLayer *shapeLayer = [CAShapeLayer layer];
 shapeLayer.fillColor = [UIColor clearColor].CGColor;
 shapeLayer.strokeColor = [UIColor redColor].CGColor;
 shapeLayer.lineWidth = 5;
 shapeLayer.strokeStart = 0;
 shapeLayer.strokeEnd = 0.8;
 shapeLayer.lineCap = @"round";
 shapeLayer.lineDashPhase = 0.8;
 shapeLayer.path = bezierPath.CGPath;

 //颜色渐变
 NSMutableArray *colors = [NSMutableArray arrayWithObjects:(id)[UIColor redColor].CGColor,(id)[UIColor whiteColor].CGColor, nil];
 CAGradientLayer *gradientLayer = [CAGradientLayer layer];
 gradientLayer.shadowPath = bezierPath.CGPath;
 gradientLayer.frame = CGRectMake(50, 50, 60, 60);
 gradientLayer.startPoint = CGPointMake(0, 1);
 gradientLayer.endPoint = CGPointMake(1, 0);
 [gradientLayer setColors:[NSArray arrayWithArray:colors]];
 [layer addSublayer:gradientLayer]; //设置颜色渐变
 [layer setMask:shapeLayer]; //设置圆环遮罩
 [self.view.layer addSublayer:layer];

 //动画
 CABasicAnimation *scaleAnimation1 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
 scaleAnimation1.fromValue = [NSNumber numberWithFloat:1.0];
 scaleAnimation1.toValue = [NSNumber numberWithFloat:1.5];
 scaleAnimation1.autoreverses = YES;
// scaleAnimation1.fillMode = kCAFillModeForwards;
 scaleAnimation1.duration = 0.8;

 CABasicAnimation *rotationAnimation2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
 rotationAnimation2.fromValue = [NSNumber numberWithFloat:0];
 rotationAnimation2.toValue = [NSNumber numberWithFloat:6.0*M_PI];
 rotationAnimation2.autoreverses = YES;
// scaleAnimation.fillMode = kCAFillModeForwards;
 rotationAnimation2.repeatCount = MAXFLOAT;
 rotationAnimation2.beginTime = 0.8; //延时执行,注释掉动画会同时进行
 rotationAnimation2.duration = 2;


 //组合动画
 CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
 groupAnnimation.duration = 4;
 groupAnnimation.autoreverses = YES;
 groupAnnimation.animations = @[scaleAnimation1, rotationAnimation2];
 groupAnnimation.repeatCount = MAXFLOAT;
 [layer addAnimation:groupAnnimation forKey:@"groupAnnimation"];

}

- (void)didReceiveMemoryWarning {
 [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
}
@end

关键的地方在于CABasicAnimation对象的初始化方式中keyPath的设定。在iOS中有以下几种不同的keyPath,代表着不同的效果:

以上就是iOS渐变圆环旋转动画 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

更多精彩内容其他人还在看

iOS基础动画教程分享

这篇文章主要为大家详细介绍了iOS几种基础动画教程,包括位置动画、透明度动画、大小动画等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS如何获取屏幕宽高、设备型号、系统版本信息

这篇文章主要介绍了iOS如何获取屏幕宽高、设备型号、系统版本信息的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果

这篇文章主要介绍了iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果的相关资料,非常不错,具有参考解决价值,需要的朋友可以参考下
收藏 0 赞 0 分享

详解iOS使用Keychain中的kSecClassGenericPassword存储数据

iOS设备中的Keychain是一个安全的存储容器,本篇文章主要介绍了iOS使用Keychain中的kSecClassGenericPassword存储数据,有兴趣的可以了解一下。
收藏 0 赞 0 分享

详解IOS四种保存数据的方式

本篇文章主要介绍了OS四种保存数据的方式,现在分享给大家,也给大家做个参考。感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

iOS图片界面翻页切换效果

这篇文章主要为大家详细介绍了iOS图片界面翻页切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

IOS中对Url进行编码和解码示例

本篇文章主要介绍了IOS中对Url进行编码和解码示例,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

iOS实现圆角箭头矩形的提示框

不知道大家发现了没,在现在的很多App中常使用圆角箭头矩形, 如微博分组提示框, 地图坐标显示点等。iPad 中有 UIPopoverController 类供开发使用, iPhone中就需要开发人员定制了。那么下面这篇文中就来聊聊定制圆角箭头矩形提示框,有需要的朋友们可以参考借
收藏 0 赞 0 分享

iOS将视频录像切成一张张缩略图

这篇文章主要为大家详细介绍了iOS将视频录像切成一张张缩略图的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS获取验证码倒计时效果

这篇文章主要为大家详细介绍了iOS获取验证码倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享
查看更多