TNTWeb——全称是腾讯新闻前端团队。群里的小伙伴在Web前端、NodeJS开发、UI设计、手机APP等大前端领域都有实践和积累。目前团队主要支持腾讯新闻各项业务的前端开发。除了业务发展，它还积累了一些前端基础设施，以实现业务效率提升和产品创新。团队倡导开源共建，拥有各类技术人才。团队Github地址：https://github.com/tnfe今天给大家介绍一下FFCreator。本文作者德来文，项目地址：FFCreator（前言）说说当下的太平盛世，互联网领域却可以称得上是乱世。今天我们要说的是短视频领域。短视频已成为越来越流行的媒体传播形式。微视、抖音等APP每天都会产生上千个精彩的短视频。而这些视频也为产品带来了巨大的流量。随后，如何让用户快速产生一个短视频；或者如何利用现有的图片、视频、音乐素材，在产品平台上批量合成大量视频，成为技术难点。今天给大家带来的是一个基于node.js的轻量级灵活的短视频生产库。您只需添加几张图片或视频剪辑和一段背景音乐，即可快速生成炫酷的视频剪辑。github地址：https://github.com/tnfe/FFCreatornpm地址：https://www.npmjs.com/package/ffcreator本文将带领大家从头到尾做一个短视频。生成项目和安装依赖，首先要构建项目，然后执行npminit，回车。mkdirffcreator-example&&cdffcreator-examplenpminit接下来，我们将安装我们今天的包。npminstallffcreatororyarnaddffcreator是最重要的。ffcreator依赖于FFnpeg，因此必须安装FFmpeg。FFCreatorLite依赖于FFmpeg>=0.9或以上。请将FFmpeg设置为全局变量，否则需要使用setFFmpegPath添加FFmpeg本机路径。（Windows用户的ffmpeg很可能不在您的%PATH中，因此您必须设置%FFMPEG_PATH）。关于安装FFmpeg的教程，我只说windows和mac。上面另一个github上有更详细的说明。之所以只说windows和mac，是因为对于前端开发者来说，大部分都是mac，也有部分windows。对于其他开发者，如果想尝试，可以去上面的github查看其他环境的安装方法。Windows：一共四步：下载、解压、设置环境变量、使用。参考文档mac：分为两部分：安装homebrew（如果安装了，忽略它，进入下一步）：/bin/bash-c"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install.sh)》使用homebrew安装ffmpeg：brewinstallffmpeg参考文档至此，项目、环境、依赖都准备好了，我们可以进行下一步了。关于ffcreator的使用是一个节点库，提供了多种构造函数可以使用：//设置背景色scene.setBgColor('#30336b');//设置停留时长scene.setDuration(8.5);//设置过渡动画（类型，时间）scene.setTransition('Fat',1.5);//将屏幕添加到视频创建器实例Creator.addChild(scene);上面是FFNode，下面是所有类型的基类，下面直接看即可。FFText,文本元素consttext=newFFText({text:'Thisisatext',x:250,y:80});//文本颜色text.setColor('#ffffff');//背景颜色文本。setBackgroundColor('#b33771');//动画呈现为fadeIn，动画时长1秒，延时1秒，text.addEffect("fadeIn",1,1);//设置文本水平居中text.alignCenter();//设置样式对象text.setStyle({padding:[4,12,6,12]});//将当前文本节点添加到屏幕scene.addChild(text);FFImage,imageelement//创建一个图片元素，图片路径为../images/demo.pngconstimg=newFFImage({path:'../images/demo.png'});//设置位置img.setXY(250,340);//设置缩放比例img.setScale(2);//设置旋转img.setRotate(45);//设置透明度img.setOpacity(0.3);//设置宽度和高度img.setWH(100,200);//设置动画效果//设置动画效果为slideInDown，动画时长1.2秒，延迟时间0img.addEffect("slideInDown",1.2,0);//将当前图片节点添加到屏幕scene.addChild(img);FFVideo,Videoelement//创建一个视频元素，视频路径为../videos/demo.mp4，位置为屏幕100和150//宽度为500，高度为是350.constvideo=newFFVideo({path:videopath,x:100,y:150,宽度:500,高度:350});设置是否有音乐video.setAudio(true);//设置是否循环video.setLoop(true);//截取播放时长，设置视频播放时间开始时间和结束时间video.setTimes("00:00:43","00:00:50");//单独设置视频播放的开始时间video.setStartTime("00:00:43"),//单独设置视频播放的结束时间video.setEndTime("00:00:50"),//有video还有很多其他的方法...//将当前video元素添加到屏幕scene.addChild(video);FFAlbum,AlbumElement//新建一个album元素constalbum=newFFAlbum({list:[img1,img2,img3,img4],//相册图片集合x:250,y:300,width:500,height:300,});//设置相册切换动画album.setTransition('zoomIn');//设置单张时长album.setDuration(2.5);//设置单个动画的时长album.setTransTime(1.5);scene.addChild(album);//添加当前相册元素添加到屏幕scene.addChild(video);FFVtuber,虚拟锚图constvtuber=newFFVtuber({x:100,y:400});//设置动画时间周期vtuber.setPeriod([[0,3],[0,3]]);//路径这里设置baby/[d].png和baby/%d.png可以是constvpath=path.join(__dirname,"./avator/baby/[d].png");//来自1-7.pngvtuber.setPath(vpath,1,7);//播放速度vtuber.setSpeed(6);creator.addVtuber(vtuber);FFSubtitle,subtitleelementconstcontent='在这里和电脑一起工作很酷，他们很听话，说什么就做什么...';constsubtitle=newFFSubtitle({text:content,comma:true,//是否以逗号分隔backgroundColor:'#00219C',//背景颜色color:'#fff',//文字颜色fontSize:24//字体size});//设置文字，也可以把它放在confsubtitle.setText(content);//缓存帧subtitle.frameBuffer=24;//设置字幕总时长subtitle.setDuration(12);scene.addChild(subtitle);//设置语音配音-ttssubtitle.setSpeech(dub);FFTween，除了上面的梯度类型，还有实例和操作：FFCreator,//创建实例constcreator=newFFCreator({cacheDir,//缓存目录outputDir,//输出目录output,//输出文件名称（在FFCreatorCenter中可选）width:500,//视频宽度height:680,//视频高度audioLoop:true,//音乐循环fps:24,//fpsthreads:4,//多线程（假）并行渲染调试:false,//启用测试模式defaultOutputOptions:null,//ffmpeg输出选项配置});//将屏幕添加到创建者实例creator.addChild(scene);//Creator启动函数启动。creator.start();FFCreatorCenter,//核心运行时库，通过addTask运行//这样可以启动多个任务，当然FFCreatorCenter.addTask(createFFTask)也可以不使用FFCreatorCenter直接运行createFFTask();有一个演示图片动画：
