一 概述

優(yōu)酷是一個(gè)多屏、多端，以?xún)?nèi)容分發(fā)及內(nèi)容消費(fèi)為主體的文娛生態(tài)綜合體。在內(nèi)容分發(fā)場(chǎng)景，存在大量的客戶(hù)端開(kāi)發(fā)需求，包括視覺(jué)升級(jí)、各場(chǎng)景的業(yè)務(wù)需求迭代、大小屏設(shè)備需求同步等，為了降低研發(fā)在跨端場(chǎng)景中組件重復(fù)開(kāi)發(fā)的技術(shù)成本，優(yōu)酷技術(shù)團(tuán)隊(duì)于2019年底開(kāi)始探索跨端動(dòng)態(tài)化研發(fā)提效解決方案，經(jīng)過(guò)2年多時(shí)間的努力，目前跨端動(dòng)態(tài)化能力已經(jīng)在優(yōu)酷各業(yè)務(wù)場(chǎng)景落地，幫助研發(fā)團(tuán)隊(duì)在分發(fā)業(yè)務(wù)上實(shí)現(xiàn)提效30%左右。

動(dòng)態(tài)模板技術(shù)體系以跨端動(dòng)態(tài)化SDK為中心，通過(guò)在設(shè)計(jì)階段、研發(fā)階段、聯(lián)調(diào)階段降低對(duì)接、開(kāi)發(fā)、調(diào)試等核心工作的技術(shù)成本，從而真正實(shí)現(xiàn)研發(fā)提效。目前整個(gè)技術(shù)方案包括畫(huà)眉跨平臺(tái)動(dòng)效解決方案、智能化設(shè)計(jì)平臺(tái)GaiaSketch、跨端模板動(dòng)態(tài)化方案GaiaX、動(dòng)態(tài)模板可視化少代碼搭建平臺(tái)GaiaStudio、輔助調(diào)試工具快速預(yù)覽FastPreview。

動(dòng)態(tài)模板技術(shù)方案將客戶(hù)端研發(fā)鏈路實(shí)現(xiàn)了串聯(lián)，通過(guò)完備的工具化支撐體系，讓開(kāi)發(fā)者可以高效完成組件由原始設(shè)計(jì)稿到可運(yùn)行代碼的最短通路，本文將對(duì)研發(fā)體系中涉及到的核心模塊就行介紹，希望對(duì)技術(shù)社區(qū)及廣大開(kāi)發(fā)者有一定幫助。

二 智能化設(shè)計(jì)平臺(tái) - GaiaSketch

Sketch作為一款優(yōu)秀的設(shè)計(jì)軟件，目前已經(jīng)是絕大多數(shù)互聯(lián)網(wǎng)企業(yè)設(shè)計(jì)部門(mén)的主要設(shè)計(jì)工具。與Photoshop相比，Sketch對(duì)矢量元素具有更強(qiáng)的處理能力，并且其本身提供了豐富的二次開(kāi)發(fā)接口，具有很強(qiáng)的開(kāi)放性。

針對(duì)標(biāo)注導(dǎo)出及組件還原兩部分日常工作量占比較高的工作，優(yōu)酷技術(shù)團(tuán)隊(duì)基于Sketch插件架構(gòu)體系，研發(fā)了自動(dòng)化標(biāo)注構(gòu)建導(dǎo)出、組件代碼自動(dòng)生成以及標(biāo)準(zhǔn)素材庫(kù)建庫(kù)等能力。對(duì)于設(shè)計(jì)師來(lái)說(shuō)可以通過(guò)插件建立起標(biāo)準(zhǔn)庫(kù)（包括：組件庫(kù)、樣式庫(kù)、圖標(biāo)庫(kù)、頁(yè)面庫(kù)），也可以通過(guò)插件導(dǎo)出更為簡(jiǎn)單易用的【標(biāo)注文件】；對(duì)于開(kāi)發(fā)來(lái)說(shuō)，可以通過(guò)插件能將Sketch設(shè)計(jì)稿中的圖層導(dǎo)出為代碼（GaiaX、React、Rax、Vue、小程序等）。

1 標(biāo)準(zhǔn)素材庫(kù)

每個(gè)組件庫(kù)由一個(gè)或者多個(gè) Symbol 構(gòu)成，每個(gè) Symbol 按照一定的格式命名后，插件就能讀取并可視化展示在插件中，并可將可視化后的組件直接拖拽到 Sketch 設(shè)計(jì)稿中且與原庫(kù)保持關(guān)聯(lián)。

每個(gè) Symbol 的名稱(chēng)遵循著標(biāo)準(zhǔn)的格式命名，名稱(chēng)以 / 連接，比如 Foundation/Bar/TabBar ，導(dǎo)入到插件后，可視化展示的效果如上圖所示。

