可視化拖拽組件庫一些技術(shù)要點(diǎn)原理分析

1、可視化拖拽組件庫一些技術(shù)要點(diǎn)原理分 析譚光志發(fā)布于2020-12-21 本文主要對(duì)以下技術(shù)要點(diǎn)進(jìn)行分析:編輯器自定義組件拖拽刪除組件、調(diào)整圖層層級(jí)放大縮小撤消、重做組件屬性設(shè)置吸附預(yù)覽、保存代碼.綁定事件.綁定動(dòng)畫.導(dǎo)入PSD.手機(jī)模式為了讓本文更加容易理解，我將以上技術(shù)要點(diǎn)結(jié)合在一起寫了一個(gè)可視化拖拽組 件庫DEMO： github工程地址在線預(yù)覽 建議結(jié)合源碼一起閱讀，效果更好（這個(gè)DEMO使用的是Vue技術(shù)棧）。1.編輯器先來看一下頁面的整體結(jié)構(gòu)。MoixsckOMe事件，每次鼠標(biāo)移動(dòng)時(shí)，都用當(dāng)前最新的xy坐標(biāo)減去最開始的xy坐 標(biāo)，從而計(jì)算出移動(dòng)距離，再改變組件位置。koasc？事件，

2、鼠標(biāo)抬起時(shí)結(jié)束移動(dòng)。e.stopPgpagatioM)tli$4tore.coivit(,setCb(rCokvpoMt,J co3?。八e八t： tkis.e/cnAcrvtj z伉dex:麗s.z伉dex )。八貪 pos = this.defabdtStgle )const starts = e.ctietYcost startX = e.clicntX/如果直接修改屬性，值的類型會(huì)變?yōu)樽址?，所以要轉(zhuǎn)為數(shù)值型coist startTop = NjmbeKpos.top)，。八貪 start Left =叭 pos./e儲(chǔ)co八st iove - (HAO/eEMC八t) = c。八st

3、 currX = ioveEveit.clieiritXcovst currY = ioveEveit.clieitYpos.top = currY - st4rt丫 + startToppos.left = currX - starts + start Left/修改當(dāng)前組件樣式this.$stoHC.c。mitCsetShapcStgleL pos)CO八St up = 0 = docuiMeit.reioveEvetUsteieirCioiAseiove1 j wove)dociAeit.reioveEvetLiteeirvxoiAseiApj ？)docuaeit.addEveitUs

4、teerCouseixove, m。docLaet.addEveitUsteierCoiAseiAp1, up)撤消 重做插入圖片預(yù)寬 保存 清空畫布畫布大小 1200* 740之文字 按鈕四圖片按鈕刪除組件、調(diào)整圖層層級(jí)改變圖層層級(jí)由于拖拽組件到畫布中是有先后順序的，所以可以按照數(shù)據(jù)順序來分配圖層層級(jí)。例如畫布新增了五個(gè)組件abcde,那它們?cè)诋嫴紨?shù)據(jù)中的順序?yàn)閳D層層級(jí)和索引對(duì)應(yīng)，即它們的z-ihdex屬性值是01234 （后來居上）。用代碼表示如下：div for=(item index) in compo八entData :zl八4ex=icdexataZ = teixp同理，置頂置底也

5、是一樣，例如我要將a組件置頂，只需將a和最后一個(gè)組件 調(diào)換順序即可：const teip = coipoinetData0coipoieitData0 = copoieitDatacoipoMtUata.leyglt - 1cokvpoMtDatacokvpoietData.lekght - 1J =按鈕按鈕按鈕PEARLryuxxiJALGOL. Assembly刪除組件刪除組件非常簡(jiǎn)單，一行代碼搞定：coipoMtPatasplice(idex,1)。按鈕按鈕i Assemblyoy!Gi PEARL5.放大縮小細(xì)心的網(wǎng)友可能會(huì)發(fā)現(xiàn)，點(diǎn)擊畫布上的組件時(shí)，組件上會(huì)出現(xiàn)8個(gè)小圓點(diǎn)。這8 個(gè)小圓

