所有复杂动画都是由简单动画组合而成的

swift和oc demo

滑动来解锁

动画细节拆分:

1.使用CAGradientLayer处理颜色渐变

-(CAGradientLayer *)gradientLayer{

if (!_gradientLayer) {

_gradientLayer = [CAGradientLayer layer];

_gradientLayer.frame = CGRectMake(-self.bounds.size.width, self.bounds.origin.y, 3

* self.bounds.size.width, self.bounds.size.height);

_gradientLayer.startPoint = CGPointMake(0, 0.5);

_gradientLayer.endPoint = CGPointMake(1.0, 0.5);

_gradientLayer.colors = @[

(__bridge id)[UIColor blackColor].CGColor,

(__bridge id)[UIColor whiteColor].CGColor,

(__bridge id)[UIColor blackColor].CGColor

];

_gradientLayer.locations = @[@0.25,@0.5,@0.75];

}

return _gradientLayer;

}

渐变

2.使用CABasicAnimation为CAGradientLayer添加动画

//添加动画

-(void)animationWithGradientLayer{

CABasicAnimation *gradientAnimation = [CABasicAnimation animationWithKeyPath:@"locations"];

gradientAnimation.fromValue = @[@0.0,@0.0,@0.25];

gradientAnimation.toValue = @[@0.75,@1.0,@1.0];

gradientAnimation.duration = 3.0;

gradientAnimation.repeatCount = MAXFLOAT;

[self.gradientLayer addAnimation:gradientAnimation forKey:nil];

}

滑动来解锁2.gif

3.将文字生成图片,设置gradientLayer的mask属性为图片,裁剪掉文字以外的部分

//文字生成图片

UIGraphicsBeginImageContext(self.bounds.size);

NSMutableDictionary *dict = [NSMutableDictionary dictionary];

dict[NSForegroundColorAttributeName] = [UIColor redColor];

dict[NSFontAttributeName] = [UIFont systemFontOfSize:30.0];

[_text drawInRect:self.bounds withAttributes:@{NSForegroundColorAttributeName: [UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:30.0]}];

CGContextRef context= UIGraphicsGetCurrentContext ();

CGContextDrawPath (context, kCGPathStroke );

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

CALayer *maskLayer = [CALayer layer];

maskLayer.backgroundColor = [UIColor clearColor].CGColor;

maskLayer.frame = CGRectOffset(self.bounds, self.bounds.size.width, 0);

maskLayer.contents = (__bridge id _Nullable)(image.CGImage);

//使用蒙版裁剪掉没用的区域

self.gradientLayer.mask = maskLayer;