系统学习iOS动画 —— 渐变动画

大林晓鹿
4,528 阅读3分钟

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

这个是希望达成的效果，主要就是下面字体的渐变动画以及右拉手势动画：

请添加图片描述

先创建需要的控件：

class ViewController: UIViewController {
    let timeLabel = UILabel()
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        view.addSubview(timeLabel)
        view.backgroundColor = .gray
        timeLabel.text = "9:42"
        timeLabel.font = UIFont.systemFont(ofSize: 72)
        timeLabel.textColor = .white
        timeLabel.frame = CGRect(x: 0, y: 100, width: timeLabel.intrinsicContentSize.width, height: timeLabel.intrinsicContentSize.height)
        timeLabel.center.x = view.center.x
        
    }


}

然后创建一个文件，然后写一个继承自UIView的类来编写动画的界面。

import UIKit
import QuartzCore

class AnimatedMaskLabel: UIView {

}

CAGradientLayer是CALayer的另一个子类，专门用于渐变的图层。这里创建一个CAGradientLayer来做渐变。这里

  • startPoint和endPoint定义了渐变的方向及其起点和终点
  • Colors是渐变的颜色数组
  • location: 每个渐变点的位置,范围 0 - 1 ，默认为0。

  let gradientLayer: CAGradientLayer = {
    let gradientLayer = CAGradientLayer()

    // Configure the gradient here
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
    let colors = [
      UIColor.yellow.cgColor,
      UIColor.green.cgColor,
      UIColor.orange.cgColor,
      UIColor.cyan.cgColor,
      UIColor.red.cgColor,
      UIColor.yellow.cgColor
    ]
    gradientLayer.colors = colors

    let locations: [NSNumber] = [
      0.0, 0.0, 0.0, 0.0, 0.0, 0.25
    ]
    gradientLayer.locations = locations

    return gradientLayer
  }()

在layoutSubviews里面为gradient设置frame，这里设置宽度为三个屏幕宽度大小来让动画看起来更加顺滑。

 override func layoutSubviews() {
    gradientLayer.frame = CGRect(
      x: -bounds.size.width,
      y: bounds.origin.y,
      width: 3 * bounds.size.width,
      height: bounds.size.height)
  }

接着需要声明一个text,当text被赋值的时候，将文本渲染为图像,然后使用该图像在渐变图层上创建蒙版。

 var text: String! {
    didSet {
      setNeedsDisplay()

      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
    }
  }

这里还需要为文本创建一个文本属性

  let textAttributes: [NSAttributedString.Key: Any] = {
    let style = NSMutableParagraphStyle()
    style.alignment = .center
    return [
      .font: UIFont(
        name: "HelveticaNeue-Thin",
        size: 28.0)!,
      .paragraphStyle: style
    ]
  }()

最后在didMoveToWindow中添加gradientLayer为自身子view并且为gradientLayer添加动画。

  override func didMoveToWindow() {
    super.didMoveToWindow()
    layer.addSublayer(gradientLayer)

    let gradientAnimation = CABasicAnimation(keyPath: "locations")
    gradientAnimation.fromValue = [0.0, 0.0, 0.0, 0.0, 0.0, 0.25]
    gradientAnimation.toValue = [0.65, 0.8, 0.85, 0.9, 0.95, 1.0]
    gradientAnimation.duration = 3.0
    gradientAnimation.repeatCount = Float.infinity

    gradientLayer.add(gradientAnimation, forKey: nil)
  }

接下来在viewController中添加这个view。 声明一个animateLabel

    let animateLabel = AnimatedMaskLabel()

之后在viewDidLoad里面添加animateLabel在子view并且设置好各属性，这样animateLabel就有一个渐变动画了。

view.addSubview(animateLabel)
   animateLabel.frame = CGRect(x: 0, y: UIScreen.main.bounds.size.height - 200, width: 200, height: 40)
   animateLabel.center.x = view.center.x
   animateLabel.backgroundColor = .clear
   animateLabel.text = "Slide to reveal"