6、點(diǎn)就是用來放大縮小用的。實(shí)現(xiàn)原理如下：.在每個(gè)組件外面包一層Shape組件，Shape組件里包含8個(gè)小圓點(diǎn)和一個(gè) 勾。力 插槽，用于放置組件。，一一頁面組件歹U表展示一一xSkapc v-fo片(itCM, index)心 covpoieicom?。八 c 八方c/SS = COM?。八 c 八 t”:is =CM.conA?。八 c 八 t”:stgle=geCoMpo 八 entStg 憶(iteM.stg(c)”:propVabe =pVabc”/Sk叩e組件內(nèi)部結(jié)構(gòu)：.點(diǎn)擊組件時(shí)，將8個(gè)小圓點(diǎn)顯示出來。起作用的是這行代碼:active=itCM = curC。叫9。八八

7、廿。.計(jì)算每個(gè)小圓點(diǎn)的位置。先來看一下計(jì)算小圓點(diǎn)位置的代碼：coiast poMtList =優(yōu)什中 J伶 Jrt，他匕的getPoiitStyle(poiit) const width, height - this.defaodtStg憶const k“sT = /t/est(poin。co八st= /b/.test(poict)co八st ksL 二 /l/est(poMt)co八st hasR = /ir/est(poi八t)let 八ewLeft - Olet iewTop = O/四個(gè)角的點(diǎn)if (point.lcngth = 2) MwLeft = hasL? O : widtht

8、aewTop = hasT? O : height eke (/上下兩點(diǎn)的點(diǎn)，寬度居中if (kasT | hasB) MwLeft = width. / 2newTop = hasTP O : height/左右兩邊的點(diǎn)，高度居中if (hsL H kasR) MwLeft = kasL? O : widthMwTop = Matkfloor(keight / 2)covxst style = kvxargiiLeft: knsR?4Px3Pxi八Top: J：3Pxi(次:、*八cwLcPtypx、,top:%八cwToppx、jcursor: ?oi八七平位().kc/cksc().m4

9、P(m = this.dikcctio八Keg時(shí)).jok() + 1-resize)return style)計(jì)算小圓點(diǎn)的位置需要獲取一些信息: 組件的高度keight、寬度width注意，小圓點(diǎn)也是絕對(duì)定位的，相對(duì)于Sk的c組件。所以有四個(gè)小圓點(diǎn)的位置很 好確定：.左上角的小圓點(diǎn)，坐標(biāo)怙任stop:。.右上角的小圓點(diǎn)，坐標(biāo)(eft： widt九top：。.左下角的小圓點(diǎn)，坐標(biāo)left： O, top: height.右下角的小圓點(diǎn)，坐標(biāo)left: width, top: heightBft另外的四個(gè)小圓點(diǎn)需要通過計(jì)算間接算出來。例如左邊中間的小圓點(diǎn)，計(jì)算公式 為left: Oj top：

10、height / 2,其他小圓點(diǎn)同理。4.點(diǎn)擊小點(diǎn)時(shí)，可以進(jìn)行放大縮小操作。k八山eMoqseDownOnPoMKpoint) covst dow八Emcht = windoweventdowiEveitstopPropagatioiQdowEveit.pirevetDefaiAltQ)const pos = this.dcfabdtStgle co八st height = NixMbeKpos.height)coist width = NiAMber(pos.width)covst top = 14abe心。s.top)coist left = N(AMbcpos.left)covst st

11、artX = dow八Eve八t.clie八tXcovst startY = dow八Eve八t.cc八2Y洞42布 布大小 1200740工具欄2文字日?qǐng)D片wn6WU組件列表屬性區(qū)這一節(jié)要講的編輯器其實(shí)就是中間的畫布。它的作用是：當(dāng)從左邊組件列表拖拽 出一個(gè)組件放到畫布中時(shí)，畫布要把這個(gè)組件渲染出來。這個(gè)編輯器的實(shí)現(xiàn)思路是：.用一個(gè)數(shù)組coipoMitData維護(hù)編輯器中的數(shù)據(jù)。.把組件拖拽到畫布中時(shí)，使用？”sk()方法將新的組件數(shù)據(jù)添加到coMRmcntDdhu.編輯器使用一f。匕指令遍歷c。叼9。八。八將每個(gè)組件逐個(gè)渲染到畫布(也可以使用JSX語法結(jié)合匕八方法代替)。編輯器渲染的核心代

12、碼如下所示：com?。八ent/是否需要保存快照let ieedSave = falsecoinst iove - (3omcEmc八t) = teedSave = truec。八貪 currX = movcEmc八八tXconst currY = movcEmcht.ce八七Ycoist WisY = currY - startYcovst disX = currX - startXconst kasT = /t/.test(point)const = /b/est(point)const k4sL = /l/est(poMt)coiast hasR = /r7.近況point)c。八st

