CSS一步步实现烟花动画
时间：2023-03-19 18:05:20
科技观察
项目之前需要制作一个烟花动画，要求是随机大小，出现在不同的地方，先来看看效果：更进一步，还可以实现五颜六色的效果，如下1.如何选择合适的动画场景决定了使用什么样的动画。比如对于一些轻量级、装饰性的动画，CSS动画就足够了，而对于一些对动画要求高的运营活动和创意游戏，JS动画绝对是首选。如果需要，还需要一些图形库，比如Pixi。js。其次，你还需要考虑学习成本。一般来说，CSS更容易上手，上手成本也更低。如果本地需要稍微复杂的动画效果，可以直接引用已有的库，如Animate.css[1]。JS可能更复杂。原生JS没问题。如果是另外一个图形库，需要面对完全不同的API，这是一个学习成本。最后，还需要考虑工程。比如lottie-web本身就已经很大了（532k，压缩后150k，gzip后43k）。另外，设计导出的动画json文件也会很大。仅仅为了一个动画就引入整个lottie是不划算的。应该是另一种方式。综合考虑，可以用CSS2来实现烟花动画。单个烟花的实现这里我们可以通过序列帧来实现。比如我会要求设计师导出一组序列帧图片，像这样，然后把这些图片按顺序组合起来（很多工具都可以合成），得到这样的图片预览。接下来，只需要使用CSS动画函数中的steps()[2]函数符号就可以完成逐帧动画假设如下HTML结构
CSS实现为.fireworks{位置：绝对；宽度：150px；高度：150px；background:url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png')右上不重复；背景大小：自动150px；动画：烟花1ssteps(24)infinite;}@keyframesfireworks{to{background-position:100%;}}效果如下：Kapture2021-08-21at10.49.073.随机位置的烟花现在烟花每次出现的位置都是一样的是的，太规则了就不那么自然了，那么如何实现在这里呆一会儿和在那里呆一会儿的效果？这里可以再添加一个关键帧，随意改变几个位置（不一定要真的随机，只要看起来不那么规则即可）。@keyframesrandom{25%{transform:translate(200%,50%);}.fireworks{/*other*/animation:fireworks1ssteps(24)infinite,random4sinfinite;}transform:translate(80%,80%);}75%{转换：翻译（20%，60%）；}}.fireworks{/*Other*/animation:fireworks1ssteps(24)infinite,random4sinfinite;}然后把两个动画结合起来:.fireworks{/*Others*/animation:fireworks1ssteps(24)infinite,random4sinfinite;}效果如下：是不是奇怪的动画？原因是改变位置的时候有一个平滑的过渡，所以这个地方还需要加上steps()，注意这里只需要steps(1)，意思是直接跳到指定的key结束流程frame,no途中会自动创建额外的帧。.fireworks{/*Other*/animation:fireworks1ssteps(24)infinite,random4ssteps(1)infinite;}效果如下：这样是不是更自然？4.随机大小的烟花有随机位置。现在添加一些大小变化，只需将比例添加到位置变化即可。@keyframesrandom{25%{transform:translate(200%,50%)scale(0.8);}50%{transform:translate(80%,80%)scale(1.2);}75%{transform:translate(20%,60%)scale(0.65);}}效果如下：这样一个位置随机，大小随机的烟花就完成了。会有4个不同的位置，所以不需要太多的HTML结构就可以给每个位置一个不同的位置
