iOS的 - 如何实现粒子动画般的效果在iOS

Question

我看到的一些关于dribbble网站和应用程序的设计理念粒子散射效果。其效果是这样的： - https://www.craftedbygc.com/

效果如图所示在这个环节也可以看出： - https://dribbble.com/shots/3511585-hello-dribbble

我们怎样才能实现iOS应用程序这样的效果？

Answer 1

SpriteKit是一个不错的选择。它有一个叫做的特性粒子发射器。教程很多，你会发现有用的只是like this做出这样的效果

Answer 2

如果你正在寻找的东西简单，看看CAEmitterLayer和CAEmitterCell。只是做一个CAEmitterLayer与kCAEmitterLayerRectangle的emitterShape，您可以用另一个CAShapeLayer裁剪得到你想要的形状：

---

这里是产生像上面的例子：

override func viewDidAppear(_ animated: Bool) { 
    super.viewDidAppear(animated) 

    // define emitter layer as centered w 80% of smallest dimension 

    let image = emitterImage 
    let side = min(view.bounds.width, view.bounds.height) * 0.8 
    let origin = CGPoint(x: view.bounds.midX - side/2, y: view.bounds.midY - side/2) 
    let center = CGPoint(x: view.bounds.midX, y: view.bounds.midY) 
    let size = CGSize(width: side, height: side) 
    let rect = CGRect(origin: origin, size: size) 
    let emitterLayer = CAEmitterLayer() 
    emitterLayer.emitterShape = kCAEmitterLayerRectangle 
    emitterLayer.emitterSize = rect.size 
    emitterLayer.emitterPosition = center 

    // define cells 

    let cell = CAEmitterCell() 
    cell.birthRate = Float(size.width * size.height/10) 
    cell.lifetime = 1 
    cell.velocity = 10 
    cell.scale = 0.1 
    cell.scaleSpeed = -0.1 
    cell.emissionRange = .pi * 2 
    cell.contents = image.cgImage 
    emitterLayer.emitterCells = [cell] 

    // add the layer 

    view.layer.addSublayer(emitterLayer) 

    // mask the layer 

    let lineWidth = side/8 
    let mask = CAShapeLayer() 
    mask.fillColor = UIColor.clear.cgColor 
    mask.strokeColor = UIColor.white.cgColor 
    mask.lineWidth = lineWidth 
    mask.path = UIBezierPath(arcCenter: center, radius: (side - lineWidth)/2, startAngle: .pi/4, endAngle: .pi * 7/4, clockwise: true).cgPath 
    emitterLayer.mask = mask 
} 

var emitterImage: UIImage { 
    let rect = CGRect(origin: .zero, size: CGSize(width: 10, height: 10)) 
    UIGraphicsBeginImageContextWithOptions(rect.size, false, 0) 
    #colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1).setFill() 
    UIBezierPath(arcCenter: CGPoint(x: rect.midX, y: rect.midY), radius: rect.midX, startAngle: 0, endAngle: .pi * 2, clockwise: true).fill() 
    let image = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 
    return image! 
} 

---

我不知道有什么简单的方法来生产的东西完全一样的的例子，但你会发现第三方库/演示（例如http://flexmonkey.blogspot.co.uk/2015/01/computing-particle-systems-in-swift.html）。