13、八ewHeight = height + (ksT? isY : kasB? disY :。)cost 八ewWidtk = width + (kxasL? -disX : kasR? disX :。)pos.height =八ewHeigkt O?八ewHeight : Opos.width =八cwWidtk O?八cwWidtk : OposJeft = left + (kasL? disX : O)pos.top = top + (k“sT? disY : O)this.$stoYc mitCsctShapcStg(eL pos)co八優(yōu) up = 0 = dociAeit.reove

14、EveitL-isteer(,iouseiove, wove)docMe八t.vcHAO/eE/e八tListe八erCuAoase”？，？)ieedSave & tis.tore.coiitCirecordSapshot1)docuet.addEveintUsteirierCOLiSeove1, Move)doc“Me八t.qddEvchtListc八。匕(作。60？1p)它的原理是這樣的：.點(diǎn)擊小圓點(diǎn)時(shí)，記錄點(diǎn)擊的坐標(biāo)xyo.假設(shè)我們現(xiàn)在向下拖動(dòng)，那么y坐標(biāo)就會(huì)增大。.用新的y坐標(biāo)減去原來的y坐標(biāo)，就可以知道在縱軸方向的移動(dòng)距離是多少。.最后再將移動(dòng)距離加上原來組件的高度，就可以得出新的組

15、件高度。.如果是正數(shù)，說明是往下拉，組件的高度在增加。如果是負(fù)數(shù)，說明是往上拉，組 件的高度在減少。ALGOL. AssemblyPEARLSc的-Python j.撤消、重做撤銷重做的實(shí)現(xiàn)原理其實(shí)挺簡(jiǎn)單的，先看一下代碼：s八叩skotD比& 口/編輯器快照數(shù)據(jù)s八叩sk。七以dcx: T,/快照索引lAido（state） if （states八psko?八dcx =。）states n apsh。乜八 dcx -store.coiiitCsetCoipoieiWata1 jdccpCopg（statc.s 八 apshotDat 磯 states 八 apshot八 de 燈）redo圮e

16、) if (stateshapsk。十八dex ata(state, covipo八。= 口)(Vuesettate, ,coipoiaeiatPata,J coipoieitDatd)Irecords八叩sot(s標(biāo)&) /添加新的快照statesapshotDatastatesapotlidex二 4eepCopg(state poAtData)/在，八W。過程中，添加新的快照時(shí)，要將它后面的快照清理掉if (states八叩shot伉dex 用一個(gè)數(shù)組來保存編輯器的快照數(shù)據(jù)。保存快照就是不停地執(zhí)行叩sM)操作，將當(dāng)前的編輯器數(shù)據(jù)推入小叩6。加4僅數(shù)組，并增加快照索引力印5元以dex。目前

17、 以下幾個(gè)動(dòng)作會(huì)觸發(fā)保存快照操作：新增組件刪除組件改變圖層層級(jí)拖動(dòng)組件結(jié)束時(shí) 撤銷假設(shè)現(xiàn)在s八即skotData保存了 4個(gè)快照。即0仇c,可,對(duì)應(yīng)的快照索引為3。如果昌時(shí)進(jìn)行了撤銷操作，我們需要將快照索引減1,然后將對(duì)應(yīng)的快照數(shù)據(jù)賦 值給畫布。例如當(dāng)前畫布數(shù)據(jù)是d,進(jìn)行撤銷后，索引-1,現(xiàn)在畫布的數(shù)據(jù)是Co重做明白了撤銷，那重做就很好理解了，就是將快照索引加1,然后將對(duì)應(yīng)的快照數(shù) 據(jù)賦值給畫布。不過還有一點(diǎn)要注意，就是在撤銷操作中進(jìn)行了新的操作，要怎么辦呢？有兩種 解決方案：.新操作替換當(dāng)前快照索引后面所有的數(shù)據(jù)。還是用剛才的數(shù)據(jù)囿兒心可舉例，假 設(shè)現(xiàn)在進(jìn)行了兩次撤銷操作，快照索引變?yōu)?,對(duì)

