FFCreator -- 用 node.js 來製作資料視覺化視訊吧

TNTWEB發表於2021-12-28
Node.js視覺化

TNTWeb - 全稱騰訊新聞前端團隊，組內小夥伴在 Web 前端、NodeJS 開發、UI 設計、移動 APP 等大前端領域都有所實踐和積累。

目前團隊主要支援騰訊新聞各業務的前端開發，業務開發之餘也積累沉澱了一些前端基礎設施，賦能業務提效和產品創新。

團隊倡導開源共建，擁有各種技術大牛，團隊 Github 地址：https://github.com/tnfe

今天為大家介紹 FFCreator， 專案地址: FFCreator

引言

資料視覺化，一圖勝千言

無論我們是內容的生產者或者消費者，身處資料時代，我們每天都在和資料打交道。

日益增長的消費者的內容消費能力對內容生產者提出越來越高的要求，我們不斷尋求更加高效地內容型別和內容表達型別。資料時代，“資料視覺化”作為一種表達型別、生產型別、內容型別，愈發高頻地走進受眾視野。

資料視覺化的好處無需贅述，俗話說一圖勝千言。

(下面這張"圖"，看著好多字，仔細看看又啥也沒有，看了好一會只看到五個字--'一看勝千言'，甚至還要罵一句，這他喵是個廣告（1913 年的廣告）)

image.png

(而下面這張"圖"，沒有文字，但你好像看到好多個字--"道理我都懂，可是鴿子為什麼這麼大"，甚至嘴角都不自覺微笑了起來)

image.png

當資料視覺化遇上短視訊

上面看似無厘頭的兩張圖，可能和資料視覺化沒太大關係，我們仍可以看到圖片相對於文字更豐富的表現力，那麼當資料視覺化遇到視訊呢？

時代的列車咣咣地開，時光的小馬駒也噠噠地跑。

我們從紙媒時代進入到圖文混排，從資料視覺化進入到視覺化視訊，每種變更都是為了更加高效地表達、為了適應內容消化吸收能力更加強的消費者、為了適應高速奔跑的時代。

每個人對內容、對資料的消化理解速度是不同的。作為內容消費者，有人喜歡傳統的紙媒，嚴肅嚴謹、有深度有態度；有人喜歡短視訊，輕鬆便捷、有娛樂有溫度。

作為內容生產者，消費者時間的碎片化，短視訊作為內容生產者更加多元化的生產方式，已成為當下內容表達的趨勢，內容創作者需要壓縮視訊時長，承載更多內容。

或許有專家會說，資料視覺化和視訊或許不是最好的搭配。每個人對資料有不同的吸收速度；而短視訊的節奏相對比較快，且是限定的，不方便觀眾去消化理解。

(網友徐鳳年：？？？我謝謝你個磚家，看劇我都三倍速，不要低估我的吸收速度！！)

image.png

一方面是"高速資料吸收能力"消費者的訴求，另一方面是資料視覺化視訊豐富表現力。我們為什麼不擁抱這種內容型別、內容表現型別呢？

請看下邊這個例子。

當我們用橫軸數量、縱軸地區的二維圖表來呈現資料的時候沒有問題，但是當我們想加入時間第三個維度或者更多維度的時候，二維圖表就不太合適了。視覺化視訊最大的優勢，就是更加直觀且資訊量大。尤其是對於涉及時間趨勢的多維度內容，結合視訊是非常好的應用場景。

image.png

所以，我們經常在 B 站、抖音上看到許多各型別的資料視覺化的視訊，當我們讚歎這些資料視覺化類視訊高效表達的同時，相信很多小夥伴都很好奇這些視訊到底怎麼做的吧？

image.png

FFCreator

image.png

谷歌、百度咔咔一頓搜，還是沒明白怎麼做、還是沒找到合適的工具，不妨試一試這一款用 node.js 來製作資料視覺化視訊的工具。

TNTWeb 團隊推出的 FFCreator 是一個基於 node.js 的輕量、靈活的短視訊製作庫。您只需要新增幾張圖片或視訊片段再加一段背景音樂，就可以快速生成一個很酷的的視訊短片。

你可以為視訊新增音樂、字幕、文字、虛擬主播等各種元素。當然可以非常方便的來製作單個或批量資料視覺化類的視訊。

或許你在網上可以搜到各種各樣的工具，但所處角色不同，對工具的需求就不同。

