大家好，我是虎小七，目前是一名前端小白，之前是在外貿(mào)行業(yè)工作，在工作中，機(jī)緣巧合接觸到前端方面，對(duì)這方面產(chǎn)生了興趣，并下定決心開始學(xué)習(xí)。

轉(zhuǎn)眼間，學(xué)習(xí)前端也有段時(shí)間了，在學(xué)習(xí)中也開發(fā)了幾個(gè)項(xiàng)目，其中最有挑戰(zhàn)的是開發(fā)動(dòng)畫編輯器。

因?yàn)殡S著短視頻的火爆，越來(lái)越多的人對(duì)短視頻內(nèi)容生產(chǎn)工具有著巨大的需求。想到要?jiǎng)邮珠_發(fā)一款短視頻內(nèi)容編輯器，滿足日益增長(zhǎng)的內(nèi)容生產(chǎn)需求。實(shí)現(xiàn)可以編輯10秒鐘的動(dòng)畫視頻，并且編輯好的動(dòng)畫視頻可以導(dǎo)出，上傳到各大短視頻平臺(tái)。

在這個(gè)開發(fā)過程中通過不斷嘗試和學(xué)習(xí)，成功解決了許多問題。讓我們一起來(lái)回顧我在開發(fā)過程中的探索和成長(zhǎng)吧！

???第一話：初試身手

剛開始的我目標(biāo)很簡(jiǎn)單，實(shí)現(xiàn)登錄和注冊(cè)賬號(hào)，頁(yè)面跳轉(zhuǎn)，元素可以在編輯區(qū)域進(jìn)行拖拽，點(diǎn)擊編輯區(qū)域可以為元素添加軌跡錨點(diǎn)以及生成輔助線，看著構(gòu)想的功能日益實(shí)現(xiàn)，滿滿的成就感。

第二話；打破重組

??????然而，慢慢的面對(duì)過程的開發(fā)局限性逐漸顯現(xiàn)出來(lái)，在實(shí)現(xiàn)元素按照既定的軌跡移動(dòng)時(shí)失敗了。思索再三，選擇重新構(gòu)思代碼結(jié)構(gòu)，選擇面向?qū)ο蟮拈_發(fā)方法。

?????梳理了我的業(yè)務(wù)之后，開始使用對(duì)象思維去實(shí)現(xiàn)功能，實(shí)現(xiàn)了10秒鐘的動(dòng)畫軌跡播放，可以修改軌跡段、刪除軌跡段、增加錨點(diǎn)、添加了時(shí)間軸、以及拖動(dòng)時(shí)間軸元素也會(huì)跟隨移動(dòng)。

第三話：再次重新出發(fā)

?????在一切發(fā)展都很順利的時(shí)候，發(fā)現(xiàn)現(xiàn)有的代碼只適用于單個(gè)元素，無(wú)法對(duì)多個(gè)元素操作的需求，有些沮喪，止步不前，對(duì)著項(xiàng)目捶胸頓足，感嘆自己的無(wú)力，唉，這個(gè)項(xiàng)目有無(wú)窮無(wú)盡的挑戰(zhàn)在等著我。

??????在輾轉(zhuǎn)反側(cè)之際，我想不破不立，再次重新把業(yè)務(wù)點(diǎn)梳理，數(shù)據(jù)的流向、有多少對(duì)象類等梳理明白。 ????

?????因?yàn)閷W(xué)習(xí)了VUE框架，這次使用VUE框架來(lái)開發(fā)。這次我給動(dòng)畫編輯器添加了更換背景的功能，可以增加多個(gè)元素在編輯區(qū)域，可以對(duì)每個(gè)元素進(jìn)行更改大小、旋轉(zhuǎn)、調(diào)節(jié)透明度、以及添加運(yùn)動(dòng)軌跡。也在之前的基礎(chǔ)上增加了可以添加音樂。

最令人興奮的是，我甚至可以把制作的10秒的內(nèi)容生成視頻，而且可以下載。這個(gè)項(xiàng)目雖然不是很完美，但是我也終于在磕磕絆絆中完成了。

?????關(guān)于這篇文章講述的技術(shù)點(diǎn)，我會(huì)在我的下一篇文章中詳細(xì)講述，有興趣的可以關(guān)注一下。

??結(jié)語(yǔ)：

我的開發(fā)的項(xiàng)目中比較有趣的是使用VUE開發(fā)的音樂播放器，借用了qq音樂的API來(lái)實(shí)現(xiàn)播放音樂，并使用index DB數(shù)據(jù)庫(kù)保存音樂鏈接，實(shí)現(xiàn)斷網(wǎng)可以播放。

??回顧這段寫項(xiàng)目之路，通過使用面對(duì)過程、面向?qū)ο蟮拈_發(fā)方法、使用VUE框架開發(fā)的嘗試和學(xué)習(xí)，我在這之中不斷解決問題，修改bug，終于是實(shí)現(xiàn)了動(dòng)畫編輯器的功能的擴(kuò)展和升級(jí)。這個(gè)過程讓我對(duì)前端開發(fā)的技術(shù)有了更深入的了解和認(rèn)識(shí)。

希望這篇富有趣味的博文能夠給你帶來(lái)一些靈感和快樂！讓我們一起努力，不斷學(xué)習(xí)和創(chuàng)新，成為更優(yōu)秀的前端工程師！加油！