18、應(yīng)的快照數(shù)據(jù)為b,如果這時(shí)進(jìn) 行了新的操作，對(duì)應(yīng)的快照數(shù)據(jù)為e。那e會(huì)把cd頂?shù)?，現(xiàn)在的快照數(shù)據(jù)為卬乩eo.不頂?shù)魯?shù)據(jù)，在原來的快照中新增一條記錄。用剛才的例子舉例，e不會(huì)把cd頂 掉，而是在cd之前插入，即快照數(shù)據(jù)變?yōu)樘幘判膅四。我采用的是第一種方案。撤消 重做 插入圖片 預(yù)覽 保存清空畫布畫布大小 1200* 7402文字按鈕四圖片文字文字按鈕7.吸附什么是吸附？就是在拖拽組件時(shí)，如果它和另一個(gè)組件的距離比擬接近，就會(huì)自 動(dòng)吸附在一起。按鈕按鈕吸附的代碼大概在300行左右，建議自己翻開源碼文件看（文件路徑：srcWco岬onentsEditorMaKkLi八。這里不貼代碼了，主要說說原理是

19、怎么實(shí)現(xiàn)的。標(biāo)線在頁面上創(chuàng)立6條線，分別是三橫三豎。這6條線的作用是對(duì)齊，它們什么時(shí) 候會(huì)出現(xiàn)呢？.上下方向的兩個(gè)組件左邊、中間、右邊對(duì)齊時(shí)會(huì)出現(xiàn)豎線.左右方向的兩個(gè)組件上邊、中間、下邊對(duì)齊時(shí)會(huì)出現(xiàn)橫線具體的計(jì)算公式主要是根據(jù)每個(gè)組件的xy坐標(biāo)和寬度高度進(jìn)行計(jì)算的。例如要 判斷ab兩個(gè)組件的左邊是否對(duì)齊，那么要知道它們每個(gè)組件的x坐標(biāo)；如果要 知道它們右邊是否對(duì)齊，除了要知道x坐標(biāo)，還要知道它們各自的寬度。/左對(duì)齊的條件a.x = b.x/右對(duì)齊的條件a.x + a.width - b.x + b.width在對(duì)齊的時(shí)候，顯示標(biāo)線。另外還要判斷ab兩個(gè)組件是否足夠近。如果足夠近，就吸附在一起。

20、是否足 夠近要靠一個(gè)變量來判斷：力仟；3,/相距dff像素將自動(dòng)吸附小于等于a肝像素那么自動(dòng)吸附。吸附吸附效果是怎么實(shí)現(xiàn)的呢？假設(shè)現(xiàn)在有ab組件，a組件坐標(biāo)xy都是0,寬高都是100o現(xiàn)在假設(shè)a組 件不動(dòng)，我們正在拖拽b組件。當(dāng)把b組件拖到坐標(biāo)為工”時(shí)，由于工先陽，所以可以判定它們已經(jīng)接近得足夠近。這時(shí)需要手動(dòng)將b組件 的y坐標(biāo)值設(shè)為100,這樣就將ab組件吸附在一起了。按鈕按鈕優(yōu)化在拖拽時(shí)如果6條標(biāo)線都顯示出來會(huì)不太美觀。所以我們可以做一下優(yōu)化，在 縱橫方向上最多只同時(shí)顯示一條線。實(shí)現(xiàn)原理如下：. a組件在左邊不動(dòng)，我們拖著b組件往a組件靠近。.這時(shí)它們最先對(duì)齊的是a的右邊和b的左邊，所以只

21、需要一條線就夠了。.如果ab組件己經(jīng)靠近，并且b組件繼續(xù)往左邊移動(dòng)，這時(shí)就要判斷它們倆的中間 是否對(duì)齊。. b組件繼續(xù)拖動(dòng)，這時(shí)需要判斷a組件的左邊和b組件的右邊是否對(duì)齊，也是只 需要一條線。可以發(fā)現(xiàn)，關(guān)鍵的地方是我們要知道兩個(gè)組件的方向。即ab兩個(gè)組件靠近，我 們要知道到底b是在a的左邊還是右邊。這一點(diǎn)可以通過鼠標(biāo)移動(dòng)事件來判斷，之前在講解拖拽的時(shí)候說過，Mousedown事件觸發(fā)時(shí)會(huì)記錄起點(diǎn)坐標(biāo)。所以每次觸發(fā)mouscvc事件時(shí)，用當(dāng)前坐標(biāo)減去原來的坐標(biāo)，就可以判斷組件方向。例如X方向上，如果尻x-a.x的差值為正，說明是b在a右邊，否那么為左邊。/觸發(fā)元素移動(dòng)事件，用于顯示標(biāo)線、吸附功能

