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

//生成html let html = createHTML({ title: '逐帧动画', scriptAsync: true, lang: 'en', dir: 'rtl', head: '<meta content="example">', body: '<div></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 + 'https://www.jb51.net/' +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 content="example">', body: '<div></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工具了。

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

您可能感兴趣的文章: