关于前端:CSS-快速实现烟花绽放🎆

最近我的项目上须要做一个烟花动画，要求是随机大小，不同中央呈现，先看成果

一、抉择适合的动画

什么样的场景决定应用什么样的动画。比方一些比拟轻量、装饰性的动画，CSS 动画就足够了，而一些对动画要求比拟高的经营流动，创意小游戏等，JS 动画必定是首选，必要状况下还须要借助一些图形库，比方 Pixi.js。

其次，还须要从学习老本思考。一般而言，CSS 应用起来更容易，上手老本更低，部分须要略微简单的动效能够间接参考已有的库，例如 Animate.css。JS 可能就简单一些了，原生 JS 还好，如果是其余图形库，又须要面对齐全不一样的 api，都是学习老本。

最初，也须要思考工程化。例如 lottie-web 自身就曾经很大了（532k，压缩后150k，gzip后也有43k），另外设计导出的动画 json 文件也会很大，仅仅是为了一个动画而引入整个 lottie 就有些不划算了，应该换其余形式。

综合思考，烟花动画能够采纳 CSS 实现

二、单个烟花的实现

这里咱们能够采取序列帧的形式来实现。比方我会要求设计师导出一组序列帧图片，像这样的

而后把这些图片依照程序合在一张图片上，能够应用一些在线生成工具，例如 sprite-generator，就失去了这样的图片

接下来，只须要利用 CSS 动画函数中的 steps() 性能符，逐帧动画就实现了

假如有如下 HTML 构造

<div class="fireworks"></div>

CSS 实现为

.fireworks {
    position: absolute;
    width: 150px;
    height: 150px;
    background: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
    background-size: auto 150px;
    animation: fireworks 1s steps(24) infinite;
}
@keyframes fireworks {
    to {
        background-position: 100%;
    }
}

成果如下

三、随机地位的烟花

当初烟花每次呈现的地位都是雷同的，太有法则显得不那么天然，那么如何实现一会在这里一会在那里的成果呢？这里能够再增加一个关键帧，轻易改几个地位（不肯定须要真的随机，只须要看着不那么法则即可）

@keyframes random {
    25% {
        transform: translate(200%, 50%);
    }
    50% {
        transform: translate(80%, 80%);
    }
    75% {
        transform: translate(20%, 60%);
    }
}

而后把两个动画组合起来

.fireworks {
    /* 其余 */
    animation: fireworks 1s steps(24) infinite, random 4s infinite;
}

成果如下

是不是很奇怪的动画？起因是在扭转地位的时候也是平滑过渡的，所以这个中央也须要加上 steps()，留神这里只须要 steps(1)就能够了，示意这个过程中间接跳到指定关键帧就完结了，不会主动在途中创立其余帧

.fireworks {
    /* 其余 */
    animation: fireworks 1s steps(24) infinite, random 4s steps(1) infinite;
}

成果如下

这样是不是天然多了？

四、随机大小的烟花

随机地位有了，当初再加点大小变动，只须要在地位变动的根底上加上 scale 就能够了

@keyframes random {
    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 构造，每个给一个不同的地位

<div class="fireworks" style="left: 15%; top: 5%;"></div>
<div class="fireworks" style="right: 30%; top: 13%;"></div>
<div class="fireworks" style="left: 5%; top: 23%;"></div>
<div class="fireworks" style="right: 45%; top: 8%;"></div>

成果如下

4个一起呈现，太参差了，所以须要增加一些延时 animation-delay 错开呈现的工夫

<div class="fireworks" style="left: 15%; top: 5%;"></div>
<div class="fireworks" style="right: 30%; top: 13%; animation-delay: -0.4s;"></div>
<div class="fireworks" style="left: 5%; top: 23%; animation-delay: -1.7s;"></div>
<div class="fireworks" style="right: 45%; top: 8%; animation-delay: -3.1s;"></div>

这样就失去了文章结尾的成果了

残缺代码可拜访 CSS fireworks (codepen.io)

六、绚丽多彩的烟花

设计同学感觉红色有些太枯燥，想换个色彩，比方黄色？因为咱们曾经做成了序列帧图片，不可能再生成一套黄色烟花的图片，那么问题来了，如何通过 CSS 更换色彩呢？

这里就又不得不借助一下 CSS Mask 了，对于 Mask 之前的文章介绍过很多实用的案例，这里就不多介绍了，如果还不相熟 mask，能够参考这一篇客栈说书：CSS遮罩CSS3 mask/masks具体介绍 « 张鑫旭-鑫空间-鑫生存 (zhangxinxu.com)

只须要一点点改变就行了，把原先的背景用作遮罩背景，如下

.fireworks {
    /*其余款式*/
      background: #FFEFAD;
    -webkit-mask: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
    -webkit-mask-size: auto 150px;
}
@keyframes fireworks {
    to {
        -webkit-mask-position: 100%;
    }
}

成果如下

再进一步，能够退出色彩的变动动画，比方黄 → 红 → 紫 → 青，再定义一个关键帧

}
.fireworks {
       /*其余款式*/
    animation: fireworks 2s steps(24) infinite, random 8s steps(1) infinite, random_color 1s infinite;
}
@keyframes random_color {
    0% {
        background-color: #ffefad;
    }
    25% {
        background-color: #ffadad;
    }
    50% {
        background-color: #aeadff;
    }
    75% {
        background-color: #adffd9;
    }
}

