ios - 如何在 Swift 中点燃 UIView?
问题描述
如何在SwiftUIView
中制作模拟从上到下消耗火焰的燃烧效果的动画?
我找到了Fireworks,这是一款允许用户调整和尝试不同设置的应用程序,并能CAEmitterLayer
立即获得结果。这些效果非常适合应用于整个屏幕,但我将如何将它用于我的目的 - 当UIView
火焰从一端消耗到另一端时,它必须消失?
是否有一些关于在UIView
任何地方使用粒子发射器消耗 s 的教程?我知道我应该展示一些代码,但我放在这里的任何东西都无关紧要。我也用尽我的搜索引擎寻找类似的东西。这就是我实际找到Fireworks应用程序的方式。
这似乎是一个不应该罕见的用例。
解决方案
我没有做太多CAEmitterLayer
,所以我决定尝试一下。
我创建了一个项目,将其发布在 Github 上。它使用此 Youtube 视频中的方法作为起点。你可以在这里下载:
这是它的外观的小缩略图:
该项目包括一个名为 UIView 的自定义子类BurnItDownView
BurnItDownView
旨在包含其他视图。
它有一个公共方法,burnItDown()
. 这会触发动画。
动画有多个部分:
- 一个 CAEmitterLayer 设置来模拟平面上燃烧的火焰:
- 将发射器层从视图顶部降低到底部的动画,
- 一个 CAGradientView 作为蒙版应用到开始不完全不透明的视图(具有的颜色
[.clear, .white, .white]
和位置[-0.5, 0, 1]
(其中清晰的颜色在视图顶部上方)并动画locations
渐变视图的属性以从顶部屏蔽视图内容到底部。(将locations
属性设置为[0, 0, 0]
,因此整个渐变层都填充了清晰的颜色,完全遮盖了视图的层。) - 一旦视图被完全屏蔽,它开始逐步降低发射器层的“birthRate”,直到出生率为 0。然后它保持这个步骤 2 秒,直到所有的火焰粒子都动画消失。
- 一旦火焰完全“熄灭”,它会将位置数组重置为 的原始值
[-0.5, 0, 1]
。这会导致“隐式动画”,因此视图从底部动画回来,但很快 - 最后,它将发射器层和发射器单元重置回新创建的发射器层和发射器单元,以使其为动画的下一次传递做好准备。(我不知道如何将发射器恢复到其原始状态。创建新发射器更简单。)它还调用传递给该
burnItDown()
方法的可选完成处理程序。(应用程序的视图控制器使用闭包重新启用“Burn it down”按钮。
推荐阅读
- excel - 继续获得〜N / A
- reactjs - 使用 onchange 更改状态后访问状态返回循环对象值错误
- c# - 如何检测何时从统一中生成或删除新对象以获取得分/分数?
- reactjs - React-redux:带变量的操作
- r - 使用名称后缀延长旋转时间?
- qt - 尝试增加进度时出现绑定循环错误
- tabulator - 从包含 JSON 的 PHP 页面填充 Tabulator 表
- java - SpringBootTest 属性占位符未解析
- typescript - 从单个 IPC 调用中获取多个 IPC 回调
- pandas - TypeError: '(slice(0, 201617, 1), slice(None, None, None))' 是一个无效的键