关键词：CAAnimationGroup、CAShapeLayer、贝塞尔曲线
- 宏定义以及属性
#define KShapeLayerRadius 30 // 半径
#define KShapeLayerWidth 8 // 圆环宽
@interface ViewController ()
@property (nonatomic, strong) UIImageView * layerImageView; // 渐变层
@property (nonatomic, strong) CAShapeLayer * shapeLayer; // 遮罩layer
@property (nonatomic, strong) CAAnimationGroup * animationGroup; // 动画组
@end
- 先使用CAShapeLayer创建一个遮罩层
_shapeLayer = [CAShapeLayer layer];
// 圆环颜色
_shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
// 圆环中心填充色
_shapeLayer.fillColor = [UIColor clearColor].CGColor;
// 圆环宽
_shapeLayer.lineWidth = KShapeLayerWidth;
// 用贝塞尔曲线画圆环
_shapeLayer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(KShapeLayerWidth / 2.0, KShapeLayerWidth / 2, KShapeLayerRadius * 2 - KShapeLayerWidth, KShapeLayerRadius * 2 - KShapeLayerWidth) cornerRadius:KShapeLayerRadius - KShapeLayerWidth / 2.0].CGPath;
// 间断的虚线模式
_shapeLayer.lineDashPattern = @[@6,@3];
// 添加到view.layer
[self.view.layer addSublayer:_shapeLayer];
使用lineDashPattern和不使用的效果
虚线模式
实线模式
-
创建渐变层
渐变层可以使用图片和CAGradientLayer，为了更佳的效果，我们这儿使用图片。
gradient.png
_layerImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"gradient.png"]];
_layerImageView.frame = CGRectMake(100, 100, KShapeLayerRadius * 2, KShapeLayerRadius * 2);
// 添加遮罩
_layerImageView.layer.mask = self.shapeLayer;
// 添加到view.layer
[self.view.layer addSublayer:_layerImageView.layer];
效果如下
渐变1.png
渐变2.png
- 动画组
- 动画1
/// 起点动画
CABasicAnimation * strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
// 线性
strokeStartAnimation.fromValue = @(-1);
strokeStartAnimation.toValue = @(1);
/// 终点动画
CABasicAnimation * strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeEndAnimation.fromValue = @(0);
strokeEndAnimation.toValue = @(1);
// 组合动画
_animationGroup = [CAAnimationGroup animation];
_animationGroup.animations = @[strokeEndAnimation, strokeStartAnimation];
_animationGroup.duration = 2.0;
_animationGroup.repeatCount = CGFLOAT_MAX;
_animationGroup.fillMode = kCAFillModeForwards;
_animationGroup.removedOnCompletion = NO;
效果
animat1.gif
- 动画2
/// 起点动画
CABasicAnimation * strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
// 线性（可以多多调试，出现各种效果）
strokeStartAnimation.fromValue = @(-1);
strokeStartAnimation.byValue = @(0);
strokeStartAnimation.toValue = @(1);
/// 终点动画
CABasicAnimation * strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeEndAnimation.fromValue = @(0);
strokeEndAnimation.byValue = @(1);
strokeEndAnimation.toValue = @(2);
// 组合动画
_animationGroup = [CAAnimationGroup animation];
_animationGroup.animations = @[strokeEndAnimation, strokeStartAnimation];
_animationGroup.duration = 2.0;
_animationGroup.repeatCount = CGFLOAT_MAX;
_animationGroup.fillMode = kCAFillModeForwards;
_animationGroup.removedOnCompletion = NO;
animat2.gif
