一鍵制作短視頻網(wǎng)頁網(wǎng)站下載(全民k歌一鍵制作短視頻)

一 概述

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

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

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

二 智能化設計平臺 - GaiaSketch

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

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

1 標準素材庫

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

每個 Symbol 的名稱遵循著標準的格式命名，名稱以 / 連接，比如 Foundation/Bar/TabBar ，導入到插件后，可視化展示的效果如上圖所示。

2 標注導出

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

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

3 代碼導出

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

4 開源項目

詳見文末[1]。

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

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

1 架構設計

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

2 總線設計

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

3 性能表現(xiàn)

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

4 開源項目

詳見文末[2]。

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

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

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

1 技術方案

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

2 功能簡介

模板創(chuàng)建

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

模板編輯

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

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

模板調試

GaiaStudio的模板調試功能主要有兩個功能構成，即模板代碼靜態(tài)分析及模板真機預覽（FastPreview）。

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

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

3 下載地址

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

五 跨平臺動效解決方案 - 畫眉

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

1 架構設計

2 技術方案

iOS端技術方案

SDK 接口層采用 Category 方案，通過 AOP 思想來簡化調用復雜度。

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

Android端技術方案

為了降低java調用C的性能損耗，Android端采用差值器Interpolator來實現(xiàn)曲線動效。

3 實現(xiàn)效果

4 開源項目

詳見文末[4]。

六 總結

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

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

參考鏈接：

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

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

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

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

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

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

廣告

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