2 標(biāo)注導(dǎo)出

將Sketch源文件中的畫(huà)板導(dǎo)出為標(biāo)注文件供開(kāi)發(fā)使用，導(dǎo)出的【標(biāo)注文件】具有更好的兼容性、更易用的界面。

標(biāo)注導(dǎo)出的產(chǎn)物主要包含兩個(gè)部分，一部分是標(biāo)注模板文件，另一部分包括設(shè)計(jì)稿相關(guān)數(shù)據(jù)信息，比如畫(huà)板截圖，圖層數(shù)據(jù)、切圖等。

3 代碼導(dǎo)出

將Sketch設(shè)計(jì)稿中選中的圖層導(dǎo)出為選定的語(yǔ)言類(lèi)型的代碼，比如GaiaX模板、React、Rax、Vue、小程序等，導(dǎo)出的代碼布局方式基于盒子模型布局（Flexbox）和絕對(duì)布局（Absolute）；對(duì)于節(jié)點(diǎn)的層級(jí)，【導(dǎo)出代碼】會(huì)在導(dǎo)出的過(guò)程中進(jìn)行不斷的優(yōu)化，使層級(jí)盡可能的少且合理。

4 開(kāi)源項(xiàng)目

詳見(jiàn)文末[1]。

三 動(dòng)態(tài)模板引擎 - GaiaX

GaiaX是動(dòng)態(tài)模板引擎項(xiàng)目在優(yōu)酷內(nèi)部的代號(hào)，它是解決跨端組件開(kāi)發(fā)提效方案的關(guān)鍵技術(shù)。在項(xiàng)目前期的需求分析階段，團(tuán)隊(duì)從優(yōu)酷的實(shí)際場(chǎng)景和各團(tuán)隊(duì)開(kāi)發(fā)中的切實(shí)訴求出發(fā)，將問(wèn)題空間定位在組件這個(gè)層級(jí)，不僅很好的規(guī)避了如Weex、ReactNative等技術(shù)方案的復(fù)雜度和工程量，其次也在根本上讓技術(shù)方案脫離JS Bridge的老路，保證了端側(cè)的落地性能保障。

1 架構(gòu)設(shè)計(jì)

按照分層設(shè)計(jì)理念共分為4層?；A(chǔ)依賴(lài)層堅(jiān)持最小依賴(lài)原則，要重點(diǎn)說(shuō)明的是，為了保證模板布局計(jì)算的高性能，我們引入了由RUST編寫(xiě)的StretchKit高性能布局計(jì)算引擎[https://github.com/vislyhq/stretch]，其具備跨端、較小的包體積（170K）、計(jì)算性能卓越等特點(diǎn)；核心渲染層構(gòu)成模板引擎的渲染內(nèi)核，解決模板文件解析、虛擬節(jié)點(diǎn)樹(shù)構(gòu)建、布局計(jì)算、表達(dá)式構(gòu)建解析等核心邏輯；模板中心及模板服務(wù)層則面向業(yè)務(wù)，與優(yōu)酷業(yè)務(wù)架構(gòu)進(jìn)行結(jié)合實(shí)現(xiàn)對(duì)現(xiàn)有能力的復(fù)用，避免重復(fù)造輪子，并向上層業(yè)務(wù)提供標(biāo)準(zhǔn)化模板渲染及接入服務(wù)。

2 總線設(shè)計(jì)

對(duì)于動(dòng)態(tài)模板引擎來(lái)說(shuō)，輸入結(jié)構(gòu)化的模板文件，經(jīng)過(guò)文件IO、數(shù)據(jù)解析、虛擬節(jié)點(diǎn)樹(shù)構(gòu)建、布局計(jì)算、表達(dá)式運(yùn)算、渲染樹(shù)構(gòu)建到真實(shí)視圖樹(shù)組成了完整的總線鏈路。

3 性能表現(xiàn)

由于動(dòng)態(tài)模板DSL具備嚴(yán)格的標(biāo)準(zhǔn)化和規(guī)范化，因此在設(shè)計(jì)研發(fā)交付一體化鏈路上，GaiaSketch的組件代碼導(dǎo)出可直接生成GaiaX動(dòng)態(tài)模板DSL代碼，這樣，開(kāi)發(fā)工程師可以減少模板框架的從0到1的搭建工作，經(jīng)過(guò)簡(jiǎn)單的編輯優(yōu)化，便可完成一個(gè)模板文件的構(gòu)建。

4 開(kāi)源項(xiàng)目

詳見(jiàn)文末[2]。

四 動(dòng)態(tài)模板低代碼IDE - GaiaStudio

動(dòng)態(tài)模板引擎可以解決跨端組件渲染的一致性，通過(guò)一套統(tǒng)一的DSL對(duì)組件布局、樣式、數(shù)據(jù)進(jìn)行描述，從而實(shí)現(xiàn)多端開(kāi)發(fā)的提效。但對(duì)于客戶(hù)端開(kāi)發(fā)來(lái)說(shuō)，類(lèi)前端的DSL本身存在一定的學(xué)習(xí)成本，另外，如何編寫(xiě)更加合理、簡(jiǎn)潔的模板代碼，對(duì)模板在終端最終的渲染及性能表現(xiàn)都會(huì)產(chǎn)生直接的影響。

為了解決上述問(wèn)題，優(yōu)酷技術(shù)團(tuán)隊(duì)在動(dòng)態(tài)模板引擎上線后，著手構(gòu)建了GaiaStudio動(dòng)態(tài)模板低代碼IDE。開(kāi)發(fā)者通過(guò)該IDE，可以對(duì)模板進(jìn)行可視化搭建，引擎支持的所有布局及樣式屬性，都在IDE中進(jìn)行了內(nèi)置，開(kāi)發(fā)者只需進(jìn)行選擇，便可用戶(hù)界面中即可得到渲染反饋。

1 技術(shù)方案

考慮到開(kāi)發(fā)便捷性和后續(xù)的跨平臺(tái)，我們選用了Electron作為底層跨平臺(tái)方案，用Sematic UI作為CSS組件庫(kù)，保證在沒(méi)有設(shè)計(jì)的情況下，也能夠?qū)懗霰容^美觀的用戶(hù)界面。與網(wǎng)頁(yè)前端對(duì)比，Electron有更好的性能、并且可更便捷的實(shí)現(xiàn)有手機(jī)端的互聯(lián)互通。

