2. 程式人生 > >使用node.js開發一個生成逐幀動畫小工具

使用node.js開發一個生成逐幀動畫小工具

阿新 • • 發佈：2019-11-28

在實際工作中我們已經下下來不下於一萬個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開發一個生成逐幀動畫小工具

在實際工作中我們已經下下來不下於一萬個npm包了，像我們熟悉的 vue-cli，react-native-cli 等，只需要輸入簡單的命令 vue init webpack project，即可快速幫我們生成一個初始專案。在實際開發專案中，我們也可以定製一個屬於自己的npm包，來

Android 動畫之逐幀動畫小述

一、概述 本節主要介紹下逐幀動畫的基本使用，下面我們就從XML方式建立動畫和程式碼方式建立動畫來分別說下吧 二、逐幀動畫介紹 在開始介紹逐幀動畫之前，先來看一下在本例中我們要實現的逐幀動畫的效果 逐幀動畫，我的理解就是將一幀幀的靜態圖片進行有序的展示，利用人眼的視覺

Android開發之逐幀動畫優化

Android上如果使用逐幀動畫的話，可以很方便地使用AnimationDrawable，無論是先宣告xml還是直接程式碼裡設定，都是幾分鐘的事，但使用AnimationDrawable有一個致命的弱點，那就是需要一次性載入所有圖片到記憶體，萬一幀數多了或者每張圖片都比較大

Cocos2d-x開發實例介紹幀動畫使用

rect http splay end ram nal cache wtl 布爾 以下我們通過一個實例介紹一下幀動畫的使用。這個實比例如以下圖所看到的，點擊Gobutton開始播放動畫，這時候播放button標題變為Stop，點擊Stopbutton能夠停止播放動畫。以下

Android 學習之逐幀動畫（Frame）

http sta ram override start pub fill creat 代碼 幀動畫就是將一些列圖片。依次播放。利用肉眼的“視覺暫留”的原理，給用戶的感覺是動畫的錯覺，逐幀動畫的原理和早期的電影原理是一樣的。 a：須要定義逐幀動畫，能夠通過代碼定義。也能夠

電子書 Node.js開發指南.pdf

external 展示 如何 興趣 前端 span com 部署 沒有 《圖靈原創：Node.js開發指南》首先簡要介紹Node.js，然後通過各種示例講解Node.js的基本特性，再用案例式教學的方式講述如何用Node.js進行Web開發，接著探討一些Node.js進階話

快速搭建 Node.js 開發環境以及加速 npm

sta pre undo packages 快速 lis app.js nat 簡單 快速搭建 Node.js 開發環境以及加速 npm 如何快速搭建 node 開發環境 npm 超慢 github 無法打開的問題 於是我覺得應該寫一篇文章解答所有這些起步問題，讓新同學

node js構建一個vue並啟動它

ros install 項目 http node js 編譯打包 代碼 -- wid 安裝node js，到運行VUE的簡單過程 1、安裝node js 　　下載地址：http://nodejs.cn/download/2、安裝完成後運行Node.js command pr

【轉】Nodejs學習筆記（一）--- 簡介及安裝Node.js開發環境

ack 目錄 javascrip 難度 時間 網站開發 clas jetbrains 常用 目錄 學習資料 簡介 安裝Node.js npm簡介 開發工具 Sublime Node.js開發環境配置 擴展：安裝多版本管理器 學習資料 　　1.深入淺出Node.j

node,js開發環境的搭建

終端 req 們的 系統 控制 nload 操作系統 進入 立即執行 1.node.js開發環境的下載，不過要根據自己使用的電腦和使用的操作系統的實際情況，具體下載地址如下：https://nodejs.org/en/download/2.安裝好之後進行測試（1）使用以下命

Android動畫效果之Frame Animation（逐幀動畫）

想要 顯示 star 載體 rop 復雜 ide sources post 前言： 上一篇介紹了Android的Tween Animation（補間動畫） Android動畫效果之Tween Animation（補間動畫），今天來總結下Android的另外一種動

Node.js起一個web服務器

ont pla req esp alt 服務 func color ron 開啟服務： 代碼如下： var http = require(‘http‘); http.createServer(function (request, response) { /

Oracle 搭建Node.js開發環境

pen pass .exe ons ror spec family nod tco ?先決條件 安裝oralce客戶端驅動。 安裝node.js。 ?創建項目 安裝oracledb模塊 $npm install oracledb 如果失敗了，你可能要爬墻

DevExtreme 搭建Node.js開發環境

開發環境 local str 簡介 temp width tle size ola 簡介 DevExtreme is a component suite for creating highly responsive web applications for touch d

node.js開發環境的搭建

bps 安裝軟件 .org cnpm 下載 bsp 查看 node 安裝包 安裝軟件: 1.node.j下載鏈接：https://pan.baidu.com/s/1exqoBPs1Re_f73ARoCG8LA 密碼：4qqi 2.git 下載鏈接：https://pan.b

逐幀動畫的使用

失去焦點 number clas 失去 class 窗口 city 可能 func 1、如果對性能要求不高可以直接使用jquery的animate $(".nowGift" + heartNumber + "").animate({ right: (x += x_st

用node.js搭建一個靜態資源站 html,js,css正確加載 跳轉也完美實現！

都在 加載 簡單 pipe tps color exec create 包含 昨天剛買了一個服務器想著用來測試一些自己的項目，由於是第一次建站，在tomcat,linux,node.js間想了好久最終因為node搭建比較方便沒那麽麻煩就決定用node.js來搭建網站項目。

用node.js寫一個jenkins發版指令碼

背景 每次到網頁裡手動發版有點煩，寫個指令碼來提高開發效率。 CFG 在 jenkins 設定裡獲取 API TOKEN。 把 host 和賬號密碼拼接起來就可以通過鑑權。 const token = { user: '', password: '', } const host = 'jen

詳解使用 Node.js 開發簡單的腳手架工具

這篇文章主要介紹了詳解使用 Node.js 開發簡單的腳手架工具，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 前言 像我們熟悉的 vue-cli，react-native-cli 等腳手架，只需要輸入簡單的命令 vue init webpack pro

Node.js建立一個可以工作的HTTP伺服器

（1）首先要安裝node.js 可以企業官網下載安裝。採用命令列輸入node -v 檢視安裝的版本 （2）在專案目錄建立一個server.js 檔案： // 引入required模組 var http = require('http'); http.createServer(function