能够失去如下的成果

是不是变得绚丽多彩了起来？残缺代码能够拜访 CSS fireworks colors (codepen.io)

七、IE下的降级解决

古代浏览器根本都反对 mask 遮罩了，然而 IE 不反对，所以 IE下就变成了这样

因而，IE 下须要降级解决，不必绚丽多彩，只须要随机绽开

那么如何辨别 IE 浏览器和古代浏览器呢？其实能够用 IE 不反对的一些选择器就能够了，比方 :default

.fireworks {
    background: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
    background-size: auto 150px;
}

/*以下古代浏览器反对*/
_:default, .fireworks {
    -webkit-mask: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
    -webkit-mask-size: auto 150px;
}

八、动画与用户体验

适当的动画能够晋升用户体验，但不是所有用户都喜爱动画，尤其是一些装璜类动画，可能感觉花里胡哨的，可能感觉扩散了注意力，可能为了省电，甚至局部动画还会对用户造成不良的反馈。为此，选择权应该交给用户，用户感觉不须要能够在零碎间接敞开动画。

目前大部分的操作系统都能够敞开不必要的动画

在 Windows 10 中：设置 > 轻松获取 > 显示 > 在 Windows 中显示动画。
在 Windows 7 中：控制面板 > 轻松获取 > 使计算机更易于查看 > 敞开不必要动画。
在 MacOS 中：零碎偏好 > 辅助应用 > 显示 > 削弱动态效果。
在 iOS 上：设置 > 通用 > 辅助性 > 削弱动态效果。
在 Android 9+ 上：设置 > 辅助性 > 移除动画。

绝对应的，CSS 中能够通过媒体查问 prefers-reduced-motion来检测零碎是否开启动画削弱性能。

所以，能够再减少这样一段 CSS

@media screen and (prefers-reduced-motion) { 
    /* 禁用不必要的动画 */ 
    .fireworks { 
        animation: none; 
    } 
}

成果如下（这里以macOS为例）

能够看到，当勾选 “削弱动态效果” 时，烟花动效就齐全隐没了。尽管没有什么技术含量，然而却关照到了一部分人的感触，人不知;鬼不觉之间就晋升了用户体验，心甘情愿呢。

九、总结和阐明

以上介绍了烟花动画实现的全过程，还包含一些用户体验小技巧，简略总结一下

抉择适合的动画实现形式
CSS 序列帧动画实现的要害是 steps
能够把多个动画组合起来造成新的动画
扭转图形色彩能够用 mask 实现
IE 和古代浏览器能够用 :default 辨别
有必要追随零碎设置敞开动画，能够借助媒体查问 prefers-reduced-motion

CSS 实现并不简单，大部分同学应该都能疾速上手，然而做的完满其实并不容易。如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

关于前端:CSS-快速实现烟花绽放🎆

一、抉择适合的动画

二、单个烟花的实现

三、随机地位的烟花

四、随机大小的烟花

五、多个烟花随机绽开

六、绚丽多彩的烟花

七、IE下的降级解决

八、动画与用户体验

九、总结和阐明

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:CSS-快速实现烟花绽放🎆

一、抉择适合的动画

二、单个烟花的实现

三、随机地位的烟花

四、随机大小的烟花

五、多个烟花随机绽开

六、绚丽多彩的烟花

七、IE下的降级解决

八、动画与用户体验

九、总结和阐明

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复