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%的动画效果，你可以很方便的将网页端的动画效果转换成视频。开源仓库https://github.com/tnfe/FFCreator文档地址https://github.com/tnfe/FFCreator#overviewFFCreator部分功能完全基于node.js开发，非常好用，易于扩展和扩展发展。依赖性少，安装方便，跨平台，对机器配置要求低。视频制作速度极快，5分钟的视频只需要1-2分钟。支持近百种场景炫酷转场动画效果。支持图片、声音、视频剪辑、文字等元素。支持字幕组件，可以结合字幕和语音tts合成音频新闻。支持简单（可扩展）虚拟主播，你可以制作自己的虚拟主播。包含animate.css90%的动画效果，可以将css动画转成视频。FFCreatorLite具有更快的速度，有时它比FFCreator更适合您使用。Echartsecharts是一个非常强大的图表组件库，在数据可视化领域非常有名。学过前端的都知道echarts。FFCreator6.0新增FFChart组件，支持大部分echarts.jsdemo，你可以制作炫酷的数据可视化视频。注：为保持版本稳定性，FFCreator目前使用的echarts.js版本固定为v5.1.2。工具是什么你就知道了：FFCreator前置知识：先了解一点前端基础再看看使用说明书~~1。安装FFcreator安装FFCreator及相关依赖，安装简单教程2.将配置代码复制到echart.js官网`在演示页面https://echarts.apache.org/ex...下找到你想要的图表，打开编辑页面，复制其中的配置代码。constoption={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},...系列:[{数据:[120,200,150,80,70,110,130],类型:'bar'}]};3.添加图表组件注意：由于视频和网页显示不同，请重新设置旁边的间距和字体大小等选项以达到最佳效果初始化FFChart并设置选项和主题theme，这里可以参考https://echarts。apache.org/zh...官方文档。constfchart=newFFChart({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=>{constnewData=...;...chart.setOption(newData);},1000);5.立即动画当然你会发现一个问题，就是调用了更新但是动画没有立即做。这是因为update是一个定时间隔函数，不会立即调用钩子函数执行。当然，很多时候用户想要的就是这个效果。如果要立即执行图表动画，请调用updateNowfchart.update(()=>{},1000);fchart.updateNow();过程中遇到任何问题，请在评论区留言，或致电团队githubteamTNTWeb-腾讯新闻前端团队，TNTWeb致力于行业前沿技术的探索与改进团队成员的个人能力。针对前端开发者，我们整理了最新的小程序和web前端技术的优质内容，每周更新?，欢迎star，github地址：https://github.com/tnfe/TNT-每周