22、/后面兩個(gè)參數(shù)代表鼠標(biāo)移動(dòng)方向/c“Y-startYO true表示向下移動(dòng)false表示向上移動(dòng)/ currX - startX O true表示向右移動(dòng)False表示向左移動(dòng)eve八thisfeL currY - startY O, currX - startX O).組件屬性設(shè)置每個(gè)組件都有一些通用屬性和獨(dú)有的屬性，我們需要提供一個(gè)能顯示和修改屬性 的地方。/每個(gè)組件數(shù)據(jù)大概是這樣coipoieit: V-text /組件名稱，需要提前注冊(cè)到Vuelabel:文字左側(cè)組件列表中顯示的名字pKopVabe:文字，/組件所使用的值。八：3T.e。八-edit，/左側(cè)組件列表中顯示的名字aii

23、iatiois: 口/ / 動(dòng)畫列表以母仇/事件列表tyle: /組件樣式width: 2。1height: 33?fcmtS ize：f。八tWeight: 500,li八eHeight: letterSpactig: O,tcxtAlign: color:in copoieitData11:is =辿3.，。叫。八c 八土:stg 憶=”item.stg 憶“:pYopValuc=itCM.propValbic”/每個(gè)組件數(shù)據(jù)大概是這樣：coMpoMit: V-text /組件名稱，需要提前注冊(cè)到Vue（她e文字一/左側(cè)組件列表中顯示的名字propValue:，文字，組件所使用的值。八：3

24、-。八-edit, /左側(cè)組件列表中顯示的名字aiiiatiois: 口/ / 動(dòng)畫列表events： & /事件列表style： /組件樣式width 2-00height: 33?f。八 tSize:fontWcight: 500,lineHcight: letterSpaciig: O,textAligh： 屬性動(dòng)畫事件寬100按鈕高34邊框?qū)挾冗吙蝓晟吙虬霃阶煮w大小14字體粗細(xì)500行高字間距I 0對(duì)齊方式 甑e id我定義了一個(gè)Attdist組件，用于顯示每個(gè)組件的屬性。div cSss=attEist“v-foY=(kcg, MHex) MstgleKegs ：keg=MHcx

25、：Sbc(=Mapkcg-color-picker -eke-if= keg = color111/-kvodel=,Cb(rCokvpoMitstylekey,d-coloir-picker v-eke-if=keg = ,backgroiAiadColorn,v-kodc/二憶rCoKAp。八 e 八 t.s 到 ekeg”el-select v-eke-if=keg =+cxtAlig屋M-xodc/二憶 rConApo 八c 八t.s切ekeg3-optionv-foUitCM i八 options”:keg =iteM.vabe”:labcl=itcM.labd”:value=l,i

26、tei./alue,1x/el-option c(一-itCM”(-input typeicxtarea v-iodelcurCpValiAC11 /com?。八entclass- coipoyeit:is 二 itehzv ?。八。八廿:stg 加=gctCoMpo 八 eAtStgle(itCM.stgle)”:pHopVa(L(c= itCM.pHopVa(ue/ Shape經(jīng)過剛才的介紹，我們知道Ska2組件具備了拖拽、放大縮小的功能?，F(xiàn)在只需 要將外平c組件去掉，外面改成套一個(gè)普通的DIV就可以了(其實(shí)不用這個(gè)DIV 也行，但為了綁定事件這個(gè)功能，所以需要加

27、上)。V一頁面組件列表展示一保存代碼的功能也特別簡(jiǎn)單，只需要保存畫布上的數(shù)據(jù)COMP。八以加4口即可。保存有兩種選擇：.保存到服務(wù)器.本地保存在DEMO上我使用的保存在本地。撤消 室做插入圖片預(yù)覽 保存清空畫布畫布大小1200* 7402文字 按鈕四圖片10.綁定事件每個(gè)組件有一個(gè)Chts對(duì)象，用于存儲(chǔ)綁定的事件。目前我只定義了兩個(gè)事件:alert事件redirect 事件/編輯器自定義事件const events = rediirect(iAirl) if (urf) (wi八dow./oc 岫。八.kref = ur/)&a/ert(3sg) if Osg) Hcrt(n/sg)const

28、 Mxi八s = hac協(xié)。ds: events,co八st eveitUst -keg: WediircctL，跳轉(zhuǎn)事件Ieveint: eveirits.irediirect,paraM： u,bkeg:匕（eirtLlabel： falert 事件，eveirit： events.alert,paraww 11,export kixigevents,eveitUst, 不過不能在編輯的時(shí)候觸發(fā)，可以在預(yù)覽的時(shí)候觸發(fā)。撤消 里做插入圖片預(yù)覽 保存清空畫布畫布大小 1200* 740R文字按鈕四圖片按鈕添加事件通過一 f指令將事件列表渲染出來:3 -tabs v-iModel-ueveitA

29、ctiveXaienel-hiAttoi style-11 iairgii-top: 2Opx c(ick=addEveMitCM.keg)iten/vp匕4&) 確定 /c(一 butt。八選中事件時(shí)將事件添加到組件的events對(duì)象。觸發(fā)事件預(yù)覽或真正渲染頁面時(shí)，也需要在每個(gè)組件外面套一層DIV,這樣就可以在DIV 上綁定一個(gè)點(diǎn)擊事件，點(diǎn)擊時(shí)觸發(fā)我們剛才添加的事件。法md/cC/ick。coist events = this.co八fig.eventscolor: 11I)在遍歷cooWata組件數(shù)據(jù)時(shí)，主要靠is屬性來識(shí)別出真正要渲染的是哪個(gè) 組件。例如要渲染的組件數(shù)據(jù)是 cokvpoM

30、it: v-text ,那么 cokvpoMt :is=itekv.cokvpoMt/會(huì)被轉(zhuǎn)換為-text/。當(dāng)然，你這個(gè)組件也要提前注冊(cè)到Vue中。如果你想了解更多is屬性的資料，請(qǐng)查看官方文檔。2.自定義組件原那么上使用第三方組件也是可以的，但建議你最好封裝一下。不管是第三方組件 還是自定義組件，每個(gè)組件所需的屬性可能都不一樣，所以每個(gè)組件數(shù)據(jù)可以暴露出一個(gè)屬性propValue用于傳遞值。例如a組件只需要一個(gè)屬性，你的“opVa/ue可以這樣寫：propValue: aaao如果需要多個(gè)屬性，“叩Va/uc那么可以是一個(gè)對(duì)象：propValue: a： 1,b: text1在這個(gè)DEMO

31、組件庫中我定義了三個(gè)組件。圖片組件Picture：/循環(huán)觸發(fā)綁定的事件。可ect.kcgs/。八ts).foKEck/e八2 = tkiseMC 八燈(eve 八 tsc/c 八切).綁定動(dòng)畫動(dòng)畫和事件的原理是一樣的，先將所有的動(dòng)畫通過f指令渲染出來，然后點(diǎn)擊動(dòng)畫將對(duì)應(yīng)的動(dòng)畫添加到組件的M面岫數(shù)組里。同事件一樣，執(zhí)行的時(shí)候 也是遍歷組件所有的動(dòng)畫并執(zhí)行。為了方便，我們使用了 animate.css動(dòng)畫庫。現(xiàn)在我們提前定義好所有的動(dòng)畫數(shù)據(jù)：export default e/：，進(jìn)入Ichildren: /:漸顯value: adeli1向右進(jìn)入，fade心Left: /abe/:，向左進(jìn)入val

32、ue: fadel八Right卜 /abc向上進(jìn)入 value: fadeliUp1 , /abc/:，向下進(jìn)入、fade以Dow ,/她e/：向右長(zhǎng)距進(jìn)入，vabc： fade灰Le化Big ?，向左長(zhǎng)距進(jìn)入 vq/ac:?！癲e伉, /abe”向上長(zhǎng)距進(jìn)入value:做deU?B，向下長(zhǎng)距進(jìn)入 value: fa4cl八DownBig ? /abR:，旋轉(zhuǎn)進(jìn)入，value: RotateI /nbe/:，左順時(shí)針旋轉(zhuǎn) value: 1 rotate!iPowLeft1 ）? /be，右逆時(shí)針旋轉(zhuǎn): value: otatelowiRiglt1 , SbH:，左逆時(shí)針旋轉(zhuǎn)，value: Ro

33、tate I iUp Left1 ,，右逆時(shí)針旋轉(zhuǎn)I value: irotateliUpRiglt1 /nbe/：彈入，vaMc：八cel ）?向右彈入value： %。八cc伉Left4 ）, Sbe/一向左彈入。value: bouiaceliaRigkt1 1 /abc”向上彈入 value： ,boo（celUp, , /abc/:向下彈入 value: %oa八ce伉Down ）?，光速從右進(jìn)入ligktSpeedRig/詁卜 （abc”光速從左進(jìn)入，value:中g(shù)ktSpcedd八L冊(cè) 光速從右退出、value: igktSpeedOutRigkt1 , SbR:，光速從左退出

34、I value: igktSpeedOutLeft1 , label： V 軸旋轉(zhuǎn) value:偉）, label:，中心 X 軸旋轉(zhuǎn)I value: fhpl八X （abe”中心 丫 軸旋轉(zhuǎn)，value: flipliY1 ）?左長(zhǎng)半徑旋轉(zhuǎn)value： Collin1 1 /nbc/:，由小變大進(jìn)入，value:佐變大進(jìn)入-zooha以Left4 , /abe/:，右變大進(jìn)入，value: zooiliR.igkxt1 , label:，向上變大進(jìn)入 value: Nooha伍U/ ), /abc/:，向下變大進(jìn)入，value: oomlPow )? /abc/:，向右滑動(dòng)展開I za/c:

35、5以c伍L(zhǎng)eft/ ), /abe/:，向左滑動(dòng)展開，value: slideMRight , Sbc/:向上滑動(dòng)展開，value:夕以c伍U? label:，向下滑動(dòng)展開I z”(ae: sde伍Dow )?b(，強(qiáng)調(diào):child*八: /她。/:彈跳一 value; houce1 , /nbc/:閃爍，value:依sW ),(，放大縮小。value: pbdse.放大縮小彈簧，value: ubherBaid1 ,彷be/:，左右晃動(dòng)，value: eadShake1 ), /：左右扇形搖擺swMg. label:放大晃動(dòng)縮小，value: tada1扇形搖擺、value: wobble

36、1 卜 Sbc”左右上下晃動(dòng) value： Jello1 label: 丫 軸旋轉(zhuǎn)。value:偉.)(label:，退出。children: SbR:漸隱value: adeOut1 label:，向左退出、value: fadeOutLeft1 卜 /abe/:，向右退出value: adeOixtRight1 )? /nbc/:，向上退出value: adeOutUp1 /nbe/向下退出value: fadeOmtDowi1 ) Sbe/:向左長(zhǎng)距退出，fndcOatLeFtB ), /abc/:向右長(zhǎng)距退出value: fadcObctRightBig )? /dbH:，向上長(zhǎng)距退出

