使用node.js开发一个生成逐帧动画小工具
在实际工作中我们已经下下来不下于一万个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。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { "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 的内容:
1 2 3 4 5 6 7 8 9 | { "name": "fbf", "version": "1.0.0", "description": "", "bin": { "fbf": "index.js" }, ... } |
然后在 index.js
中来定义 start
命令:
1 2 3 4 5 6 7 8 9 | #!/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
的默认尺寸。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | #!/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
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 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
里。
1 2 3 4 5 6 7 8 9 10 11 12 13 | //生成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('生成代码失败'));
完整示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | #!/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
工具了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器