FFCreator -- 用 node.js 来制作数据可视化视频吧

TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在 Web 前端、NodeJS 开发、UI 设计、移动 APP 等大前端领域都有所实践和积累。

目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。

团队倡导开源共建，拥有各种技术大牛，团队 Github 地址：https://github.com/tnfe

今天为大家介绍 FFCreator， 项目地址: FFCreator

引言

数据可视化，一图胜千言

无论我们是内容的生产者或者消费者，身处数据时代，我们每天都在和数据打交道。

日益增长的消费者的内容消费能力对内容生产者提出越来越高的要求，我们不断寻求更加高效地内容类型和内容表达类型。数据时代，“数据可视化”作为一种表达类型、生产类型、内容类型，愈发高频地走进受众视野。

数据可视化的好处无需赘述，俗话说一图胜千言。

(下面这张"图"，看着好多字，仔细看看又啥也没有，看了好一会只看到五个字--'一看胜千言'，甚至还要骂一句，这他喵是个广告（1913 年的广告）)

(而下面这张"图"，没有文字，但你好像看到好多个字--"道理我都懂，可是鸽子为什么这么大"，甚至嘴角都不自觉微笑了起来)

当数据可视化遇上短视频

上面看似无厘头的两张图，可能和数据可视化没太大关系，我们仍可以看到图片相对于文字更丰富的表现力，那么当数据可视化遇到视频呢？

时代的列车咣咣地开，时光的小马驹也哒哒地跑。

我们从纸媒时代进入到图文混排，从数据可视化进入到可视化视频，每种变更都是为了更加高效地表达、为了适应内容消化吸收能力更加强的消费者、为了适应高速奔跑的时代。

每个人对内容、对数据的消化理解速度是不同的。作为内容消费者，有人喜欢传统的纸媒，严肃严谨、有深度有态度；有人喜欢短视频，轻松便捷、有娱乐有温度。

作为内容生产者，消费者时间的碎片化，短视频作为内容生产者更加多元化的生产方式，已成为当下内容表达的趋势，内容创作者需要压缩视频时长，承载更多内容。

或许有专家会说，数据可视化和视频或许不是最好的搭配。每个人对数据有不同的吸收速度；而短视频的节奏相对比较快，且是限定的，不方便观众去消化理解。

(网友徐凤年：？？？我谢谢你个砖家，看剧我都三倍速，不要低估我的吸收速度！！)

一方面是"高速数据吸收能力"消费者的诉求，另一方面是数据可视化视频丰富表现力。我们为什么不拥抱这种内容类型、内容表现类型呢？

请看下边这个例子。

当我们用横轴数量、纵轴地区的二维图表来呈现数据的时候没有问题，但是当我们想加入时间第三个维度或者更多维度的时候，二维图表就不太合适了。可视化视频最大的优势，就是更加直观且信息量大。尤其是对于涉及时间趋势的多维度内容，结合视频是非常好的应用场景。

所以，我们经常在 B 站、抖音上看到许多各类型的数据可视化的视频，当我们赞叹这些数据可视化类视频高效表达的同时，相信很多小伙伴都很好奇这些视频到底怎么做的吧？

FFCreator

谷歌、百度咔咔一顿搜，还是没明白怎么做、还是没找到合适的工具，不妨试一试这一款用 node.js 来制作数据可视化视频的工具。

TNTWeb 团队推出的 FFCreator 是一个基于 node.js 的轻量、灵活的短视频制作库。您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的的视频短片。

你可以为视频添加音乐、字幕、文字、虚拟主播等各种元素。当然可以非常方便的来制作单个或批量数据可视化类的视频。

或许你在网上可以搜到各种各样的工具，但所处角色不同，对工具的需求就不同。

FFCreator 不是像网上搜到的直接面向内容创作者的一些工具，而是面向开发者的，但是它使用起来超级简单， 只要有一点前端基础都可以快速学会。

简介

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... 下找到你想要的图表, 打开编辑页面复制当中的配置代码。

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