2 功能簡(jiǎn)介

模板創(chuàng)建

模板是GaiaX技術(shù)體系的核心介質(zhì)，也是跨端動(dòng)態(tài)渲染的關(guān)鍵點(diǎn)。模板的構(gòu)建質(zhì)量決定了端側(cè)渲染的性能和還原效果。GaiaStudio提供了非常全面的模板管理能力，支持從0-1直接構(gòu)建一個(gè)新的模板，也可通過(guò)GaiaSketch導(dǎo)出模板代碼的方式，導(dǎo)入到GaiaStduio簡(jiǎn)化編輯成本。

模板編輯

模板編輯是模板構(gòu)建過(guò)程中工作量大的，為了降低開(kāi)發(fā)者的技術(shù)成本及對(duì)FlexBox的學(xué)習(xí)曲線，GaiaStudio提供了可視化、參數(shù)化的產(chǎn)品功能，即使操作者對(duì)FlexBox、CSS了解甚少，也可以快速上手完成一個(gè)模板的編輯工作。

對(duì)于一個(gè)模板，一般來(lái)說(shuō)我們要進(jìn)行一組完整的編輯處理，才能完成整個(gè)構(gòu)建工作，包括：基礎(chǔ)屬性、布局、樣式、動(dòng)畫(huà)、數(shù)據(jù)綁定。

模板調(diào)試

GaiaStudio的模板調(diào)試功能主要有兩個(gè)功能構(gòu)成，即模板代碼靜態(tài)分析及模板真機(jī)預(yù)覽（FastPreview）。

1) 模板代碼靜態(tài)分析可以幫助開(kāi)發(fā)者檢查模板代碼的語(yǔ)法及合理性，針對(duì)如模板命名是否合法、布局設(shè)置則、模板嵌套層級(jí)等問(wèn)題實(shí)時(shí)反饋給開(kāi)發(fā)者，幫助開(kāi)發(fā)者更合理的完成模板搭建。

2) 模板預(yù)覽FastPreview，GaiaStudio提供了亞秒級(jí)的模板真機(jī)預(yù)覽能力，讓開(kāi)發(fā)者可以實(shí)時(shí)在真機(jī)端查看自己搭建的模板的正確性和還原效果，讓Native開(kāi)發(fā)也可以具備類(lèi)似H5、小程序的開(kāi)發(fā)體驗(yàn)。

3 下載地址

GaiaStudio目前對(duì)社區(qū)提供通用版本安裝包，源碼暫時(shí)未開(kāi)源，具體的下載地址在GaiaX開(kāi)源項(xiàng)目中可獲取[3]。

五 跨平臺(tái)動(dòng)效解決方案 - 畫(huà)眉