37、, value: adeOutUpBig1 ) /abc”向下長(zhǎng)距退出，vabe: fadeOutDow八Big , label:旋轉(zhuǎn)退出 value: otateOut ), /abc/:，左順時(shí)針旋轉(zhuǎn)，value: otateOutDowiLeft1 /abc”右逆時(shí)針旋轉(zhuǎn)，za/e:什。笈。atDowhRig/詁)?，左逆時(shí)針旋轉(zhuǎn)，value: irotateOutUpLeft1 , /abR:，右逆時(shí)針旋轉(zhuǎn)，value: otateOiAtUpRight1 , /。/:，彈出一 value: boiAceOut1 ),/她H:，向左彈出:value: ,houiceOiAtLeft,

38、, SbH:，向右彈出value: boL（八ceObctRight , /abe/向上彈出 value: bouiceOutUp1 , label:，向下彈出、value:七。八ceOixtDow ? /nbc/中心 X 軸旋轉(zhuǎn)value: flipOixtX1 ）? Sbc中心 Y 軸旋轉(zhuǎn)value: （ipOutY1 , Sbe/左長(zhǎng)半徑旋轉(zhuǎn)，value: rollout1 , /abc/）由小變大退出，value: ooiOut1 ）? Sbc/:，左變大退出一 value: ooOutLeft1 , /nbe”右變大退出value: zoomOiAtRight SbH:，向上變大退出

39、value: z.ooOutUp卜 /nbe/）向下變大退出, ua/ac: Noo3OtDow , /nbc”向左滑動(dòng)收起，value： slideOiAtLeft1 , /abc”向右滑動(dòng)收起slideOiAtR.ight1 ）? SbR）向上滑動(dòng)收起, va/ac:5以eOatU? /abc”向下滑動(dòng)收起，vabe: slideObitDow八,Lb1然后用f指令渲染出來動(dòng)畫列表。撤消 重做插入圖片預(yù)覽 保存清空畫布畫布大小 1200* 740之文字 按鈕四圖片OOO按鈕添加動(dòng)畫-tabs v-vodel-,aiiiMatioActiveNaeel-tab-paiae v-foWitcm

