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

来源:https://www.cnblogs.com/shaomeng/archive/2018/01/14/8228944.html
-Advertisement-
Play Games

從2017年11月開始,我們開始規劃和開發全新的來畫Pro,在12月23日的短視頻峰會上推出了預覽版供參會者體驗,得到了很高的評價和關註度。吸取反饋建議後,終於在2018年1月11日正式推出了全新版本的 UWP App,定名為“來畫視頻”。(根據微軟應用商店的命名規則,大家可以繼續搜索“來畫Pro” ...


從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 中的技術實現感興趣,歡迎和我們交流,謝謝!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 背水一戰 Windows 10 之 文件系統: 獲取文件夾的屬性, 獲取文件夾的縮略圖 ...
  • AdminController中添加引用: Index添加[Authorize]許可權要求: StartUp.cs中添加引用: StartUp.cs ConfigureServices中添加常量: 添加中間件: 此時,訪問Admin頁面,自動跳轉至Account/Login?ReturnUrl=%2F ...
  • 打斷點打不出火花,這個問題糾結了我兩天時間,查問了度娘許久,網上各種說法。我一直認為是我的環境設置問題,但就是沒辦法找到問題所在。 我想起哪天部署WEB的時候,點了一下“代碼優化”,於是還原了代碼優化,結果問題解決了。 哈哈 這樣就能打出火花了 ...
  • 1. 單一職責原則(Single Responsibility Principle) 每一個類應該專註於做一件事情。 每一個職責都是變化的一個軸線,如果一個類有一個以上的職責,這些職責就耦合在了一起。這會導致脆弱的設計。當一個職責發生變化時,可能會影響其它的職責。另外,多個職責耦合在一起,會影響復用 ...
  • 今天,我將向您展示這些EF Core中一個很酷的功能,通過使用顯式編譯的查詢,提高查詢性能。 不過在介紹具體內容之前,需要說明一點,EF Core已經對錶達式的編譯使用了緩存;當您的代碼需要重用以前執行的查詢時,EF Core將使用哈希查找並從緩存中返回已編譯的查詢。 關於這一點,您可以查閱gith ...
  • .NET Core單文件發佈靜態編譯AOT CoreRT,將.NET Core應用打包成一個可執行文件並包含運行時。 支持Windows, MacOS and Linux x64 w/ RyuJIT codegen。 示例項目: https://github.com/dotnet/corert/tr ...
  • 接著上篇文章,現在去修改註冊登錄邏輯代碼還為時過早,我們還需要到後臺去設置一些配置。 管理 設置 先配置好這2項設置,郵箱配置是為了驗證註冊時功能是否正常,下一篇文章需要用到。 註:郵箱配置中的密碼並不是QQ密碼,而是在QQ郵箱中生成的授權碼,具體獲取請登錄QQ郵箱查看 語言翻譯 進入後臺可以看到圈 ...
  • A系統傳遞數據給B系統 1、A創建asmx推送介面如下 using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Web.S ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...