动画编辑器----前端小白的学习之路

        大家好，我是虎小七，目前是一名前端小白，之前是在外贸行业工作，因为在工作中，机缘巧合接触到前端方面，所以对这前端产生了兴趣，并下定决心开始学习。

  

       转眼间，学习前端也有段时间了，在学习中也开发了几个项目，其中最有挑战的是开发动画编辑器。

  

      因为随着短视频的火爆，越来越多的人对短视频内容生产工具有着巨大的需求。想到要动手开发一款短视频内容编辑器，满足日益增长的内容生产需求。实现可以编辑10秒钟的动画视频，并且编辑好的动画视频可以导出，上传到各大短视频平台。

      在这个开发过程中通过不断尝试和学习，成功解决了许多问题。让我们一起来回顾我在开发过程中的探索和成长吧！

 第一话：初试身手

刚开始的我目标很简单，实现登录和注册账号，页面跳转，元素可以在编辑区域进行拖拽，点击编辑区域可以为元素添加轨迹锚点以及生成辅助线，看着构想的功能日益实现，满满的成就感。

第二话；打破重组

      然而，慢慢的面对过程的开发局限性逐渐显现出来，在实现元素按照既定的轨迹移动时失败了。思索再三，选择重新构思代码结构，选择面向对象的开发方法。

     梳理了我的业务之后，开始使用对象思维去实现功能，实现了10秒钟的动画轨迹播放，可以修改轨迹段、删除轨迹段、增加锚点、添加了时间轴、以及拖动时间轴元素也会跟随移动。

第三话：再次出发

     在一切发展都很顺利的时候，发现现有的代码只适用于单个元素，无法对多个元素操作的需求，有些沮丧，止步不前，对着项目捶胸顿足，感叹自己的无力，唉，这个项目有无穷无尽的挑战在等着我。

      在辗转反侧之际，我想不破不立，再次重新把业务点梳理，数据的流向、有多少对象类等梳理明白。     

     因为学习了VUE框架，这次使用VUE框架。为了完善动画编辑器添加了更换背景的功能，可以增加多个元素在编辑区域，可以对每个元素进行更改大小、旋转、调节透明度、以及添加运动轨迹。也在之前的基础上增加了可以添加音乐。

 

        最令人兴奋的是，我甚至可以把制作的10秒的内容生成视频，而且可以下载。这个项目虽然不是很完美，但是我也终于在磕磕绊绊中完成了。

     关于这篇文章讲述的技术点，我会在我的下一篇文章中详细讲述，大家有兴趣的话，可以关注一下。

  结语：

         我的开发的项目中比较有趣的是使用VUE开发的音乐播放器，借用了qq音乐的API，axios跨域请求音乐链接，来实现音乐的播放，并使用indexDB数据库保存音乐，实现断网可以播放音乐。

       回顾这段写项目之路，通过使用面对过程、面向对象的开发方法、使用VUE框架开发的尝试和学习，我在这之中不断解决问题，修改bug，这个过程让我对前端开发的技术有了更深入的了解和认识。

       希望这篇有趣味的博文能够给你带来一些灵感和快乐！让我们一起努力，不断学习和创新，成为更优秀的前端工程师！加油！

本人正在求职中，如果有合适的工作机会，可以找我呀~

联系方式：qq--1543279615