来制作一条会喷火的龙吧

前言

自从掘金的月度征文活动不搞之后，我已经好久没有在掘金上面写文章了。再不写点东西，感觉自己的笔都快生锈了。而现在，刚好又到了新年创意大赛的时候了。

在去年，我参加了兔年的创意大赛。今年龙年了，我打算参加一下龙年的新年创意大赛了。同时，也再练习下自己的文笔。

创意

在兔年的创意大赛里，我用css相关内容，做了一些兔子的动画。

兔年创意：5.招手的兔子

兔年创意：6.摇耳朵的兔子

现在再看当时做的一些动画效果，感觉还是挺可爱的。

今年到了龙年了，我在想，要做一些什么创意效果呢？

我想了又想，想了又想，既然是龙年了，那就做一条龙吧。同时，以前有一部美剧，我挺喜欢看的： 《冰与火之歌》 。

这部美剧，里面有一些场景是什么呢：是一条龙，喷出火焰。

好的，灵感这就来了，就做一条会喷火的龙吧。

既然已经想好了要制作什么内容了，那就开始制作吧。

寻找素材

要开始制作动画，那当然要先找素材了。在开始制作前，我们要找一些龙的素材，和火的素材等。

有了这些素材，我们才可以开始制作动画。

找素材的过程，就不详细说了，通过百度即可找到。

制作

素材已经找好了，接下来，我们就可以开始进行制作了。

这里，我打算使用原生js来实现的。所以我们先创建一个index.html文件，我们将会在这个文件里完成我们的代码。

我们先在body里面，添加一个img标签，把我们的龙素材引入进来。

我们看到，龙图片素材，已经被我们引入进来了。

接下来，我们要开始制作火焰了。制作火焰，要怎么制作呢？

我想的是，不要一开始，就在龙嘴那里制作火焰。先是在其它地方，把火焰制作好之后，我们再把火焰移动到龙嘴那里。这样更容易制作，不会让龙嘴的位置，干扰到火焰的制作。

我们在下面，再新增一个img标签，把火焰素材引入进来。

火焰的素材引入进来了，但是图片太大了。没有关系，我们可以通过css来进行调整。

通过css的调整，火焰就变小了。

火焰素材引入进来了，要怎么做喷火效果？

这是我的思路：

我想的是，在一个点（起始点）创建多个火焰，然后让火焰掉落下来。掉落的时候，可以让火焰有一个随机的左右掉落。这样多个火焰的积累掉落，就会形成一个火柱的效果了。

有了思路，就可以开始制作了。

因为火柱制作好之后，我们还要把火柱移动到龙嘴那里。所以，在火焰素材外层，我们需要添加一个容器，把这些火焰都包裹起来。

<div class="fire-wrapper"></div>

这里，我是使用一个div来做为容器，把火焰包裹起来。

创作火焰素材，我会通过动态创建img标签的方式，添加到火焰容器里面，从而实现动态地创建火焰素材。

创建火焰素材的img标签，我把它封装成了一个函数

 function generateFire() {
            let imgDom = document.createElement('img')
            imgDom.src = './images/huo1.png'
            let x = getRandom(50) * getPositiveAndNegative()
            let y = 180
            let scale = getRandom(1.6)
            imgDom.style.setProperty('--custom-x', `${x}px`)
            imgDom.style.setProperty('--custom-y', `${y}px`)
            imgDom.style.setProperty('--custom-scale', scale < 1 ? scale + 1 : scale)
            imgDom.classList.add('fire')
            fireWrapper.appendChild(imgDom)
​
            setTimeout(() => {
                imgDom.classList.add('fire-big')
            }, 200);
​
            setTimeout(() => {
                fireWrapper.removeChild(imgDom)
            }, 1500);
        }

主要是使用document.createElement来创建一个img标签，然后再给这个img标签，添加一些属性和类名。最后把这个img标签，添加到火焰素材容器里即可。

这个创建火焰的函数，都是一些基本的javascript代码，大家一看就懂了。

创建火焰的函数封装好了，要不停地创建火焰，这时候就需要使用到setInterval方法了。

 setInterval(() => {
            generateFire()
        }, 80);

setInterval方法的配置，我这里设置的是80ms。即每隔80ms就调用一次generateFire方法，创建火焰素材。

这样火柱就创建好了，接着，我们要火焰的容器，移动到龙嘴那里。这样看起来，火焰就是从龙的嘴里面，喷射出来的。

移动火焰容器，你可以使用绝对定位或者transform都可以，我这里使用的是绝对定位，把容器移动到龙嘴里面。

前面介绍了这么多，我们看下最后出来的效果是怎么样的：

我们可以看到，喷火龙的效果，就制作好了。整个效果，看起来还可以吧。

小结

本篇文章，主要是介绍了喷火龙的制作方法。整个制作过程，使用原生js和html来制作的。没有涉及到特别复杂的方法，只要你把整个制作的思路给捋清楚了，制作起来，就没有啥问题了。

如果你也想制作一条会喷火的龙，可以参考一下上面我写的思路，自己来实现一下吧！

最后，新年了，祝大家：就像这条喷火的龙一样，红红火火！