高仿映客之八启动动画、圆形动画、渐变动画

前言####

我相信大多数的App都有一个启动动画、或者启动页什么的，本项目主要是借助启动页的方式，解说我们在项目中常用的几个动画效果，比如：圆形递减动画、缩放动画、渐变色动画
映客源码下载地址：高仿映客项目源码
映客系列详细解说目录:映客系列详细解说目录

启动动画.gif

圆形递减动画####

主要是先制作动画路径是圆形，然后启动定时器对strokeEnd做定时动画

  #pragma mark - 增加圆形进度条

- (void)addRoundProcessLayerWithSuperView:(UIView *)superView
{
self.processLayer.frame = superView.bounds;
self.processLayer.fillColor = [UIColor clearColor].CGColor;
self.processLayer.lineWidth = 2.0;
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:superView.bounds];
self.processLayer.path = circlePath.CGPath;
self.processLayer.strokeColor = [UIColor redColor].CGColor;
self.processLayer.strokeStart = 0;
self.processLayer.strokeEnd = 1.0;
[superView.layer addSublayer:self.processLayer];
[self startTime];
}
- (void)startTime
{
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(timerClocking) userInfo:nil repeats:YES];
}
- (void)timerClocking
{
self.processLayer.strokeEnd -=0.02;  //动画一次设置描绘结束区域
if(self.processLayer.strokeEnd < 0.0)
{
    [self stopTime];
    self.jumpButton.userInteractionEnabled = YES;
    [self addTransformScaleWithSuperView:self.jumpButton];
  }  
 }
- (void)stopTime
{
[self.timer invalidate];
self.timer = nil;

}

缩放动画####

缩放动画比较简单，一般采用CAKeyframeAnimation，设置动画的参数是transform.scale，动画的区间是basc.values = @[@1.0,@1.2,@1.0];

#pragma mark - 增加放大效果

- (void)addTransformScaleWithSuperView:(UIView *)superView
{
CAKeyframeAnimation *basc = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
basc.values = @[@1.0,@1.2,@1.0];
basc.duration = 1.0;
basc.repeatCount = CGFLOAT_MAX;
[superView.layer addAnimation:basc forKey:@"transform"];
}

文字渐变动画####

渐变动画主要是运用CAGradientLayer渐变类
渐变的本质：为需要渐变的层增加渐变层，使我们看起来是渐变的

#pragma mark - 增加渐变颜色

- (void)addGradientLayerWithSuperView:(UIView *)superView;
 {
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.anchorPoint = CGPointMake(0, 0);  //渐变层定位锚点
gradient.startPoint = CGPointMake(0, 0.5); //渐变层起始点
gradient.endPoint = CGPointMake(1, 0.5);  //渐变层终点
     //设置可以知道渐变是从左到右
gradient.colors = @[(__bridge id)[UIColor colorWithWhite:0.6 alpha:1.0].CGColor,
                    (__bridge id)[UIColor redColor].CGColor,
                    (__bridge id)[UIColor colorWithWhite:0.6 alpha:1.0].CGColor,];   //渐变颜色数组
gradient.locations = @[@0.2,@0.5,@0.8];   //渐变颜色的区间分布
gradient.bounds =self.view.bounds;
[self.view.layer addSublayer:gradient];
[self addAnimationToLayer:gradient];
gradient.mask = superView.layer;
 }
- (void)addAnimationToLayer:(CALayer *)layer
{
CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"locations"];
basic.fromValue = @[@0,@0,@0.4];
basic.toValue = @[@0.6,@0.8,@1.0];
basic.duration =3.0;
basic.repeatCount = MAXFLOAT;
[layer addAnimation:basic forKey:NSStringFromClass([layer class])];
}