40、 MavvvsV)ata!1 ikeyitei.lahel :(abe(-uite.labe(,1 :iave=1,ite.label,lel-scrollbar cSss二-c。八W八eddiv :cla$s=l,ho/iewAiiate = aiaiiate.value & aiwate.vaue + 八沁tedq aiivate.label ）點(diǎn)擊動(dòng)畫將調(diào)用addA八沁七，0八（八廝40）將動(dòng)畫添加到組件的4八沁tio八s數(shù)組。觸發(fā)動(dòng)畫運(yùn)行動(dòng)畫的代碼：export default “sg八c 心八cti。八 ra八A八ikati。八（$c。aiiiatio = 口）co八st play

41、-（八八）= new PsMise（resolve = fel.classUst.adaiaiiatioi.valiAe, avwate,d!coist 憶xovcA八沁岫o八=0 = *e/.rcwoucEve八tListe八0匕（十八，鵬力。八。八4, reioveAiiiatioi）于e/.rehOMcEvc八tListc八八八c4八reioveAiiatioi)$el.classUsteiovaiiiatiovaliAej aiiated1)resolve。)$c/.ddE/e八七List八cr(S八ixdti。八e八kcmomcA八力0八)$c/.ddEve八tLkte八er(Z八i

42、k力。八C4八cel kcmovcA八1恒口力。八)1)for (let i = Oj /e八=aiiiatio.length; i 他八；i+) await play(aiivatioi)運(yùn)行動(dòng)畫需要兩個(gè)參數(shù)：組件對(duì)應(yīng)的DOM元素(在組件使用的工輪(獲取)和它的動(dòng)畫數(shù)據(jù)并且需要監(jiān)聽.八加淚，。八c八d事件和aiwatiocacd事件: 一個(gè)是動(dòng)畫結(jié)束時(shí)觸發(fā)，一個(gè)是動(dòng)畫意外終止時(shí)觸發(fā)。利用這一點(diǎn)再配合Promise 一起使用，就可以逐個(gè)運(yùn)行組件的每個(gè)動(dòng)畫了。12.導(dǎo)入PSD由于時(shí)間關(guān)系，這個(gè)功能我還沒做。現(xiàn)在簡(jiǎn)單的描述一下怎么做這個(gè)功能。那就 是使用psd.js庫，它可以解析PSD文件。使用p

43、sd庫解析PSD文件得出的數(shù)據(jù)如下： childre八:可修：visible: false,opacity： 1,b/e八di八gModc:仇。vawe: Version D，left: Ojright: q。）top: O,bottom: （bOO,height: （bOO, width q。）children: tgpc： Sgc, visible: true? opacity: 1, b（。八dMgMode:。rw/，Make a change aid save.1, left: 275,right: 636top: 435;bottom: 466?height: 31?width: 3

44、61Mask: )text: value: ake a change aid save.)font:(八akc:，HelveticaNcue -Lightssizes: 33 )colors 85, Q6) 工工O)255 ,aligiakveiat： center1 ?left： O,top: O,right: O,bottom: O,traiasform: xx:也 xy: O, yx: O, gg;，tx: 4S6? ty: 4S9 ,linage: (1,docueit: width: q。,height: (600,resources: (agcrCoMps: id: 692.2.4

45、3163, Version A- capturedlo: 1 力 衛(wèi)卜/sc呻力按鈕組件MBatto八： propValue /btto八export default props: propValue: type: SWMg,default: Nj)七 id： 72523304/ 八qimc： Version Bl capturedliafo: 1 )? id: 73(9932.8 77 八4nac: Vedio八 C, capturedliafo: 1 guides: )從以上代碼可以發(fā)現(xiàn)，這些數(shù)據(jù)和css非常像。根據(jù)這一點(diǎn)，只需要寫一個(gè)轉(zhuǎn) 換函數(shù)，將這些數(shù)據(jù)轉(zhuǎn)換成我們組件所需的數(shù)據(jù)，就能實(shí)現(xiàn)PSD文件轉(zhuǎn)成渲染 組件的功能。目前quark-h5和Iuban-h5都是這樣實(shí)現(xiàn)