iOS 使用 CAEmitterLayer 创建落叶动画

Posted

技术标签:

【中文标题】iOS 使用 CAEmitterLayer 创建落叶动画【英文标题】:iOS create falling leaves animations using CAEmitterLayer 【发布时间】:2017-06-10 16:59:44 【问题描述】:

我想创建一个落叶动画这是我的代码:

 private func setupEmitter() 


    let size = self.bounds.size

    let emitter             = CAEmitterLayer()
    emitter.emitterSize     = CGSize(width: size.width, height: 1)
    emitter.emitterPosition = CGPoint(x: size.width / 2, y: -100)
    emitter.emitterShape    = kCAEmitterLayerLine
    self.layer.addSublayer(emitter)

    //SHAPE 1
    let shape1 = CAEmitterCell()
    shape1.birthRate = 10
    shape1.lifetime = 7
    shape1.lifetimeRange = 2
    shape1.velocity = 110
    shape1.velocityRange = 10
    shape1.emissionLongitude = CGFloat(M_PI)
    shape1.emissionRange = CGFloat(M_PI_4)
    shape1.spin = 0.2
    shape1.spinRange = 0
    shape1.scaleSpeed = -0.05
    shape1.scale  = -0.3
    shape1.scaleRange = -0.1
    shape1.contents = UIImage(named: "shape1")?.cgImage


    //SHAPE 2
    let shape2 = CAEmitterCell()
    shape2.birthRate = 10
    shape2.lifetime = 7
    shape2.lifetimeRange = 2
    shape2.velocity = 110
    shape2.velocityRange = 90
    shape2.emissionLongitude = CGFloat(M_PI)
    shape2.emissionRange = CGFloat(M_PI_4)
    shape2.spin = 0.2
    shape2.spinRange = 0.5
    shape2.scaleSpeed = -0.05
    shape2.scale  = -0.35
    shape2.scaleRange = 0
    shape2.contents = UIImage(named: "shape2")?.cgImage

    emitter.emitterCells = [shape1, shape2]



我从上面的代码中得到了什么:

Video

画出我想要达到的效果:

Video

那么我如何更新我的代码以实现我想要的(Objective-C 代码被接受)?

【问题讨论】:

绘图视频很棒!非常具有描述性。 @Confused 我不知道为什么我被否决了!无论如何,您知道如何实现动画吗? 现在写一个“答案”。不简单…… 【参考方案1】:

不幸的是,这并不容易或简单,我也不能简单地说“这是执行此操作的代码!”

有多种方法可以实现目标,但没有一种是理想的,所有方法都以不同的方式棘手。

这些叶子在飘下时的运动是否达到了它们在空气动力学上有效的速度、失速然后再次下落……这要么是您需要的物理系统,要么是编码为对下落速度的响应的行为.

物理:

核心动画粒子没有足够的物理响应来执行此操作,因此您需要使用受力和场组合影响的SKSpriteNodes,或受UIKit Dynamics 力和场变化影响的CALayers .

这两件事几乎相同:CALayersSKSpriteNodes 的更强大和有趣的变体,UIKit DynamicsSKPhysics 大致相同。

但是......如果你想走这条路,建立你自己的“粒子”系统来响应力和场,我强烈建议使用 SceneKit 的粒子,因为它们具有旋转(3D)能力粒子,内置,并且在处理许多不同的粒子发射器时非常有效,每个粒子发射器都有自己响应的场。

算法:

这涉及到将弧线随机化到失速,然后向下加速进入另一个弧线,空气动力学影响,以及随后的失速,一遍又一遍。

这也需要自定义粒子,因为我认为没有办法直接影响 CAEmitter 粒子,也没有 SpriteKit 或 SceneKit 的粒子。

这意味着您必须在 OpenGL 中创建四边形、作为树叶的简单图像的 CALayers、作为树叶的 SKSpriteNode 或在具有树叶纹理的 SceneKit 中创建四边形。

在每种情况下,您都需要与叶子一样多的图层或对象。

CALayers 的优势在于它们内置了 3D 旋转,而且您似乎已经掌握了一些核心动画。

【讨论】:

谢谢,没想到会这么复杂 拥有更强大的粒子系统,并不那么复杂。只是一些设置。但是 ios 上不存在这些类型的系统。您必须自己创建所需的功能。这不是一项繁重的工作,只是隔离、理解和复制您需要的行为的一点工作。 @Chlebta

以上是关于iOS 使用 CAEmitterLayer 创建落叶动画的主要内容,如果未能解决你的问题,请参考以下文章

iOS:在屏幕上捕获 CAEmitterLayer 粒子

iOS 烟花撒花效果,图层渐变,图层倒影特效。CAEmitterLayer粒子发射器

iOS之CAEmitterLayer粒子引擎

使用 CAEmitterLayer 围绕圆形或 CGPath 绘制粒子

CAEmitterLayer 粒子效果(发射器)

CAEmitterCell 和 CAEmitterLayer具体解释