UWP 手繪視頻創做工具技術分享系列 - 全新的 UWP 來畫視頻

原文: UWP 手繪視頻創做工具技術分享系列 - 全新的 UWP 來畫視頻

從2017年11月開始，咱們開始規劃和開發全新的來畫Pro，在12月23日的短視頻峯會上推出了預覽版供參會者體驗，獲得了很高的評價和關注度。吸收反饋建議後，終於在2018年1月11日正式推出了全新版本的 UWP App，定名爲「來畫視頻」。（根據微軟應用商店的命名規則，你們能夠繼續搜索「來畫Pro」）

全新版本的 UWP 來畫視頻，適配了來畫平臺的手繪視頻模板，對創做工具作了全新的改版。

適配來畫平臺手繪視頻模板

來畫成立兩年多的時間裏，一直在積累手繪視頻模板，目前來畫平臺的模板有上千個，覆蓋了各類風格和用途。利用模板，用戶能夠很方便的創做手繪視頻，應用到不少的場景。而創做的過程，只須要基於模板，簡單的作編輯、添加和替換就能夠了。因此歷來畫Pro 發佈之初，適配平臺模板一直都是用戶呼聲很高的需求。可是因爲來畫平臺和 UWP 創做工具的功能和形式差別，這一需求一直到這個版本才獲得實現。在來畫平臺、UWP 和 Mobile App 模板能夠互通後，用戶對於模板的使用就變得更加靈活，模板的使用度也會變高，對於模板設計師來說，不僅能夠用平臺來創做模板，使用功能更強大的 UWP App 和更靈活的 Mobile App 都是很好的選擇。

先來看看目前 UWP 來畫視頻中模板的展示方式：

 

在首頁展現模板縮略圖列表，選擇模板後，進入模板詳情頁面，展現模板的基礎信息、生成視頻和相關類型的推薦模板。點擊「當即下載」按鈕後，開始下載模板信息和文件。

平臺的模板存儲形式爲一個 json 配置文件，存儲了模板名、模板尺寸、時長、分組信息、素材信息、音樂信息等字段，每一個涉及到文件的字段，都是一個 URL。因此 UWP 在下載模板時作的工做，就是下載這個配置文件，解析文件裏全部的 URL，下載對應資源並存儲到某個固定文件夾下。把位置信息、動畫信息等轉換成 UWP 創做工具可使用的格式，完成後用戶就能夠在創做工具中使用這個模板了。

全新的創做工具

1. 工具分組

這是新版的創做工具界面，相比於舊版的界面，最大的變化就是「分組」。原有的視頻創做方式，是以素材爲單位，添加若干素材後，順序播放。這種方式遇到的一個難題，就是當素材數量過多，好比超過60-80個時，素材間的覆蓋就會變得嚴重，想選中和編輯素材就變得比較困難。另外對於不少手繪視頻創做者來講，內心對於視頻會有分鏡頭的概念，一個視頻由幾個分鏡頭組成，而每一個分鏡頭又由多個素材的動畫組成。這樣就有了新版的工具分組。

經過分組的創做工具，用戶在每一個分鏡頭中只須要加入少許的素材，就能夠完成一個分鏡頭動畫。而經過添加多個分組，讓多個分鏡頭組成一個手繪視頻。每一個分鏡頭能夠單獨進行動畫設置、預覽和素材調整等操做。再配合咱們上一篇（UWP 手繪視頻創做工具技術分享系列 - 有 AI 的手繪視頻）提到的來畫和科大訊飛的智能配音，用戶能夠針對每一個分鏡頭，選擇不一樣的聲音進行配音，並在每一個分鏡頭間根據轉場動畫時長來作配音停頓，這樣配音的同步變得更加簡單，並且每一個視頻中能夠出現多種聲音，更加靈活。

在技術實現方面，原有引擎中以 Sprite item 爲操做單位，而分組後，加入了 Group 這一層的操做，Group 和 Sprite 間有從屬關係，Group 有本身的索引、動畫設置和畫布位置、縮放等信息。Group 間沒有過多的關聯，因此 Group 能夠隨意的拖拽順序，添加和刪除。

可能你也注意到了，新版的工具界面從新定義了 Title Bar。咱們認爲系統默認的 Title Bar 咱們的利用度較低，爲了更大限度的擴大用戶的可操做區域，讓整個工具更有浸入感，咱們把原來右側的元素類型菜單，放到了 Title Bar 上。若是你們對這個實現感興趣，能夠參考：Windows Dev Center - Title bar customization，也歡迎和咱們交流。

2. 全新的繪畫功能

在分組功能以外，咱們也順應 Windows 10 的更新方向，不斷的拓展繪畫功能。

原有版本咱們更多的是直接使用了系統的 InkToolbar，包括畫筆選擇，畫筆顏色和粗細等的操做。而新版本咱們從新定義了繪畫菜單。

如上圖左上角的圓形菜單，最外層是經常使用的推薦顏色和推薦的畫筆粗細，裏層是不一樣的畫筆、橡皮、調色板和畫筆粗細。其中推薦顏色控件，是一個自定義的圓形列表控件。

選擇調色板後，出現以下的界面，以 RGB、HSB 數值選擇，和顏色選擇的角度，去設置畫筆的顏色。

  

3. 全新的圖片編輯功能

過去咱們也講過，SVG 相比於 PNG，在手繪視頻中的表現形式更豐富，由於 SVG 有路徑信息，而 PNG 沒有。因此咱們在新版的開發過程當中，也在不斷考慮 PNG 更多的展示方式。

如上面的圖片編輯界面，咱們對於圖片，作了濾鏡、編輯、描圖和調整的功能。下面四張圖依次展現了這四個功能點。

 

 

其中濾鏡、編輯和調整功能都很常規，主要說一下描圖功能。

描圖功能的目的，是讓用戶對於 PNG 作自定義的描繪操做，從而生成一張 SVG，這張 SVG 的底圖是這張 PNG，而路徑（也就是視頻中的繪畫過程）是用戶本身描繪的線條。繪畫過程，是一個底圖根據路徑被不斷展現出來的形式。以下圖所示，對比上面的描圖界面，這張 PNG 生成的 SVG，描繪過程是用戶描圖的路徑。一般用戶想作這個操做，須要先在 PS 裏對圖片作編輯操做，而後倒入到 AI 中，描繪路徑後保存爲 SVG 文件，再導入到來畫視頻中。而如今在來畫視頻中就能夠完整整個的操做過程。

 

好了，全新的 UWP 來畫視頻就介紹到這裏，歡迎你們在 Microsoft Store 搜索「來畫」下載使用，若是你們對 UWP 中的技術實現感興趣，歡迎和咱們交流，謝謝！