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