溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關怎樣利用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。
{
"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開發一個生成逐幀動畫的小工具”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
