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