前言作者利用业余时间开发了一个gif动画生成平台。具体的开发背景，我也会在上一篇文章中教大家如何生成抖音风格的动画。图片的gif制作平台已经介绍过了。我们今天将继续实施该平台。gif动画平台的实现方式对比将完全通过前端的方式来实现，所以在接下来的内容中你会发现很多有趣的前端插件。接下来看一下要实现的主要功能点：纯前端实现图片上传和预览。基于react-beautiful-dnd，元素可以自由拖拽排序。使用javascript实现生成uuid的功能。使用file-saver实现前端下载文件。使用gif.js根据图片生成gif动画。一种控制gif动画播放速度的方法。文字还是按照作者一贯的风格。在实现功能之前，先来看看实现后的预览效果：从效果图中可以看出，我们只需要上传图片序列就可以动态生成gif动画，右键保存gif文件。我们还可以控制动画的播放速度和排列顺序，这样我们可以更灵活地配置动画。如果想亲身体验，可以使用以下方法：在线地址：http://io.nainor.com/qt。1.基本页面搭建在开始之前，我们需要梳理一下基本页面结构。作者将其分为以下结构：从上图我们可以看出分为3个区域。我们可以使用任何我们熟悉的第三方组件来实现。这里是作者使用antd开发。技术方案图如下：以上是笔者分析的大致目标，也是笔者常用的开发图。面向目标对于提高开发效率还是很有帮助的。作者建议你也可以实现更复杂的。在业务需要之前，先想好方案，再敲代码。2.实现图片上传预览功能。第一步的界面我想大家都能实现。下面我们一步步实现这个功能。我们先来实现图片上传。预览。由于我们这里不依赖服务器，完全通过前端的方式实现图片预览，所以需要用到FileReader对象。FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）内容，使用File或Blob对象指定要读取的文件或数据。File对象可以是用户在input元素上选择文件后返回的FileList对象，也可以是拖拽操作生成的DataTransfer对象，也可以是HTMLCanvasElement执行mozGetAsFile()方法后返回的结果。接下来我们看看如何使用antd的Upload组件和FileReader来实现图片预览。具体代码如下：constuploadprops=useMemo(()=>({name:'file',multiple:true,listType:"picture-card",onPreview:()=>{},showUploadList:false,beforeUpload(file,fileList){//解析并提取excel数据letreader=newFileReader();reader.onload=function(e){leturl=e.target.result;setImageList(prev[...prev,{id:uuid(6,16),url}])};reader.readAsDataURL(file);}}),[]);uploadprops是Upload组件需要的属性配置，通过代码我们可以知道我们在beforeUpload阶段截取了图片，通过readAsDataURL