接下来为animateLabel添加滑动手势，这里设置滑动方向为向右滑动。

   let swipeGesture = UISwipeGestureRecognizer(target: self, action: #selector(handleSlide))
        swipeGesture.direction = .right
        animateLabel.addGestureRecognizer(swipeGesture)

然后在响应方法里面添加动画,这里先创建一个临时变量并且让其在屏幕外面，然后第一次动画的时候让timeLabel上移，animateLabel下移，然后让image跑到屏幕中间。完了之后在创建一个动画让timeLabel和animateLabel复原，把image移动到屏幕外，然后把image移除掉。

  @objc func handleSlide() {
        // reveal the meme upon successful slide
        let image = UIImageView(image: UIImage(named: "meme"))
        image.center = view.center
        image.center.x += view.bounds.size.width
        view.addSubview(image)
        
        UIView.animate(withDuration: 0.33, delay: 0.0,
          animations: {
            self.timeLabel.center.y -= 200.0
            self.animateLabel.center.y += 200.0
            image.center.x -= self.view.bounds.size.width
          },
          completion: nil
        )
        
        UIView.animate(withDuration: 0.33, delay: 1.0,
          animations: {
            self.timeLabel.center.y += 200.0
            self.animateLabel.center.y -= 200.0
            image.center.x += self.view.bounds.size.width
          },
          completion: {_ in
            image.removeFromSuperview()
          }
        )
    }

这样动画就完成了，完整代码:

import UIKit

class ViewController: UIViewController {
    let timeLabel = UILabel()
    let animateLabel = AnimatedMaskLabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        view.addSubview(timeLabel)
        view.addSubview(animateLabel)
        
        view.backgroundColor = .gray
        timeLabel.text = "9:42"
        timeLabel.font = UIFont.systemFont(ofSize: 72)
        timeLabel.textColor = .white
        timeLabel.frame = CGRect(x: 0, y: 100, width: timeLabel.intrinsicContentSize.width, height: timeLabel.intrinsicContentSize.height)
        timeLabel.center.x = view.center.x
        
        
        animateLabel.frame = CGRect(x: 0, y: UIScreen.main.bounds.size.height - 200, width: 200, height: 40)
        animateLabel.center.x = view.center.x
        animateLabel.backgroundColor = .clear
        animateLabel.text = "Slide to reveal"
        let swipeGesture = UISwipeGestureRecognizer(target: self, action: #selector(handleSlide))
        swipeGesture.direction = .right
        animateLabel.addGestureRecognizer(swipeGesture)
        
    }

    @objc func handleSlide() {
        // reveal the meme upon successful slide
        let image = UIImageView(image: UIImage(named: "meme"))
        image.center = view.center
        image.center.x += view.bounds.size.width
        view.addSubview(image)
        
        UIView.animate(withDuration: 0.33, delay: 0.0,
          animations: {
            self.timeLabel.center.y -= 200.0
            self.animateLabel.center.y += 200.0
            image.center.x -= self.view.bounds.size.width
          },
          completion: nil
        )
        
        UIView.animate(withDuration: 0.33, delay: 1.0,
          animations: {
            self.timeLabel.center.y += 200.0
            self.animateLabel.center.y -= 200.0
            image.center.x += self.view.bounds.size.width
          },
          completion: {_ in
            image.removeFromSuperview()
          }
        )
    }

}


import UIKit
import QuartzCore


class AnimatedMaskLabel: UIView {

    let gradientLayer: CAGradientLayer = {
      let gradientLayer = CAGradientLayer()

      // Configure the gradient here
      gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
      gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
      let colors = [
        UIColor.yellow.cgColor,
        UIColor.green.cgColor,
        UIColor.orange.cgColor,
        UIColor.cyan.cgColor,
        UIColor.red.cgColor,
        UIColor.yellow.cgColor
      ]
      gradientLayer.colors = colors

      let locations: [NSNumber] = [
        0.0, 0.0, 0.0, 0.0, 0.0, 0.25
      ]
      gradientLayer.locations = locations

      return gradientLayer
    }()

     var text: String! {
      didSet {
        setNeedsDisplay()

        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
      }
    }

    let textAttributes: [NSAttributedString.Key: Any] = {
      let style = NSMutableParagraphStyle()
      style.alignment = .center
      return [
        .font: UIFont(
          name: "HelveticaNeue-Thin",
          size: 28.0)!,
        .paragraphStyle: style
      ]
    }()

    override func layoutSubviews() {
      layer.borderColor = UIColor.green.cgColor
      gradientLayer.frame = CGRect(
        x: -bounds.size.width,
        y: bounds.origin.y,
        width: 3 * bounds.size.width,
        height: bounds.size.height)
    }

    override func didMoveToWindow() {
      super.didMoveToWindow()
      layer.addSublayer(gradientLayer)

      let gradientAnimation = CABasicAnimation(keyPath: "locations")
      gradientAnimation.fromValue = [0.0, 0.0, 0.0, 0.0, 0.0, 0.25]
      gradientAnimation.toValue = [0.65, 0.8, 0.85, 0.9, 0.95, 1.0]
      gradientAnimation.duration = 3.0
      gradientAnimation.repeatCount = Float.infinity

      gradientLayer.add(gradientAnimation, forKey: nil)
    }
}
avatar
文章
阅读
粉丝