iOS环形渐变动画

关键词：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. 动画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. 动画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

• demo
  https://github.com/imisszyl/iOS