一 概述

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

動(dòng)態(tài)模板技術(shù)體系以跨端動(dòng)態(tài)化SDK為中心，通過在設(shè)計(jì)階段、研發(fā)階段、聯(lián)調(diào)階段降低對(duì)接、開發(fā)、調(diào)試等核心工作的技術(shù)成本，從而真正實(shí)現(xiàn)研發(fā)提效。目前整個(gè)技術(shù)方案包括畫眉跨平臺(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ù)方案將客戶端研發(fā)鏈路實(shí)現(xiàn)了串聯(lián)，通過完備的工具化支撐體系，讓開發(fā)者可以高效完成組件由原始設(shè)計(jì)稿到可運(yùn)行代碼的最短通路，本文將對(duì)研發(fā)體系中涉及到的核心模塊就行介紹，希望對(duì)技術(shù)社區(qū)及廣大開發(fā)者有一定幫助。

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

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

針對(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)素材庫建庫等能力。對(duì)于設(shè)計(jì)師來說可以通過插件建立起標(biāo)準(zhǔn)庫（包括：組件庫、樣式庫、圖標(biāo)庫、頁面庫），也可以通過插件導(dǎo)出更為簡單易用的【標(biāo)注文件】；對(duì)于開發(fā)來說，可以通過插件能將Sketch設(shè)計(jì)稿中的圖層導(dǎo)出為代碼（GaiaX、React、Rax、Vue、小程序等）。

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

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

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

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

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

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

3 代碼導(dǎo)出

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

4 開源項(xiàng)目

詳見文末[1]。

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

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

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

按照分層設(shè)計(jì)理念共分為4層?；A(chǔ)依賴層堅(jiān)持最小依賴原則，要重點(diǎn)說明的是，為了保證模板布局計(jì)算的高性能，我們引入了由RUST編寫的StretchKit高性能布局計(jì)算引擎[https://github.com/vislyhq/stretch]，其具備跨端、較小的包體積（170K）、計(jì)算性能卓越等特點(diǎn)；核心渲染層構(gòu)成模板引擎的渲染內(nèi)核，解決模板文件解析、虛擬節(jié)點(diǎn)樹構(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)模板引擎來說，輸入結(jié)構(gòu)化的模板文件，經(jīng)過文件IO、數(shù)據(jù)解析、虛擬節(jié)點(diǎn)樹構(gòu)建、布局計(jì)算、表達(dá)式運(yùn)算、渲染樹構(gòu)建到真實(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代碼，這樣，開發(fā)工程師可以減少模板框架的從0到1的搭建工作，經(jīng)過簡單的編輯優(yōu)化，便可完成一個(gè)模板文件的構(gòu)建。

4 開源項(xiàng)目

詳見文末[2]。

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

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

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

1 技術(shù)方案

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

2 功能簡介

模板創(chuàng)建

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

模板編輯

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

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

模板調(diào)試

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

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

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

3 下載地址

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

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

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

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

2 技術(shù)方案

iOS端技術(shù)方案

SDK 接口層采用 Category 方案，通過 AOP 思想來簡化調(diào)用復(fù)雜度。

CALayer + MotionCurveX 為 CALayer 的所有可動(dòng)畫屬性，按照動(dòng)效曲線能力提供支持，且在動(dòng)畫完成后，無需再次設(shè)置目標(biāo)值。畫眉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來實(shí)現(xiàn)曲線動(dòng)效。

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

4 開源項(xiàng)目

詳見文末[4]。

六 總結(jié)

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

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

參考鏈接：

[1]GaiaSketch開源項(xiàng)目地址：https://github.com/alibaba/GaiaSketch。
[2]優(yōu)酷動(dòng)態(tài)模板引擎開源項(xiàng)目地址：https://github.com/alibaba/GaiaX
[3]GaiaX開源項(xiàng)目：https://github.com/alibaba/GaiaX
[4]優(yōu)酷畫眉曲線動(dòng)效開源項(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)頁網(wǎng)站下載(全民k歌一鍵制作短視頻)"，僅為提供更多信息供用戶參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

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

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

廣告

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