网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

怎样利用node.js开发一个生成逐帧动画的小工具-创新互联

这篇文章给大家分享的是有关怎样利用node.js开发一个生成逐帧动画的小工具的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为庐江企业提供专业的成都网站建设、成都网站设计庐江网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

前言

在实际工作中我们已经下下来不下于一万个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 ')
 .action((name) => {
 console.log(name);
 });
program.parse(process.argv);

调用 version('1.0.0', '-v, --version') 会将 -v 和 --version 添加到命令中,可以通过这些选项打印出版本号。

调用 command('start ') 定义 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 ')
 .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: '',
 body: '
' + 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 ')
 .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 = `
  
 `
  //生成html
  let html = createHTML({
  title: '逐帧动画',
  scriptAsync: true,
  lang: 'en',
  dir: 'rtl',
  head: '',
  body: '
' + 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开发一个生成逐帧动画的小工具”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网站栏目:怎样利用node.js开发一个生成逐帧动画的小工具-创新互联
文章URL:http://bjjierui.cn/article/cedgsg.html

其他资讯