在客戶(hù)端開(kāi)發(fā)的日常工作中，存在著大量動(dòng)效場(chǎng)景需求，如 ToastView 顯示與消失、Dialog彈出、按鈕的顯隱等。當(dāng)動(dòng)效設(shè)計(jì)需求交付給研發(fā)后，往往要達(dá)到最終的效果，需要經(jīng)過(guò)多輪的走查和調(diào)優(yōu)，歸納起來(lái)造成這種結(jié)果的原因主要有：1）同一動(dòng)畫(huà)，不同的開(kāi)發(fā)人員實(shí)現(xiàn)的效果有差別 2）同一動(dòng)畫(huà)，iOS 端和 Android 端實(shí)現(xiàn)的效果有差別 3）對(duì)于曲線動(dòng)效，設(shè)計(jì)師無(wú)法提供準(zhǔn)確參數(shù)，實(shí)現(xiàn)效果隨機(jī)性強(qiáng) 4）部分開(kāi)發(fā)人員對(duì)系統(tǒng)自帶曲線函數(shù)不熟悉，會(huì)導(dǎo)致降級(jí)應(yīng)用線性或減速曲線，影響動(dòng)態(tài)效果。為了徹底解決端側(cè)動(dòng)畫(huà)實(shí)現(xiàn)的研發(fā)效率及效果保障，技術(shù)團(tuán)隊(duì)與設(shè)計(jì)中心共同推出了跨平臺(tái)動(dòng)效解決方案-畫(huà)眉(Motion-curve)。在GaiaX動(dòng)態(tài)模板引擎中，曲線動(dòng)效的實(shí)現(xiàn)也依賴(lài)畫(huà)眉提供基礎(chǔ)服務(wù)。

1 架構(gòu)設(shè)計(jì)

2 技術(shù)方案

iOS端技術(shù)方案

SDK 接口層采用 Category 方案，通過(guò) AOP 思想來(lái)簡(jiǎn)化調(diào)用復(fù)雜度。

CALayer + MotionCurveX 為 CALayer 的所有可動(dòng)畫(huà)屬性，按照動(dòng)效曲線能力提供支持，且在動(dòng)畫(huà)完成后，無(wú)需再次設(shè)置目標(biāo)值。畫(huà)眉SDK將常用的 7 種動(dòng)效曲線，進(jìn)行底層算法實(shí)現(xiàn)，使用者只需指定曲線枚舉，即可實(shí)現(xiàn)標(biāo)準(zhǔn)化的動(dòng)效。

Android端技術(shù)方案

為了降低java調(diào)用C的性能損耗，Android端采用差值器Interpolator來(lái)實(shí)現(xiàn)曲線動(dòng)效。

3 實(shí)現(xiàn)效果

4 開(kāi)源項(xiàng)目

詳見(jiàn)文末[4]。

六 總結(jié)

動(dòng)態(tài)模板研發(fā)體系在優(yōu)酷落地運(yùn)行后，對(duì)設(shè)計(jì)規(guī)范化、設(shè)計(jì)與研發(fā)的對(duì)接及視覺(jué)還原提效、端側(cè)研發(fā)的交付提效來(lái)說(shuō)，都取得了不錯(cuò)的成果。目前優(yōu)酷技術(shù)團(tuán)隊(duì)正在對(duì)技術(shù)方案進(jìn)行整體開(kāi)源，希望通過(guò)這篇文章的介紹能讓大家對(duì)該研發(fā)體系有一個(gè)初步的了解，也希望大家關(guān)注優(yōu)酷技術(shù)團(tuán)隊(duì)相關(guān)的開(kāi)源項(xiàng)目，一起共建讓社區(qū)受益！

優(yōu)酷動(dòng)態(tài)模板研發(fā)體系開(kāi)源項(xiàng)目列表

參考鏈接：

[1]GaiaSketch開(kāi)源項(xiàng)目地址：https://github.com/alibaba/GaiaSketch。
[2]優(yōu)酷動(dòng)態(tài)模板引擎開(kāi)源項(xiàng)目地址：https://github.com/alibaba/GaiaX
[3]GaiaX開(kāi)源項(xiàng)目：https://github.com/alibaba/GaiaX
[4]優(yōu)酷畫(huà)眉曲線動(dòng)效開(kāi)源項(xiàng)目地址：https://github.com/alibaba/gaia-motion-curve

原文鏈接：http://click.aliyun.com/m/1000339110/

本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："一鍵制作短視頻網(wǎng)頁(yè)網(wǎng)站下載(全民k歌一鍵制作短視頻)"，僅為提供更多信息供用戶(hù)參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

本文名稱(chēng)：一鍵制作短視頻網(wǎng)頁(yè)網(wǎng)站下載(全民k歌一鍵制作短視頻)
鏈接地址：http://www.rwnh.cn/news25/317525.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、微信小程序、定制開(kāi)發(fā)、App設(shè)計(jì)、云服務(wù)器、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)