自从上次发布了WebCut的开源信息之后，获得了非常多小伙伴的关注，也有很多小伙伴还不知道，所以我打算写一些更新进度文章，让关注的小伙伴了解WebCut的最新进展。

什么是WebCut？

对于还不了解的小伙伴，我先介绍一下WebCut。它是一款开源的前端（Web）视频编辑UI框架。说的简单点，就是它可以在你的网页上快速植入一个可以用来进行视频编辑的插件，这样你就可以以最低的成本快速实现相关需求。它以组件化思想对外开放，可以通过任意组合的形式，实现各种造型的视频编辑界面。

什么人需要WebCut？

• 开发者：如果你的老板要你在你们的web产品中快速上线一个视频编辑功能，你需要它

• 老网站系统维护者：如果你们的系统希望实现用户在系统中完成所有操作，包括视频的编辑，你需要它

• 创作者：如果你在找剪映的免费替代品，你需要它

目前支持哪些功能？

• 核心功能：

• 视频播放/编辑画布

• 时间轴素材管理器：不同类型素材的渲染效果、高度、分栏、滚动、时间刻度（含缩放）、时间游标、素材时长和位置拖拽调整等等

• 处理工具：分割裁剪、水平翻转、两段视频合并连接

• 视频导出：视频格式、分辨率、码率、音频导出等

• 基础信息编辑：位置、大小、透明度、旋转

• 信息编辑：音视频的声量调节

• 外围功能

• 长宽比调整

• 播放器进度显示器

• 暗黑主题和浅色主题切换

• 多语言（8种），含语言切换组件

• 进阶功能

• 时间轴定制：可在时间轴上扩展各种附加元素

• 媒体库管理：管理各种素材、导入（含文件夹导入）、添加、多选按顺序添加等等

• 素材类型：视频、音频、图片（含gif）、文字（含文字样式编辑）

• 媒体库定制：特定类型素材新增菜单添加功能、新增媒体类型等

• 动画：可扩展的动画功能

• 滤镜：可扩展的滤镜功能

• 转场效果：可扩展的转场效果

• VIP功能

• 视频水印（含运动效果）

• 文本转语音

本周开源日志

本周我们实现了动画、滤镜、转场这3个在视频编辑器技术实现中非常麻烦的功能，这里展开讲一下。

• 动画

动画主要指素材在视频中的运动效果，这里的运动主要通过改变素材的基本属性来实现。例如通过改变素材的位置信息来实现位移，通过改变大小来实现运动中的缩放效果，通过改变透明度来实现闪动效果等等。同时，这些属性的变化可以两两组合，实现非常酷炫的动画。

在WebCut中，一个动画由两个部分组成，一个部分定义keyframe，它是一组key-value，其中key代表时间进度，例如5%, 40%, 90%，value代表在这个时间点上应该以什么属性展示时间点之间，则通过动画运算来进行补间；另一部分是参数，用于计算动画的速度。如果以前开发过css的小伙伴，应该对animation非常了解。

• 滤镜

滤镜主要指对素材的画面表现进行变化，例如灰度、鲜亮、高斯模糊等效果。在WebCut中，主要通过对视频画面的帧进行滤镜处理，从而让整个视频拥有滤镜效果。

• 转场

转场主要针对的是两段视频的连接方式，它的实现比较复杂，结合了动画、滤镜等效果，而且还要处理两段视频的衔接。其实现难度非常大。不过WebCut已经做了高度集成，提供了非常便捷的接口，开发者只需要根据接口文档，传入参数，即可完成自己的转场效果。

除了上面提到的3个非常重要的功能，本周，我们还对WebCut做了一项非常重要的设计实现，就是实现了“扩展包”功能。开发者可基于该功能，定义自己的扩展包，并把它注册到WebCut中，即可实现自己的复杂功能。我们的VIP功能就是基于该扩展包功能实现。简单讲，扩展包提供了非常明确的typescript类型接口，你只需要实现该接口，就可以轻松对视频编辑器进行扩展，以增加WebCut本身没有的功能。

另外，我们还做了一些小更新。例如增加了在媒体库中直接上传整个文件夹的能力，增加了多选多个素材并按顺序插入到画布中的能力等。更多功能，还需要你自己去发现～

👉传送门：webcut.top

🌹Github点赞：github.com/tangshuang/…

关注我的公众号 wwwtangshuangnet ，持续获取WebCut更新日志。