自定义UIView:延迟动画子图层

时间:2016-09-21 19:02:48

标签: ios swift cabasicanimation

我想创建一个自定义UIView子类,代表深蓝色天空上的一堆星星。

因此,我创建了这个视图:

import UIKit

class ConstellationView: UIView {

    // MARK: - Properties
    @IBInspectable var numberOfStars: Int = 80
    @IBInspectable var animated: Bool = false

    // Private properties
    private var starsToDraw = [CAShapeLayer]()

    // Layers
    private let starsLayer = CAShapeLayer()



    // MARK: - Drawing
    //    override func drawRect(rect: CGRect) {
    override func layoutSubviews() {

        // Generate stars
        drawStars(rect: self.bounds)

    }



    /// Generate stars
    func drawStars(rect: CGRect) {

        let width = rect.size.width
        let height = rect.size.height
        let screenBounds = UIScreen.main.bounds

        // Create the stars and store them in starsToDraw array
        for _ in 0 ..< numberOfStars {
            let x = randomFloat() * width
            let y = randomFloat() * height
            // Calculate the thinness of the stars as a percentage of the screen resolution
            let thin: CGFloat = max(screenBounds.width, screenBounds.height) * 0.003 * randomFloat()
            let starLayer = CAShapeLayer()
            starLayer.path = UIBezierPath(ovalIn: CGRect(x: x, y: y, width: thin, height: thin)).cgPath
            starLayer.fillColor = UIColor.white.cgColor
            starsToDraw.append(starLayer)
        }


        // Define a fade animation
        let appearAnimation = CABasicAnimation(keyPath: "opacity")
        appearAnimation.fromValue = 0.2
        appearAnimation.toValue = 1
        appearAnimation.duration = 1
        appearAnimation.fillMode = kCAFillModeForwards

        // Add the animation to each star (if animated)
        for (index, star) in starsToDraw.enumerated() {

            if animated {
                // Add 1 s between each animation
                appearAnimation.beginTime = CACurrentMediaTime() + TimeInterval(index)
                star.add(appearAnimation, forKey: nil)
            }

            starsLayer.insertSublayer(star, at: 0)
        }

        // Add the stars layer to the view layer
        layer.insertSublayer(starsLayer, at: 0)
    }


    private func randomFloat() -> CGFloat {
        return CGFloat(arc4random()) / CGFloat(UINT32_MAX)
    }

}

效果很好,结果如下: enter image description here

然而,我想让它动画化,也就是说,80颗恒星中的每一颗都应该一个接一个地出现,延迟时间为1秒。

我试图增加动画的beginTime,但似乎没有做到这一点。 我查看了drawRectlayoutSubviews,但没有区别。

你能帮帮我吗?

由于

PS:要重现我的应用程序,只需在XCode中创建一个新的单一视图应用程序,使用此代码创建一个新文件,并将ViewController的视图设置为ConstellationView,背景颜色为深色。还可以在Interface Builder或代码中将animated属性设置为true。

PPS:这是在Swift 3中,但我认为它仍然可以理解: - )

1 个答案:

答案 0 :(得分:1)

你真的很亲密,只有两件事要做!

首先,您需要在将动画添加到图层时指定密钥。

star.add(appearAnimation, forKey: "opacity")

其次,动画的填充模式必须是kCAFillModeBackwards而不是kCAFillModeForwards

有关更详细的参考,请参阅 - https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/AdvancedAnimationTricks/AdvancedAnimationTricks.html

这是一个有趣的教程(适用于CAAnimations的练习!) - https://www.raywenderlich.com/102590/how-to-create-a-complex-loading-animation-in-swift

希望这有帮助

完整代码:

class ConstellationView: UIView {

  // MARK: - Properties
  @IBInspectable var numberOfStars: Int = 80
  @IBInspectable var animated: Bool = true

  // Private properties
  private var starsToDraw = [CAShapeLayer]()

  // Layers
  private let starsLayer = CAShapeLayer()

  override func awakeFromNib() {
    super.awakeFromNib()
  }

  // MARK: - Drawing
  override func layoutSubviews() {
    // Generate stars
    drawStars(rect: self.bounds)
  }

  /// Generate stars
  func drawStars(rect: CGRect) {
    let width = rect.size.width
    let height = rect.size.height
    let screenBounds = UIScreen.main.bounds

    // Create the stars and store them in starsToDraw array
    for _ in 0 ..< numberOfStars {
      let x = randomFloat() * width
      let y = randomFloat() * height
      // Calculate the thinness of the stars as a percentage of the screen resolution
      let thin: CGFloat = max(screenBounds.width, screenBounds.height) * 0.003 * randomFloat()
      let starLayer = CAShapeLayer()
      starLayer.path = UIBezierPath(ovalIn: CGRect(x: x, y: y, width: thin, height: thin)).cgPath
      starLayer.fillColor = UIColor.white.cgColor
      starsToDraw.append(starLayer)
    }

    // Define a fade animation
    let appearAnimation = CABasicAnimation(keyPath: "opacity")
    appearAnimation.fromValue = 0.2
    appearAnimation.toValue = 1
    appearAnimation.duration = 1
    appearAnimation.fillMode = kCAFillModeBackwards

    // Add the animation to each star (if animated)
    for (index, star) in starsToDraw.enumerated() {  
      if animated {
        // Add 1 s between each animation
        appearAnimation.beginTime = CACurrentMediaTime() + TimeInterval(index)
        star.add(appearAnimation, forKey: "opacity")
      }
      starsLayer.insertSublayer(star, above: nil)
    }

    // Add the stars layer to the view layer
    layer.insertSublayer(starsLayer, above: nil)
  }

  private func randomFloat() -> CGFloat {
    return CGFloat(arc4random()) / CGFloat(UINT32_MAX)
  }
}