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 中的技术实现感兴趣,欢迎和我们交流,谢谢!

原文地址:https://www.cnblogs.com/shaomeng/p/8228944.html

时间: 2024-10-27 04:53:27

UWP 手绘视频创作工具技术分享系列 - 全新的 UWP 来画视频的相关文章

UWP 手绘视频创作工具技术分享系列

开篇先来说一下写这篇文章的初衷. 初到来画,通读了来画 UWP App 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,性能,功能等等.于是我们决定从头重构这个产品,做一个全新的 “来画Pro” 出来,历经三个月的世间,这个产品终于正式上架. (做个小广告,在 Windows 应用商店搜索 “来画Pro” 就可以找到,目前公司定位为收费应用,但是有一个月试用期,如果大家感兴趣,可以跟我要免费代码.这里是 IT之家的报道:https://www.ithome.com

UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制

本篇作为技术分享系列的第一篇,详细讲一下 SVG 的解析和绘制,这部分功能的研究和最终实现由团队的 @黄超超 同学负责,感谢提供技术文档和支持. 首先我们来看一下 SVG 的文件结构和组成 SVG (Scalable Vector Graphics) 是一种可缩放矢量图形,使用 XML 格式来定义,是一种 W3C 标准,图像在放大或改变尺寸的情况下其图形质量不会有所损失. 下面是一个简单的 SVG 的文件结构例子: <?xml version="1.0" standalone=&

WPF-两份excel文档列自动匹配导入工具-技术&amp;分享

WPF-两份excel文档列自动匹配导入工具-技术&分享 A文档中包含两列x,y(x与y对应):B文档包含一列y,需要将A文档的y匹配B文档的y,将A文档的x内容匹配到B文档中,与B文档中的y列对应. using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Windows; using System.Windows.Forms; using Mysoft.Co

恒天云技术分享系列4 – OpenStack网络攻击与防御

恒天云技术分享系列:http://www.hengtianyun.com/download-show-id-13.html 云主机的网络结构本质上和传统的网络结构一致,区别大概有两点. 1.软网络管理设备(如nova-network,open switch)部分替代硬件网络设备 . 2.多虚拟服务器共享一个宿主机物理网卡(使用Trunk技术). 那么对于云服务器的安全,我们也可以采用传统的网络安全技术去防御.对于云主机,我们同时也需要做好宿主机的防火墙配置,以及安全设置. 1.对于虚拟机进行虚拟

AWS云计算技术分享系列直播课-第一讲课程邀请函

科技的不断创新与演进时刻在改变我们所处的时间,人们从未停止用科技的力量去探索和实现.越来越多的企业和人们正在通过 AWS 重新构建,构建更好的用户体验,构建更强大的业务平台,构建更安全的系统架构- 今天光环云社群为大家带来AWS云计算技术分享系列直播课,帮助大家由浅入深的了解和使用AWS云服务. 直播课程规划如下: 第一讲 快速开始使用AWS 第二讲 计算.存储和访问权限管理 第三讲 利用 Amazon VPC 服务搭建经典 Web 三层架构 第四讲 弹性与负载均衡 第五讲 使用 Amazon

UWP 手绘视频创作工具 “来画Pro” 技术分享系列

今年年初时,我还在北京,在 Face++,做着人脸识别技术的 Windows 和 Android 端,做着人工智能终将实现世间所有美好的梦.这时的我已经离开 UWP,甚至 C# 很久了,写着 C++ 和 Java,当时真的没想过会再次回到 UWP 的阵营,直到 4 月份的时候,一次很偶然的机会,我的一位微软的朋友,也是 Face++的老朋友找到我询问我在 Face++ 的工作近况,本以为只是很久没联系之后的简单交流,直到他提到:在深圳,有一家叫做 "来画" 创业公司,做手绘视频工具和平

全景VR视频外包公司:长年承接VR全景视频外包(技术分享YouTube的360全景视频)

虽然比预期来得晚了些,但YouTube终于支持360度全景视频了,这应该会吸引不少VR(虚拟现实)爱好者.今年1月,Google就表示这一功能将在“接下来”的几周出现.现在YouTube上已经有了一些全景视频,随着相应相机的上市,未来视频也会更多. 360度视频的特点是,用户在观看的过程中可以移动视角,这更令人震撼,也更具互动性.结合Oculus或Google Cardboard等VR设备使用,你在观看过程中还能移动头部,就像真正身处其中一样. 目前,Android版的最新YouTube已经支持

【华为云技术分享】Extensions in UWP Community Toolkit - ViewExtensions

概述 UWP Community Toolkit Extensions 中有一个为 View 提供的扩展 - View Extensions,本篇我们结合代码详细讲解 View Extensions 的实现. View Extensions 包括了 ApplicationViewExtensions,StatusBarExtensions 和 TitleBarExtensions,让开发者可以方便的定制 AppView,StatusBar 和 TitleBar 的样式,接下来看看官方示例的截图:

apache kafka技术分享系列(目录索引)--转载

原文地址:http://blog.csdn.net/lizhitao/article/details/39499283 kafka开发与管理: 1)apache kafka消息服务 2)kafak安装与使用 3)apache kafka中server.properties配置文件参数说明 4)apache kafka中topic级别配置 5)Apache kafka客户端开发-java 6)kafka的ZkUtils类的java版本部分代码 7)kafka log4j配置 8)apache ka