iOS动画：Gradient渐变动画（8）

最新推荐文章于 2024-08-19 10:11:08 发布

jackyMon

最新推荐文章于 2024-08-19 10:11:08 发布

阅读量994

点赞数

CC 4.0 BY-SA版权

分类专栏： iOS Swift 动画文章标签： iOS动画

本文链接：https://blog.csdn.net/heyuzu1/article/details/89644159

iOS 同时被 3 个专栏收录

22 篇文章

订阅专栏

Swift

22 篇文章

订阅专栏

动画

21 篇文章

订阅专栏

本文详细解析了iPhone滑动解锁动画的实现过程，通过创建CAGradientLayer并设置其属性，包括渐变方向、颜色及动画效果，最终实现动态渐变背景与滑动解锁效果的完美融合。

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

有没有想过iPhone屏幕滑动解锁动画是怎么实现的呢？

没错，它就是这一节的重点。

首先我们创建一个CAGradientLayer的对象gradientLayer，并为其设置起始点和结束点

	gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
	gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

这样就定义了渐变的方向。

现在来为渐变定义colors

	let colors = [
	  UIColor.black.cgColor,
      UIColor.white.cgColor,
      UIColor.black.cgColor
    ]
	gradientLayer.colors = colors

上面的颜色以黑色开始，后渐变为白色，最后渐变黑色。
现在我们来设置每种颜色在渐变中的确切位置

    gradientLayer.colors = colors
    let locations: [NSNumber] = [
      0.25,
      0.5,
      0.75
    ]
    gradientLayer.locations = locations

颜色转折点如图：

将gradientLayer加入view的layer图层

gradientLayer.frame = CGRect(
      x: -bounds.size.width,
      y: bounds.origin.y,
      width: 3 * bounds.size.width,
      height: bounds.size.height)
layer.addSublayer(gradientLayer)

为gradientLayer添加渐变动画

    let gradientAnimation = CABasicAnimation(keyPath: "locations")
    gradientAnimation.fromValue = [0.0, 0.0, 0.25]
    gradientAnimation.toValue = [0.75, 1.0, 1.0]
    gradientAnimation.duration = 3.0
    gradientAnimation.repeatCount = Float.infinity
    
    gradientLayer.add(gradientAnimation, forKey: nil)

创建文字

      let image = UIGraphicsImageRenderer(size: bounds.size)
        .image { _ in
          text.draw(in: bounds, withAttributes: textAttributes)
        }

      let maskLayer = CALayer()
      maskLayer.backgroundColor = UIColor.clear.cgColor
      maskLayer.frame = bounds.offsetBy(dx: bounds.size.width, dy: 0)
      maskLayer.contents = image.cgImage

      gradientLayer.mask = maskLayer

这就完成啦！