如何向UIView添加“雪花效果”

Question

我目前正在制作一个圣诞节应用程序，希望在屏幕上“下雪”。

到目前为止，我的代码是这样的：

Snow.swift

import Foundation
import UIKit

@IBDesignable
class Snow:UIView
{

    var viewHeight = CGFloat(0)
    /*
    required init(coder aDecoder: NSCoder) {
        //Initilse UIView
        super.init(coder: aDecoder)!
    }
    */

    override func drawRect(rect: CGRect) {
        let path = UIBezierPath(ovalInRect: rect)
        UIColor.whiteColor().setFill()
        path.fill()
    }
}

ViewController.swift

@IBDesignable
class ViewController: UIViewController {

    @IBInspectable var BgColor:UIColor = UIColor.whiteColor()

    var animator: UIDynamicAnimator? = nil;
    var gravity = UIGravityBehavior()


    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = BgColor
        /*listSubviewsOfView(self.view)*/ /*Not needed to answer this*/
        var snow = Snow(frame: CGRect(x: 0, y: 0, width: 5, height: 5))
        snow.opaque = false
        self.view.addSubview(snow)

        animator = UIDynamicAnimator(referenceView:self.view);
        animator?.addBehavior(gravity)

        gravity.addItem(snow)
        let direction = CGVectorMake(0.0, 1.0)
        gravity.gravityDirection = direction
    }


    /*Not needed to solve this*/
    /*
    func listSubviewsOfView(views: UIView) {
        var index = 0
        let randomNumbers = [Int](1...24).shuffle()
        for view in views.subviews
        {
            if let _ = view.restorationIdentifier
            {
                view.setValue(String(Int(randomNumbers[index])), forKey: "updateText")
                index++
            }
            if index == randomNumbers.count {
                break
            }
        }
    }
    */

}

这是目前的外观（在iPhone 5模拟器中）。

正如您所看到的，UIView下落得太快了（像砖头一样下落，而不是像雪花一样）。我该如何让“雪花”慢慢飘落，同时加上风的效果呢？

- iProgram

---

请查看此链接1(http://www.code4app.net/ios/Fallen-snow-effect/4fa3e1ce06f6e7be66000000)和链接2(https://github.com/priore/SnowFalling)，它们可能会对您有所帮助。 - Anbu.Karthik

Answer 1

我会使用SKEmitterNode来实现这个功能。在SpriteKit中还有一个图形编辑器，您可以轻松创建雪效果。这里有一个简短的教程：点击此处查看。

- Stefan

---

我可以将其与单视图模板一起使用吗？ - iProgram

我认为是这样，但从未尝试过。通常我会创建一个游戏模板：它包括一个ViewController和一个Storyboard，在其中您可以添加UIView元素。 - Stefan

Sprite Kit 不能与 UIView 混合使用。 - RW.

@RW。是的，它可以。SKView是一个带有关联SKScene的UIView子类。 - Fogmeister

Answer 2

使用UIKitDynamics的UIGravityBehaviour来动画化对象。您可以很容易地使用UIKitDynamics创建出色的动画效果。

    snowView = UIView(frame: CGRect(x: 100, y: 100, width: 20, height: 20))
    snowView.backgroundColor = UIColor.blueColor()
    view.addSubview(snowView)

    animator = UIDynamicAnimator(referenceView: view)
    gravity = UIGravityBehavior(items: [snowView])
    animator.addBehavior(gravity)

    animator.addBehavior(collision)

    itemBehaviour = UIDynamicItemBehavior(items: [snowView])
    itemBehaviour.elasticity = 0.7
    animator.addBehavior(itemBehaviour)

请参考此链接： http://www.sitepoint.com/using-uikit-dynamics-swift-animate-apps/

- Alap Anerao

Answer 3

如果您目前没有使用SpriteKit，则最好使用CAEmitterLayer。请参阅教程

http://www.enharmonichq.com/tutorial-particle-systems-in-core-animation-with-caemitterlayer/

这个想法是在你的常规视图上添加一个发射器层，该层与该视图大小相同，在顶部有一个线形发射器单元，可以发射雪花粒子。

粒子发射器包括随机放置和随机运动的支持。(雪花会带着一些随机的左右晃动飘落到地面。)

- Duncan C

Answer 4

我已经分享了所有的实现。但是你需要flake.png，你可以通过谷歌找到。

import UIKit
import QuartzCore

class ViewController: UIViewController {

  var snowView: SnowView!

  override func viewDidLoad() {
    super.viewDidLoad()

    //add the snow effect layer
    snowView = SnowView(frame: CGRect(x: -150, y:-100, width: 300, height: 50))
    let snowClipView = UIView(frame: CGRectOffset(view.frame, 0, 50))
    snowClipView.clipsToBounds = true
    snowClipView.addSubview(snowView)
    view.addSubview(snowClipView)

  }
}


import UIKit
import QuartzCore

class SnowView: UIView {

  override init(frame: CGRect) {
    super.init(frame: frame)

    let emitter = layer as! CAEmitterLayer
    emitter.emitterPosition = CGPoint(x: bounds.size.width / 2, y: 0)
    emitter.emitterSize = bounds.size
    emitter.emitterShape = kCAEmitterLayerRectangle

    let emitterCell = CAEmitterCell()
    emitterCell.contents = UIImage(named: "flake.png")!.CGImage
    emitterCell.birthRate = 200
    emitterCell.lifetime = 3.5
    emitterCell.color = UIColor.whiteColor().CGColor
    emitterCell.redRange = 0.0
    emitterCell.blueRange = 0.1
    emitterCell.greenRange = 0.0
    emitterCell.velocity = 10
    emitterCell.velocityRange = 350
    emitterCell.emissionRange = CGFloat(M_PI_2)
    emitterCell.emissionLongitude = CGFloat(-M_PI)
    emitterCell.yAcceleration = 70
    emitterCell.xAcceleration = 0
    emitterCell.scale = 0.33
    emitterCell.scaleRange = 1.25
    emitterCell.scaleSpeed = -0.25
    emitterCell.alphaRange = 0.5
    emitterCell.alphaSpeed = -0.15

    emitter.emitterCells = [emitterCell]
  }

  required init(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  override class func layerClass() -> AnyClass {
    return CAEmitterLayer.self
  }

}

- Durul Dalkanat

---

谢谢，但是这在 Swift 4.2 中运行会有些问题。 - Saeed Rahmatolahi