FFCreator 不是像網上搜到的直接面向內容創作者的一些工具，而是面向開發者的，但是它使用起來超級簡單， 只要有一點前端基礎都可以快速學會。

image.png

簡介

FFCreator 是一種輕量又簡單的解決方案，只需要很少的依賴和較低的機器配置就可以快速開始工作。它基於 node.js 開發, 普通前端工程師既可以輕鬆上手。 並且它模擬實現了 animate.css90%的動畫效果，您可以輕鬆地把 web 頁面端的動畫效果轉為視訊。

開源倉庫

https://github.com/tnfe/FFCreator

文件地址

https://github.com/tnfe/FFCreator#overview

FFCreator 一些特性

  • 完全基於node.js開發，非常易於使用，並且易於擴充套件和開發。
  • 依賴很少、易安裝、跨平臺，對機器配置要求較低。
  • 視訊製作速度極快，一個 5 分鐘的視訊只需要 1-2 分鐘。
  • 支援近百種場景炫酷過渡動畫效果。
  • 支援圖片、聲音、視訊剪輯、文字等元素。
  • 支援字幕元件、可以將字幕與語音 tts 結合合成音訊新聞。
  • 支援簡單（可擴充套件）的虛擬主播，您可以製作自己的虛擬主播。
  • 包含animate.css90%的動畫效果，可以將 css 動畫轉換為視訊。
  • FFCreatorLite 具有更快的速度，有時它比FFCreator更適合你使用。

Echarts

echarts 是非常強大的圖表元件庫，在資料視覺化領域知名度極高，學過前端的人都知道 echarts。

FFCreator6.0 新增 FFChart 元件, 並且支援 echarts.js 大部分 demo, 您可以製作炫酷的資料視覺化視訊。

注: 為了保持版本的穩定性, 當前 FFCreator 使用的 echarts.js 版本固定為 v5.1.2

教程

背景聊明白了：資料視覺化視訊，當下的高效內容表達方式，我也想擁有！

工具你知道是啥了：FFCreator

前置知識：一丟丟前端基礎

接著來看看使用說明書~~

1. 安裝 FFcreator

安裝 FFCreator 及相關依賴，安裝簡明教程

2. 複製配置程式碼

到 echart.js 官方網址 `demo 頁 https://echarts.apache.org/ex... 下找到你想要的圖表, 開啟編輯頁面複製當中的配置程式碼。

image.png

const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  ...
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

3. 新增圖表元件

注: 因為視訊和 web 的顯示區別, 所以請重新設定邊間距和字號等選項以達到最佳效果

初始化 FFChart 並且設定 option 以及 theme 主題, 這裡可以參考 https://echarts.apache.org/zh... 官方文件。

const fchart = new FFChart({
  theme: 'dark',
  option: option,
  x: width / 2,
  y: height / 2 + 50,
  width: 700,
  height: 600,
});

也可以使用 setOption 方法設定資料

fchart.setOption(option);
fchart.addEffect(['rotateIn', 'zoomIn'], 1.2, 1);

一個 DEMO 的原始碼 https://github.com/tnfe/FFCre...

4. 動態圖表

如何給 FFChart 增加動畫呢? FFChart 提供了 update 方法來更新資料, 它是一個定時執行函式其作用類似於 setInterval。你可以傳入一個更新鉤子函式, 第二個引數為間隔時間。

注: 這裡還要注意調整 animationDuration 以及 animationDurationUpdate 等選項的數值, 來和 updateTime 保持步調一直。
fchart.update(chart => {
  const newData = ...;
  ...
  chart.setOption(newData);
}, 1000);

5. 立刻動畫

當然你還會發現一個問題, 就是呼叫了 update 但是動畫並沒有立刻執行。這是因為 update 是定時間隔函式並不會立即去呼叫鉤子函式執行。當然很多時候使用者想要的就是這種效果。

如果想要立刻執行圖表動畫, 那麼請呼叫 updateNow

fchart.update(() => {}, 1000);
fchart.updateNow();

過程中如遇任何問題，歡迎評論區留言、或致電 團隊 github

團隊

TNTWeb - 騰訊新聞前端團隊，TNTWeb 致力於行業前沿技術探索和團隊成員個人能力提升。為前端開發人員整理出了小程式以及 web 前端技術領域的最新優質內容，每週更新 ✨，歡迎 star，github 地址：https://github.com/tnfe/TNT-Weekly

image.png

相關文章