使用node.js开发一个生成逐帧动画小工具
2019-11-27 23:16
1161 查看
在实际工作中我们已经下下来不下于一万个
npm包了，像我们熟悉的
vue-cli，
react-native-cli等，只需要输入简单的命令
vue init webpack project，即可快速帮我们生成一个初始项目。在实际开发项目中，我们也可以定制一个属于自己的
npm包，来提高自己的工作效率。
为什么要开发一个工具包？
-
减少重复性的工作，不再需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。
-
根据交互动态生成项目结构和所需要的文件等。
-
减少人工检查的成本。
-
提高工作效率，解放生产力。
这次以帧动画工具为例，来一步一步解析如何开发一个
npm包。
开始前的准备
以我们这次为例。由于目前在做一些活动页相关的工作，其中动画部分全都采用
CSS3中的
animation来完成，但是这样每次开发都要计算百分比，手动判断动画的一些属性值，十分耗时又很容易出错，就想能不能写个脚本，直接一行命令就可以搞定了呢？！答案当然是肯定的。
理清思路
我们要做一个可以通过读取图片就可以自动生成包含
CSS animation的
HTML页面，以后需要生成相应的
CSS片段，直接执行命令就可以了。
初始化
既然是
npm包，那我们就需要在npmjs上注册一个账号，注册完成之后回到本地新建一个文件目录
fbf，进入
fbf目录下执行
npm init -y。
{
"name": "fbf",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"bin": {
"test": "index.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
这样，你的
package.json就建好了。
依赖的库
来看看会用到哪些库。
-
commander.js，可以自动的解析命令和参数，用于处理用户输入的命令。
-
chalk，可以给终端的字体加上颜色。
-
create-html，创建
HTML
模版，用于生成HTML
。 -
image-size，获取图片大小。
npm install commander chalk create-html image-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/env node
const program = require('commander');
program.version('1.0.0', '-v, --version')
.command('start <name>')
.action((name) => {
console.log(name);
});
program.parse(process.argv);
调用
version('1.0.0', '-v, --version') 会将 -v和
--version添加到命令中，可以通过这些选项打印出版本号。
调用
command('start <name>') 定义 start命令，
name则是必传的参数，为文件名。
action()则是执行
start命令会发生的行为，要生成项目的过程就是在这里面执行的，这里暂时只打印出
name。
其实到这里，已经可以执行
start命令了。我们来测试一下，在
fbf的同级目录下执行：
node ./test/index.js start HelloWorld
可以看到命令行工具也打印出了
HelloWorld，那么很清楚，
action((name) => {}) 这里的参数 name，就是我们执行
start命令时输入的项目名称。
命令已经完成，接下来就要针对图片的操作了。
获取图片信息
这里我们默认根据第一张图片的尺寸信息作为外层
DIV的默认尺寸。
#!/usr/bin/env node
const program = require('commander');
const fs = require('fs');
const path = require('path');
const createHTML = require('create-html');
const sizeOf = require('image-size');
const chalk = require('chalk');
program.version('1.0.0', '-v, --version')
.command('start <dir>')
.action((dir) => {
//获取图片路径
const imgPath = path.resolve(dir)
let imgSize = null;
fs.readdir(imgPath, (err, file) => {
imgSize = sizeOf(dir + '/' +file[0]);
//取第一个图片的尺寸作为框尺寸
let cssString = `
.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代码
function toCss(dir, fileList){
let _css = '';
let start = 0;
const per = Math.floor(100/fileList.length);
fileList.map((path, i) => {
if(i === fileList.length - 1){
_css += `
${start + i*per}%, 100% {
background:url(./${dir}/${path}) center center no-repeat;
background-size:100% auto;
}
`
}else{
_css += `
${start + i*per}% {
background:url(./${dir}/${path}) center center no-repeat;
background-size:100% auto;
}
`
}
})
return _css;
}
let frameCss = toCss(dir, newFile)
//取第一个图片的尺寸作为框尺寸
let cssString = `
.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);
}
@keyframes keyframes-img {
${frameCss}
}
生成html文件
最后我们把生成的
CSS放到
HTML里。
//生成html
let html = createHTML({
title: '逐帧动画',
scriptAsync: true,
lang: 'en',
dir: 'rtl',
head: '<meta name="description" content="example">',
body: '<div class="fbf-animation"></div>' + css,
favicon: 'favicon.png'
})
fs.writeFile('fbf.html', html, function (err) {
if (err) console.log(err)
})
视觉美化
通过
chalk来为打印信息加上样式，比如成功信息为绿色，失败信息为红色，这样子会让用户更加容易分辨，同时也让终端的显示更加的好看。
const chalk = require('chalk'); console.log(chalk.green('生成代码成功！')); console.log(chalk.red('生成代码失败'));
完整示例
#!/usr/bin/env node
const program = require('commander');
const fs = require('fs');
const path = require('path');
const createHTML = require('create-html');
const sizeOf = require('image-size');
const chalk = require('chalk');
//排序
const sortByFileName = files => {
const reg = /[0-9]+/g;
return files.sort((a, b) => {
let imga = (a.match(reg) || []).slice(-1),
imgb = (b.match(reg) || []).slice(-1)
return imga - imgb
});
}
//删除.DS_Store
function deleteDS(file) {
file.map((v, i) => {
if(v === '.DS_Store'){
fs.unlink('img/.DS_Store', err => {})
}
})
}
// 生成keyframe
function toCss(dir, fileList){
let _css = '';
let start = 0;
const per = Math.floor(100/fileList.length);
fileList.map((path, i) => {
if(i === fileList.length - 1){
_css += `
${start + i*per}%, 100% {
background:url(./${dir}/${path}) center center no-repeat;
background-size:100% auto;
}
`
}else{
_css += `
${start + i*per}% {
background:url(./${dir}/${path}) center center no-repeat;
background-size:100% auto;
}
`
}
})
console.log(chalk.green('css successed!'))
return _css;
}
program.version('1.0.0', '-v, --version')
.command('start <dir>')
.action((dir) => {
const imgPath = path.resolve(dir)
let imgSize = null;
fs.readdir(imgPath, (err, file) => {
const newFile = sortByFileName(file)
deleteDS(newFile)
imgSize = sizeOf(dir + '/' +file[0]);
let frameCss = toCss(dir, newFile)
//取第一个图片的尺寸作为框尺寸
let cssString = `
.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);
}
@keyframes keyframes-img {
${frameCss}
}
`
let css = `
<style>${cssString}</style>
`
//生成html
let html = createHTML({
title: '逐帧动画',
scriptAsync: true,
lang: 'en',
dir: 'rtl',
head: '<meta name="description" content="example">',
body: '<div class="fbf-animation"></div>' + css,
favicon: 'favicon.png'
})
fs.writeFile('fbf.html', html, function (err) {
console.log(chalk.green('html successed!'))
if (err) console.log(err)
})
})
});
program.parse(process.argv);
代码一共100行左右，可以说非常简单明了，有兴趣的同学可以试试。
最后
完成之后，使用
npm publish fbf就可以把脚手架发布到
npm上面，通过
-g进行全局安装，就可以在自己本机上执行
fbf start [dir]来生成一个
fbf.html文件，这样便完成了一个简单的
node工具了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用node.js的开发框架express创建一个web应用
- 使用node.js的开发框架express创建一个web应用
- 使用NODEJS+REDIS开发一个消息队列以及定时任务处理
- 如何使用NODEJS+REDIS开发一个消息队列
- 20160109 Node.js 常用开发工具的使用
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（二）
- 详解使用 Node.js 开发简单的脚手架工具
- [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
- node.js常用开发工具的使用
- 使用Node.js开发一个在线聊天应用——编写前台
- 使用Node.js开发一个在线聊天应用——编写后台
- 使用Idea工具nodeJS+mysql开发项目
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（三）
- 详解如何使用node.js的开发框架express创建一个web应用
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（一）
- 用Node.js做了一个iOS icon自动化生成工具
- 从 iOS，Objective-C， IPhone， iPad， Android， Java， Node.js 或其他平台，或通过其他开发语言，使用WS-Trust请求一个ADFS的令牌
- 详解使用 Node.js 开发简单的脚手架工具
- 使用Node.js开发一个在线聊天应用——准备工作
- 如何检测Web网站使用的是什么JS框架--一个很好用的工具