如何利用node.js开发一个生成逐帧动画的小工具
前言
在实际工作中我们已经下下来不下于一万个npm包了，像我们熟悉的vue-cli，react-native-cli等，只需要输入简单的命令vueinitwebpackproject，即可快速帮我们生成一个初始项目。在实际开发项目中，我们也可以定制一个属于自己的npm包，来提高自己的工作效率。
为什么要开发一个工具包？
- 减少重复性的工作，不再需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。
- 根据交互动态生成项目结构和所需要的文件等。
- 减少人工检查的成本。
- 提高工作效率，解放生产力。
这次以帧动画工具为例，来一步一步解析如何开发一个npm包。
开始前的准备
以我们这次为例。由于目前在做一些活动页相关的工作，其中动画部分全都采用CSS3中的animation来完成，但是这样每次开发都要计算百分比，手动判断动画的一些属性值，十分耗时又很容易出错，就想能不能写个脚本，直接一行命令就可以搞定了呢？！答案当然是肯定的。
理清思路
我们要做一个可以通过读取图片就可以自动生成包含CSSanimation的HTML页面，以后需要生成相应的CSS片段，直接执行命令就可以了。
初始化
既然是npm包，那我们就需要在npmjs上注册一个账号，注册完成之后回到本地新建一个文件目录fbf，进入fbf目录下执行npminit-y。
{
"name":"fbf",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1"
},
"bin":{
"test":"index.js"
},
"keywords":[],
"author":"",
"license":"ISC"
}
这样，你的package.json就建好了。
依赖的库
来看看会用到哪些库。
- commander.js，可以自动的解析命令和参数，用于处理用户输入的命令。
- chalk，可以给终端的字体加上颜色。
- create-html，创建HTML模版，用于生成HTML。
- image-size，获取图片大小。
npminstallcommanderchalkcreate-htmlimage-size-S
命令行操作
node.js内置了对命令行操作的支持，在package.json中的bin字段可以定义命令名和关联的执行文件。所以现在package.json中加上bin的内容：
{
"name":"fbf",
"version":"1.0.0",
"description":"",
"bin":{
"fbf":"index.js"
},
...
}
然后在index.js中来定义start命令：
#!/usr/bin/envnode
constprogram=require('commander');
program.version('1.0.0','-v,--version')
.command('start')
.action((name)=>{
console.log(name);
});
program.parse(process.argv);
调用version('1.0.0','-v,--version')会将-v和--version添加到命令中，可以通过这些选项打印出版本号。
调用command('start
action()则是执行start命令会发生的行为，要生成项目的过程就是在这里面执行的，这里暂时只打印出name。
其实到这里，已经可以执行start命令了。我们来测试一下，在fbf的同级目录下执行：
node./test/index.jsstartHelloWorld
可以看到命令行工具也打印出了HelloWorld，那么很清楚，action((name)=>{})这里的参数name，就是我们执行start命令时输入的项目名称。
命令已经完成，接下来就要针对图片的操作了。
获取图片信息
这里我们默认根据第一张图片的尺寸信息作为外层DIV的默认尺寸。
#!/usr/bin/envnode
constprogram=require('commander');
constfs=require('fs');
constpath=require('path');
constcreateHTML=require('create-html');
constsizeOf=require('image-size');
constchalk=require('chalk');
program.version('1.0.0','-v,--version')
.command('start')
.action((dir)=>{
//获取图片路径
constimgPath=path.resolve(dir)
letimgSize=null;
fs.readdir(imgPath,(err,file)=>{
imgSize=sizeOf(dir+'/'+file[0]);
//取第一个图片的尺寸作为框尺寸
letcssString=`
.fbf-animation{
width:${imgSize.width}px;
height:${imgSize.height}px;
margin:auto;
background-image:url(./${dir}/${file[0]});
background-size:${imgSize.width}px${imgSize.height}px;
background-repeat:no-repeat;
animation-name:keyframes-img;
animation-duration:0.36s;
animation-delay:0s;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
animation-timing-function:steps(1);
}
`
})
})
生成CSS代码
然后根据图片数量生成相应的keyframes代码
functiontoCss(dir,fileList){
let_css='';
letstart=0;
constper=Math.floor(100/fileList.length);
fileList.map((path,i)=>{
if(i===fileList.length-1){
_css+=`
${start+i*per}%,100%{
background:url(./${dir}/${path})centercenterno-repeat;
background-size:100%auto;
}
`
}else{
_css+=`
${start+i*per}%{
background:url(./${dir}/${path})centercenterno-repeat;
background-size:100%auto;
}
`
}
})
return_css;
}
letframeCss=toCss(dir,newFile)
//取第一个图片的尺寸作为框尺寸
letcssString=`
.fbf-animation{
width:${imgSize.width}px;
height:${imgSize.height}px;
margin:auto;
background-image:url(./${dir}/${file[0]});
background-size:${imgSize.width}px${imgSize.height}px;
background-repeat:no-repeat;
animation-name:keyframes-img;
animation-duration:0.36s;
animation-delay:0s;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
animation-timing-function:steps(1);
}
@keyframeskeyframes-img{
${frameCss}
}
生成html文件
最后我们把生成的CSS放到HTML里。
//生成html
lethtml=createHTML({
title:'逐帧动画',
scriptAsync:true,
lang:'en',
dir:'rtl',
head:'',
body:' 视觉美化
通过chalk来为打印信息加上样式，比如成功信息为绿色，失败信息为红色，这样子会让用户更加容易分辨，同时也让终端的显示更加的好看。
constchalk=require('chalk');console.log(chalk.green('生成代码成功！'));console.log(chalk.red('生成代码失败'));
完整示例
#!/usr/bin/envnode
constprogram=require('commander');
constfs=require('fs');
constpath=require('path');
constcreateHTML=require('create-html');
constsizeOf=require('image-size');
constchalk=require('chalk');
//排序
constsortByFileName=files=>{
constreg=/[0-9]+/g;
returnfiles.sort((a,b)=>{
letimga=(a.match(reg)||[]).slice(-1),
imgb=(b.match(reg)||[]).slice(-1)
returnimga-imgb
});
}
//删除.DS_Store
functiondeleteDS(file){
file.map((v,i)=>{
if(v==='.DS_Store'){
fs.unlink('img/.DS_Store',err=>{})
}
})
}
//生成keyframe
functiontoCss(dir,fileList){
let_css='';
letstart=0;
constper=Math.floor(100/fileList.length);
fileList.map((path,i)=>{
if(i===fileList.length-1){
_css+=`
${start+i*per}%,100%{
background:url(./${dir}/${path})centercenterno-repeat;
background-size:100%auto;
}
`
}else{
_css+=`
${start+i*per}%{
background:url(./${dir}/${path})centercenterno-repeat;
background-size:100%auto;
}
`
}
})
console.log(chalk.green('csssuccessed!'))
return_css;
}
program.version('1.0.0','-v,--version')
.command('start')
.action((dir)=>{
constimgPath=path.resolve(dir)
letimgSize=null;
fs.readdir(imgPath,(err,file)=>{
constnewFile=sortByFileName(file)
deleteDS(newFile)
imgSize=sizeOf(dir+'/'+file[0]);
letframeCss=toCss(dir,newFile)
//取第一个图片的尺寸作为框尺寸
letcssString=`
.fbf-animation{
width:${imgSize.width}px;
height:${imgSize.height}px;
margin:auto;
background-image:url(./${dir}/${file[0]});
background-size:${imgSize.width}px${imgSize.height}px;
background-repeat:no-repeat;
animation-name:keyframes-img;
animation-duration:0.36s;
animation-delay:0s;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
animation-timing-function:steps(1);
}
@keyframeskeyframes-img{
${frameCss}
}
`
letcss=`
`
//生成html
lethtml=createHTML({
title:'逐帧动画',
scriptAsync:true,
lang:'en',
dir:'rtl',
head:'',
body:' 代码一共100行左右，可以说非常简单明了，有兴趣的同学可以试试。
最后
完成之后，使用npmpublishfbf就可以把脚手架发布到npm上面，通过-g进行全局安装，就可以在自己本机上执行fbfstart[dir]来生成一个fbf.html文件，这样便完成了一个简单的node工具了。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。