所有復雜動畫都是由簡單動畫組合而成的

swift和oc demo

滑動來解鎖

動畫細節(jié)拆分:

• 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);
 
    //使用蒙版裁剪掉沒用的區(qū)域
    self.gradientLayer.mask = maskLayer;