首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >iOS -如何在iOS上实现粒子动画

iOS -如何在iOS上实现粒子动画
EN

Stack Overflow用户
提问于 2017-05-29 08:33:41
回答 2查看 2.5K关注 0票数 2

我已经看到一个粒子散射的影响,在许多网站和应用程序设计理念上的漂移。效果如下:- https://www.craftedbygc.com/

这种效果也可以在以下链接中看到:- https://dribbble.com/shots/3511585-hello-dribbble

我们如何在iOS应用程序中实现这样的效果?

EN

回答 2

Stack Overflow用户

发布于 2017-05-29 22:41:15

如果您正在寻找简单的东西,请查看CAEmitterLayerCAEmitterCell。只要使用一个CAEmitterLayeremitterShape of kCAEmitterLayerRectangle,就可以使用另一个CAShapeLayer对其进行裁剪,以获得您想要的形状:

下面是一个生成类似于上述内容的示例:

代码语言:javascript
运行
复制
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)。

票数 5
EN

Stack Overflow用户

发布于 2017-05-29 08:38:56

SpriteKit是一个很好的choice.It,它有一个叫做粒子发射器的特性。很多教程,您会发现只有像这样才有帮助,才能产生这样的效果。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44237975

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档