我已经看到一个粒子散射的影响,在许多网站和应用程序设计理念上的漂移。效果如下:- https://www.craftedbygc.com/
这种效果也可以在以下链接中看到:- https://dribbble.com/shots/3511585-hello-dribbble
我们如何在iOS应用程序中实现这样的效果?
发布于 2017-05-29 22:41:15
如果您正在寻找简单的东西,请查看CAEmitterLayer
和CAEmitterCell
。只要使用一个CAEmitterLayer
和emitterShape
of kCAEmitterLayerRectangle
,就可以使用另一个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)。
发布于 2017-05-29 08:38:56
SpriteKit是一个很好的choice.It,它有一个叫做粒子发射器的特性。很多教程,您会发现只有像这样才有帮助,才能产生这样的效果。
https://stackoverflow.com/questions/44237975
复制相似问题