如何利用node.js開發(fā)一個生成逐幀動畫的小工具

更新時間：2019年12月01日 14:27:31 作者：10年老程序猿

這篇文章主要給大家介紹了關(guān)于如何利用node.js開發(fā)一個生成逐幀動畫小工具的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用node.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

前言

在實際工作中我們已經(jīng)下下來不下于一萬個npm包了，像我們熟悉的 vue-cli，react-native-cli 等，只需要輸入簡單的命令 vue init webpack project，即可快速幫我們生成一個初始項目。在實際開發(fā)項目中，我們也可以定制一個屬于自己的npm包，來提高自己的工作效率。

為什么要開發(fā)一個工具包？

減少重復(fù)性的工作，不再需要復(fù)制其他項目再刪除無關(guān)代碼，或者從零創(chuàng)建一個項目和文件。
根據(jù)交互動態(tài)生成項目結(jié)構(gòu)和所需要的文件等。
減少人工檢查的成本。
提高工作效率，解放生產(chǎn)力。

這次以幀動畫工具為例，來一步一步解析如何開發(fā)一個npm包。

開始前的準備

以我們這次為例。由于目前在做一些活動頁相關(guān)的工作，其中動畫部分全都采用CSS3中的animation來完成，但是這樣每次開發(fā)都要計算百分比，手動判斷動畫的一些屬性值，十分耗時又很容易出錯，就想能不能寫個腳本，直接一行命令就可以搞定了呢？！答案當然是肯定的。

理清思路

我們要做一個可以通過讀取圖片就可以自動生成包含CSS animation的HTML頁面，以后需要生成相應(yīng)的CSS片段，直接執(zhí)行命令就可以了。

初始化

既然是npm包，那我們就需要在npmjs上注冊一個賬號，注冊完成之后回到本地新建一個文件目錄fbf，進入fbf目錄下執(zhí)行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，可以自動的解析命令和參數(shù)，用于處理用戶輸入的命令。
chalk，可以給終端的字體加上顏色。
create-html，創(chuàng)建HTML模版，用于生成HTML。
image-size，獲取圖片大小。

npm install commander chalk create-html image-size -S

命令行操作

node.js 內(nèi)置了對命令行操作的支持，在 package.json 中的 bin 字段可以定義命令名和關(guān)聯(lián)的執(zhí)行文件。所以現(xiàn)在 package.json 中加上 bin 的內(nèi)容：

{
 "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);

調(diào)用 version('1.0.0', '-v, --version') 會將 -v 和 --version 添加到命令中，可以通過這些選項打印出版本號。

調(diào)用 command('start <name>') 定義 start 命令，name 則是必傳的參數(shù)，為文件名。

action() 則是執(zhí)行 start 命令會發(fā)生的行為，要生成項目的過程就是在這里面執(zhí)行的，這里暫時只打印出 name。

其實到這里，已經(jīng)可以執(zhí)行 start 命令了。我們來測試一下，在 fbf 的同級目錄下執(zhí)行：

node ./test/index.js start HelloWorld

可以看到命令行工具也打印出了 HelloWorld，那么很清楚， action((name) => {}) 這里的參數(shù) name，就是我們執(zhí)行 start 命令時輸入的項目名稱。

命令已經(jīng)完成，接下來就要針對圖片的操作了。

獲取圖片信息

這里我們默認根據(jù)第一張圖片的尺寸信息作為外層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代碼

然后根據(jù)圖片數(shù)量生成相應(yīng)的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就可以把腳手架發(fā)布到 npm 上面，通過 -g 進行全局安裝，就可以在自己本機上執(zhí)行 fbf start [dir]來生成一個fbf.html文件，這樣便完成了一個簡單的node工具了。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: