如何在 Swift 中点燃 UIView?

问题描述

如何制作一个动画来模拟 Swift 中从上到下消耗 UIView 的火的燃烧效果

我发现了 Fireworks,这是一款允许用户调整和试用 CAEmitterLayer 的不同设置并获得即时结果的应用。这些效果非常适合应用于整个屏幕,但我如何将其用于我的目的 - UIView 必须在火焰从一端消耗到另一端时消失?

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

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

解决方法

我对 CAEmitterLayer 的处理不多,所以我决定尝试一下。

我创建了一个执行此操作的项目并将其发布在 Github 上。它使用 this Youtube video 中的方法作为起点。你可以在这里下载:

FireEmitter project

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

该项目包含一个名为 BurnItDownView

的 UIView 的自定义子类

BurnItDownView 用于包含其他视图。

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

动画有多个部分:

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

我之前曾遇到过这个名为 particle animations 的开源库。

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

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

请随时提出更多问题。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...