博客 / 詳情

返回

FFCreator -- 用 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

react , vue.js , node.js , javascript正則 , html5
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.