在网站上创建逼真的烟花效果（动画）答案

【问题标题】：Creating realistic fireworks effect (animation) on website在网站上创建逼真的烟花效果（动画）
【发布时间】：2019-11-28 05:07:57
【问题描述】：

我需要在白色背景上创建一个逼真的烟花效果，在网站上看起来像这样disney fireworks（想象一个带有页面中心的标题，文字淡入，烟花出现一半，最后一个神奇的拱尘会飞过中心的标题，然后重定向到一个着陆页。这是@987654322的粗略演示@ - 假设视频被包装在 <video/> 标签中），我不知道是否可以仅使用 HTML、CSS 和 JS 或任何类型的框架或库来重新创建此级别的动画（任何建议都是伟大的）。

我能想到的一个解决方案是用一些视频效果软件（比如 AfterEffects）创建一个视频，并将其放在标题的背景中，这里的大问题是短时间学习该软件的时间成本一段时间，使用视频的另一个问题是布局不会响应，它可能无法与 HTML 元素正确缩放。所以我想我还需要在视频本身中创建动画和字体，这样它们才能与烟花和拱尘一起正确缩放？

有一些烟花效果的示例代码，但它们不够逼真或不适用于白色背景，例如Firework jsFiddle。

我想知道你们中的任何人将如何处理这项任务？我真的很感激任何建议。注意：我还没有在 React 中实现它。

【问题讨论】：

标签： css reactjs animation particles fireworks

【解决方案1】：

您可以使用react-lottie 在那里您可以使用后效创建效果并导出为 JSON，然后 Lottie 可以控制该动画。

这将是响应式的，您甚至可以控制帧开始结束时间进行大量自定义。

但是您必须仅使用后效创建效果，或者您可以搜索烟花 JSON 文件并将它们组合并创建此类动画。可以查看react-springs 来组合动画吗？

【讨论】：

所以基本上你的意思是我应该创建动画、烟花和“魔法拱尘”（可能是分开的），然后将它们导出为 HTML，然后单独操作它们？而不是创建包括文本在内的整个动画场景并将它们导出为 html？对不起我的英语不好
是的，你可以在 JSON 中创建和导出它们（在效果有这个选项后探索 airbnb.io/lottie/# 你会发现如何做到这一点）而不是 HTML。另外，请检查我添加了一个更简单的动画库，这也将对此有所帮助。
谢谢，我试试看，感谢您的帮助！