CAGradientLayer(颜色渐变) -- 实现iphone手机屏幕“滑动来解锁”动画效果

最新推荐文章于 2020-01-04 02:15:53 发布

zhaoName

最新推荐文章于 2020-01-04 02:15:53 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： iOS开发文章标签： iOS 滑动来解锁动画效果颜色渐变

本文链接：https://blog.youkuaiyun.com/qq244596/article/details/51751588

iOS开发专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用CAGradientLayer实现iPhone解锁界面的颜色渐变动画效果，并通过CABasicAnimation添加动态变化，最终应用到Label文字上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次打开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;
}