1

如何在SwiftUIView中制作模拟从上到下消耗火焰的燃烧效果的动画？

我找到了Fireworks，这是一款允许用户调整和尝试不同设置的应用程序，并能CAEmitterLayer立即获得结果。这些效果非常适合应用于整个屏幕，但我将如何将它用于我的目的 - 当UIView火焰从一端消耗到另一端时，它必须消失？

是否有一些关于在UIView任何地方使用粒子发射器消耗 s 的教程？我知道我应该展示一些代码，但我放在这里的任何东西都无关紧要。我也用尽我的搜索引擎寻找类似的东西。这就是我实际找到Fireworks应用程序的方式。

这似乎是一个不应该罕见的用例。

4

2 回答 2

4

我没有做太多CAEmitterLayer，所以我决定尝试一下。

我创建了一个项目，将其发布在 Github 上。它使用此 Youtube 视频中的方法作为起点。你可以在这里下载：

FireEmitter 项目

这是它的外观的小缩略图：

该项目包括一个名为 UIView 的自定义子类BurnItDownView

BurnItDownView旨在包含其他视图。

它有一个公共方法，burnItDown(). 这会触发动画。

动画有多个部分：

  1. 一个 CAEmitterLayer 设置来模拟平面上燃烧的火焰：
  2. 将发射器层从视图顶部降低到底部的动画，
  3. 一个 CAGradientView 作为蒙版应用到开始不完全不透明的视图（具有的颜色[.clear, .white, .white]和位置[-0.5, 0, 1]（其中清晰的颜色在视图顶部上方）并动画locations渐变视图的属性以从顶部屏蔽视图内容到底部。（将locations属性设置为[0, 0, 0]，因此整个渐变层都填充了清晰的颜色，完全遮盖了视图的层。）
  4. 一旦视图被完全屏蔽，它开始逐步降低发射器层的“birthRate”，直到出生率为 0。然后它保持这个步骤 2 秒，直到所有的火焰粒子都动画消失。
  5. 一旦火焰完全“熄灭”，它会将位置数组重置为 的原始值[-0.5, 0, 1]。这会导致“隐式动画”，因此视图从底部动画回来，但很快
  6. 最后，它将发射器层和发射器单元重置回新创建的发射器层和发射器单元，以使其为动画的下一次传递做好准备。（我不知道如何将发射器恢复到其原始状态。创建新发射器更简单。）它还调用传递给该burnItDown()方法的可选完成处理程序。（应用程序的视图控制器使用闭包重新启用“Burn it down”按钮。
于 2021-06-15T00:14:16.967 回答
2

我以前也曾遇到过这个名为粒子动画的开源库。

我不建议使用库本身，因为它已被弃用。但我建议参考它的源代码，以了解如何使用它CAEmitterLayer and CAEmitterCell来制作火的外观！

从它的自述文件中可以看出，它有 Fire 的直接示例。它还指出，即使是苹果和 Facebook 也使用它CAEmitterLayer and CAEmitterCell来产生火灾的效果。

随时提出更多问题。

于 2021-06-14T14:24:53.950 回答