问题描述
如何制作一个动画来模拟 Swift 中从上到下消耗 UIView
的火的燃烧效果?
我发现了 Fireworks,这是一款允许用户调整和试用 CAEmitterLayer
的不同设置并获得即时结果的应用。这些效果非常适合应用于整个屏幕,但我如何将其用于我的目的 - UIView
必须在火焰从一端消耗到另一端时消失?
是否有一些关于在任何地方使用粒子发射器用火消耗 UIView
的教程?我知道我应该展示一些代码,但我放在这里的任何东西都是无关紧要的。我也用尽了我的搜索引擎寻找类似的东西。我就是这样找到Fireworks 应用的。
这似乎是一个不应罕见的用例。
解决方法
我对 CAEmitterLayer
的处理不多,所以我决定尝试一下。
我创建了一个执行此操作的项目并将其发布在 Github 上。它使用 this Youtube video 中的方法作为起点。你可以在这里下载:
这是它的外观的小缩略图:
该项目包含一个名为 BurnItDownView
BurnItDownView
用于包含其他视图。
它有一个公共方法,burnItDown()
。这会触发动画。
动画有多个部分:
- 设置 CAEmitterLayer 以模拟在平坦表面上燃烧的火焰:
- 将发射器层从视图顶部降低到底部的动画,
- 一个 CAGradientView 作为蒙版应用于开始时完全不透明的视图(颜色为
[.clear,.white,.white]
,位置为[-0.5,1]
(其中清晰的颜色在视图顶部上方)并为视图设置动画渐变视图的locations
属性从上到下屏蔽视图内容。(将locations
属性动画化为[0,0]
,因此整个渐变图层填充清晰的颜色,完全屏蔽视图层。) - 一旦视图被完全屏蔽,它就会开始逐步降低发射器层的“birthRate”,直到出生率为 0。然后保持这一步 2 秒,直到所有的火焰粒子动画消失。
- 一旦火焰完全“熄灭”,它会将locations数组重置为
[-0.5,1]
的原始值。这会导致“隐式动画”,因此视图从底部返回动画,但很快 - 最后,它将发射器层和发射器单元重置回新创建的发射器层和发射器单元,以便为动画的下一次传递做好准备。 (我不知道如何将发射器恢复到其原始状态。创建新的更简单。)它还调用传递给
burnItDown()
方法的可选完成处理程序。 (应用的视图控制器使用闭包重新启用“销毁”按钮。
我之前曾遇到过这个名为 particle animations 的开源库。
我不建议使用库本身,因为它已被弃用。但我建议您参考其源代码以了解如何使用 CAEmitterLayer and CAEmitterCell
来制作火焰的外观!
从自述文件中可以看出,它有直接的 Fire 示例。它还指出,即使是 Apple 和 Facebook 也使用 CAEmitterLayer and CAEmitterCell
来产生火灾效果。
请随时提出更多问题。