前言
自从掘金的月度征文活动不搞之后,我已经好久没有在掘金上面写文章了。再不写点东西,感觉自己的笔都快生锈了。而现在,刚好又到了新年创意大赛的时候了。
在去年,我参加了兔年的创意大赛。今年龙年了,我打算参加一下龙年的新年创意大赛了。同时,也再练习下自己的文笔。
创意
在兔年的创意大赛里,我用css相关内容,做了一些兔子的动画。
现在再看当时做的一些动画效果,感觉还是挺可爱的。
今年到了龙年了,我在想,要做一些什么创意效果呢?
我想了又想,想了又想,既然是龙年了,那就做一条龙吧。同时,以前有一部美剧,我挺喜欢看的: 《冰与火之歌》 。
这部美剧,里面有一些场景是什么呢:是一条龙,喷出火焰。
好的,灵感这就来了,就做一条会喷火的龙吧。
既然已经想好了要制作什么内容了,那就开始制作吧。
寻找素材
要开始制作动画,那当然要先找素材了。在开始制作前,我们要找一些龙的素材,和火的素材等。
有了这些素材,我们才可以开始制作动画。
找素材的过程,就不详细说了,通过百度即可找到。
制作
素材已经找好了,接下来,我们就可以开始进行制作了。
这里,我打算使用原生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来制作的。没有涉及到特别复杂的方法,只要你把整个制作的思路给捋清楚了,制作起来,就没有啥问题了。
如果你也想制作一条会喷火的龙,可以参考一下上面我写的思路,自己来实现一下吧!
最后,新年了,祝大家:就像这条喷火的龙一样,红红火火!
原文链接:https://juejin.cn/post/7337148150619570226 作者:Alin