TNTWeb – The full name of Tencent news front end team, partners in the group have practiced and accumulated experience in Web front end, NodeJS development, UI design, mobile APP and other large front end fields.

At present, the team mainly supports the front-end development of Tencent news business. Besides business development, some front-end infrastructure has been accumulated to enable business efficiency improvement and product innovation.

The team advocates open source construction, has a variety of technical masters, the team Github address: github.com/tnfe

Today we introduce FFCreator, project address: FFCreator

The introduction

Data visualization, a picture is worth a thousand words

Whether we are producers or consumers of content, we deal with data every day in the age of data.

The increasing content consumption power of consumers is placing higher and higher demands on content producers, and we are constantly looking for more efficient content types and content expression types. In the era of data, “data visualization”, as an expression type, production type and content type, is increasingly coming into the audience’s vision.

The benefits of data visualization go without saying, as the saying goes: a picture is worth a thousand words.

(In the following “picture”, I look at a lot of words, but when I look at it carefully, I see nothing. After looking at it for a long time, I only see five words –‘ One look is worth a thousand words’. I even have to swear that this is an advertisement.)

(On the following “picture”, there is no text, but you seem to see a lot of words -” I understand the truth, but why are pigeons so big “, even the corners of the mouth unconsciously smile)

When data visualization meets short video

The two seemingly irrational pictures above may not have much to do with data visualization. We can still see that pictures are more expressive than words. So when data visualization meets video?

The time of the train to open, the time of the pony also run.

We have moved from the era of paper media to the mix of text and text, from data visualization to visual video, each change is for more efficient expression, to adapt to consumers with stronger content digestion and absorption capacity, to adapt to the era of high-speed running.

Everyone has different rates of content and data digestion. As content consumers, some people like traditional paper media, which is serious, rigorous, in-depth and attitude; Some people like short videos, which are easy, entertaining and warm.

As content producers, the fragmentation of consumers’ time and the more diversified production mode of short video as content producers have become the current trend of content expression. Content creators need to compress the length of video to carry more content.

Some experts might say that data visualization and video may not be the best match. Each person absorbs data at a different rate; However, the rhythm of short videos is relatively fast and limited, which is not convenient for the audience to digest and understand.

(Xu Fengnian:?? I thank you expert, I watch the drama three times fast, do not underestimate my absorption speed!!

On the one hand is the demand of “high-speed data absorption capacity” consumers, on the other hand is the rich expression of data visualization video. Why don’t we embrace the content genre, the content presentation genre?

Take a look at the following example.

This is fine when we present data as a two-dimensional chart of numbers on the horizontal axis and areas on the vertical axis, but when we want to add a third or more dimension of time, the two-dimensional chart is not appropriate. The biggest advantage of visual video is that it is more intuitive and informative. Especially for multi-dimensional content involving temporal trends, combining video is a good application scenario.

Therefore, we often see many kinds of data visualization videos on WEBSITE B and Tiktok. When we admire the efficient expression of these data visualization videos, I believe many friends are curious about how these videos are made.

FFCreator

After searching Google and Baidu, you still don’t know how to do it, and you still can’t find the right tool. Try this tool that uses Node.js to create data visualization videos.

FFCreator from THE TNTWeb team is a lightweight, flexible short video creation library based on Node.js. All you need to do is add a few pictures or video clips and a piece of background music to quickly create a cool video clip.

You can add music, subtitles, text, virtual hosts, and more. Of course, it is very convenient to make single or batch data visualization videos.

You may find a variety of tools online, but your needs vary depending on the role you play.

FFCreator is not a direct tool for content creators, as you can find on the web. It’s for developers, but it’s super easy to use and can be learned quickly with a bit of front end.

Introduction to the

FFCreator is a lightweight and simple solution that requires few dependencies and a low machine configuration to start working quickly. It is developed based on Node.js and can be easily used by ordinary front-end engineers. And it simulates 90 percent of animate. CSS animation, you can easily turn web page side animation into video.

Open source warehouse

Github.com/tnfe/FFCrea…

The document address

Github.com/tnfe/FFCrea…

FFCreator has some features

  • Based solely onnode.jsDevelopment, very easy to use, and easy to extend and develop.
  • Few dependencies, easy to install, cross-platform, low machine configuration requirements.
  • Video production is extremely fast, a 5-minute video only takes 1-2 minutes.
  • Support nearly 100 scenes cool transition animation effects.
  • Supports images, sounds, video clips, and text.
  • Support subtitle component, which can combine subtitle and voice TTS to synthesize audio news.
  • Support simple (extensible) virtual anchor, you can make your own virtual anchor.
  • containsanimate.css90% animation effect, CSS animation can be converted to video.
  • FFCreatorLiteWith a faster speed, sometimes it isFFCreatorMore suitable for your use.

Echarts

Echarts is a very powerful library of charting components that is well known in the data visualization world and is known to anyone who has studied the front end.

FFCreator6.0newFFChartComponent, and supportecharts.jsMost of thedemo, you can make cool data visualization videos.

Note: In order to maintain the stability of the version, the echarts.js version used by FFCreator is fixed at V5.1.2

The tutorial

The background is clear: data visualization video, the current efficient content expression way, I also want to have!

You know what it is: FFCreator

Front knowledge: throw away the front end basics

Then come to the instructions

1. Install FFcreator

Install FFCreator and related dependencies, install concise tutorial

2. Copy the configuration code

To every. Js official website ` echarts.apache.org/examples/zh demo page… Go to the diagram you want, open the edit page and copy the configuration code.

const option = {
  xAxis: {
    type: 'category'.data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun']},...series: [{data: [120.200.150.80.70.110.130].type: 'bar'}};Copy the code

3. Add a chart component

Note: Because video and Web display is different, please reset the options such as margin and font size to achieve the best results

Initialize FFChart and theme Settings option and theme, here you can refer to echarts.apache.org/zh/api.html official documentation.

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

You can also set the data using the setOption method

fchart.setOption(option);
fchart.addEffect(['rotateIn'.'zoomIn'].1.2.1);
Copy the code

A DEMO source code github.com/tnfe/FFCrea…

4. Dynamic charts

How do I add animations to FFChart? FFChart provides the update method to update data, which is a timed function similar to setInterval. You can pass in an update hook function with an interval as the second argument.

Note: Adjust the values of options such as animationDuration and AnimationUpdate to keep pace with updateTime.

fchart.update(chart= > {
  constnewData = ... ; . chart.setOption(newData); },1000);
Copy the code

5. Animate immediately

Of course, you will also find that the update is called but the animation is not executed immediately. This is because update is a timed interval function and does not call the hook function immediately. Of course, this is often what users want.

If you want to animate the diagram immediately, call updateNow

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

If you have any questions during the process, please leave a comment in the comments section or call the team on Github

team

TNTWeb – Tencent news front end team, TNTWeb is committed to the exploration of cutting-edge technology in the industry and the improvement of team members’ personal ability. For front-end developers to organize the applets and the latest quality content in the field of web front-end technology, weekly update ✨, welcome star, github address: github.com/tnfe/TNT-We…