如何利用node.js开发一个生成逐帧动画的小工具


Posted in Javascript onDecember 01, 2019

前言

在实际工作中我们已经下下来不下于一万个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工具了。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 #Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 #Javascript
vue多个元素的样式选择器问题
Nov 29 #Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 #Javascript
vue 组件开发原理与实现方法详解
Nov 29 #Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 #Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 #Javascript
You might like
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Python实现telnet服务器的方法
2015/07/10 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
宣传部部长竞选演讲稿
2014/04/26 职场文书
说明书格式及范文
2014/05/07 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
股份转让协议书范本
2015/01/27 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书