iOS-如何在iOS上实现类似粒子动画的效果

问题描述

我在许多网站上看到了粒子散射效应，并在运球上看到了应用程序设计概念。效果是这样的：-

---

下面是一个生成上述内容的示例：

 重写func viewDidAppear（_animated：Bool）{
 super.viewDidAppear（animated）
 
 //将发射器层定义为居中w最小尺寸的80％
 
让图像=发射器图像
让边= min（view.bounds.width，view.bounds.height）* 0.8 
让原点= CGPoint（ x：view.bounds.midX-侧面/ y：view.bounds.midY-侧面/ 2）
让中心= CGPoint（x：view.bounds.midX，y：view.bounds.midY）
 let size = CGSize（宽度：侧面，高度：侧面）
 let rect = CGRect（来源：来源，大小：大小）
 let collectorLayer = CAEmitterLayer（）
 generatorLayer.emitterShape = kCAEmitterLayerRectangle 
 generatorLayer.emitterSize =矩形大小
 generatorLayer.emitterPosition =中心
 
 //定义单元格
 
 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 
itterLayer.emitterCells = [cell] 
 
 //添加图层
 
 view.layer.addSublayer（emitterLayer）
 
 //遮罩图层
 
 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，ra dius：（side-lineWidth）/ 2，startAngle：.pi / 4，endAngle：.pi * 7/4，顺时针：true）.cgPath 
 generatorLayer.mask = mask 
} 
 
 var generatorImage：UIImage {
 let rect = CGRect（原点：.zero，大小：CGSize（width：10，height：10））
 UIGraphicsBeginImageContextWithOptions（rect.size，false，0） 
 #colorLiteral（红色：0.5725490451，绿色：0，蓝色：0.2313725501，alpha：1）.setFill（）
 UIBezierPath（arcCenter：CGPoint（x：rect.midX，y：rect.midY），半径：rect.midX，startAngle：0，endAngle：.pi * 2，顺时针：true）.fill（）
 let image = UIGraphicsGetImageFromCurrentImageContext（）
 UIGraphicsEndImageContext（）
返回图像！ 
} 
  

---

我不知道任何简单的方法来产生与您的示例完全相同的内容，但是您会在其中找到第三方库/演示（例如）。

I have seen a particle scattering effect on a number of websites and app design concepts on dribbble. The effect is like this:- https://www.craftedbygc.com/

The effect can also be seen as shown in this link:-https://dribbble.com/shots/3511585-hello-dribbble

How can we achieve such an effect in an iOS application?

解决方案

If you're looking for something simple, check out CAEmitterLayer and CAEmitterCell. Just do a CAEmitterLayer with an emitterShape of kCAEmitterLayerRectangle and you can crop it with yet another CAShapeLayer to get the shape you want:

---

Here is a sample that generates something like the above:

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

---

I don't know any easy way to produce something exactly like your examples, but you'll find third party libraries/demos out there (e.g. http://flexmonkey.blogspot.co.uk/2015/01/computing-particle-systems-in-swift.html).

这篇关于iOS-如何在iOS上实现类似粒子动画的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！