1首先定义
@interface ViewController ()
{
CAGradientLayer* _gridentlayer;
}
@end
2 在viewDidLoad中实现
//这里出现了CALayer的另一个子类CAGradientLayer,这个类的作用就是能在Layer上绘制出渐变颜色的效果,然后在viewDidLoad()中添加如下代码:
_gridentlayer = [[CAGradientLayer alloc] init];
_gridentlayer.bounds=CGRectMake(0, 0,self.backgroundView.frame.size.width, self.backgroundView.frame.size.height);
_gridentlayer.position=CGPointMake(self.backgroundView.frame.size.width/2, self.backgroundView.frame.size.height/2);
// gradientLayer.colors = [
//UIColor.blackColor().CGColor,
// UIColor.whiteColor().CGColor,
// UIColor.blackColor().CGColor
// ]
//上述两行的代码是设置Layer的大小及位置
[_gridentlayer setStartPoint:CGPointMake(0, 0.5)];
[_gridentlayer setEndPoint:CGPointMake(1, 0.5)];
/**
CAGradientLayer的colors属性类型是一个数组[AnyObject],这就意味着我们可以实现多个颜色的渐变效果,并且可以规定各个颜色的顺序。不过在我们这个示例中我们只需要两种颜色,不过需要注意的是虽然颜色只有两种,但是整个颜色渐变的过程中有三个原色点,那就是黑、白、黑,所以我们在这个数组中也需要按照原色点的数量和顺序添加相应的颜色,哪怕颜色都是一样的。
我们既然设置了渐变的三个原色,那么就要对这原色出现的位置进行设置,接着添加如下代码:
*/
[_gridentlayer setColors:[NSArray arrayWithObjects:(id)[UIColor blackColor].CGColor,(id)[UIColor whiteColor].CGColor,(id)[UIColor blackColor].CGColor, nil]];
[_gridentlayer setLocations:@[@0.2 ,@0.5,@0.8]];
[self.backgroundView.layer addSublayer:_gridentlayer];
}
-(void)viewDidAppear:(BOOL)animated{
[self gradinetAnimate];
}
-(void)gradinetAnimate{
// [email protected]"caoxiang";
// _gridentlayer.mask=self.textlabel.layer;
// 首先,创建了一个locations类型的动画实例gradient,将fromValue属性,也就是起始位置的属性设置为[0, 0, 0.25],它的意思是动画开始前,黑色、白色这两个原色的位置在整个Layer的最前端,第二个黑色原色在0.25的位置:
CABasicAnimation * animation=[CABasicAnimation animationWithKeyPath:@"locations"];
[animation setFromValue:@[@0,@0,@0.25]];
[animation setToValue:@[@0.75,@1,@1]];
//而结束位置toValue,将白色和第二个黑色原色位置设置在整个Layer的末端,第一个黑色原色在0.75的位置:
// 从图中可以看出,此时整个Layer都变成了黑色。也就是说,在整个动画中,第一个黑色原色从0移动到0.75的位置,白色原色从0移动到1的位置,第二个黑色原色从0.25移动到1的位置。然后设置动画时间为2秒,无线重复次数,最后将gradient动画添加到gradientLayer中。我们在viewDidAppear()方法中调用该动画方法gradientAnimate(),编译运行看看效果:
animation.duration=2;
animation.repeatCount=HUGE;
[_gridentlayer addAnimation:animation forKey:nil];
[email protected]"hahahahaha";
_gridentlayer.mask=self.textlabel.layer;
}
效果图: