1. 程式人生 > >CAGradientLayer(顏色漸變) -- 實現iphone手機螢幕“滑動來解鎖”動畫效果

CAGradientLayer(顏色漸變) -- 實現iphone手機螢幕“滑動來解鎖”動畫效果

每次開啟iphone手機前,我們都能見到一個動畫效果 – “滑動來解鎖”!本篇文章來介紹怎麼實現顏色漸變的效果!

1、CAGradientLayer

//gradientLayer的大小和位置
self.gradientLayer.bounds = CGRectMake(0, 0, BackView_Width, BackView_Height);
self.gradientLayer.position = CGPointMake(BackView_Width/2, BackView_Height/2);

//由它們兩個決定動畫的方向
self.gradientLayer.startPoint = CGPointMake(0
, 1); //起始位置 預設是(0.5, 0) self.gradientLayer.endPoint = CGPointMake(1, 0); //結束位置 預設是(0.5, 1) 若用預設值則動畫是從上水平向下

這張圖片能夠很好地說明起始位置,結束位置,動畫方向!(有上邊的值決定動畫方向為從左下角往右上角)

這裡寫圖片描述


//動畫效果的顏色
//這裡要注意 因為layer上的顏色是CGColorRef型別,但是CGColorRef不是一個OC物件所以直接放在數組裡有報錯
self.gradientLayer.colors = @[(id)[UIColor blackColor].CGColor, (id)[UIColor
redColor].CGColor, (id)[UIColor blackColor].CGColor]; //locations的值是NSNumber型別,且取值在[0, 1]之間, 最重要的是他的長度要和上邊colors的長度一樣 對應:第一個黑色的位置、紅色的位置、第二個黑色的位置 self.gradientLayer.locations = @[@(0.2), @(0.5), @(0.8)]; [self.backgroundView.layer addSublayer:self.gradientLayer];

程式碼寫到這執行的效果如下:

這裡寫圖片描述

2、新增動畫效果

//2、新增動畫效果
CABasicAnimation *locationAnimation = [CABasicAnimation animationWithKeyPath:@"locations"
]; //這兩句話表示第一個黑色從0跑到了0.75的位置,紅色從0跑到了1的位置, 第二個黑色從0.25跑到了1的位置 locationAnimation.fromValue = @[@(0),@(0),@(0.25)]; //動畫的起始位置 locationAnimation.toValue = @[@(0.75),@(1),@(1)]; //動畫的結束位置 //一次動畫的用時 locationAnimation.duration = 2.5; //動畫重複的次數 locationAnimation.repeatCount = HUGE; //在gradientLayer上新增動畫 [self.gradientLayer addAnimation:locationAnimation forKey:nil];

3、將動畫新增到Label的字上

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    //3、將動畫新增到Label的字上
    self.animationLabel.text = @"SlideUnlockAnimation";
    //不能寫在viewDidLoad
    self.gradientLayer.mask = self.animationLabel.layer;
}

執行效果自己下Demo看吧(請原諒我不會製作Git圖)!