前端如何实现视频中的效果？

[fqy12300]

https://superhuman.fun/superhuman.mp4 （复制，在浏览器打开，即可查看，直接点击会下载）

设计稿地址

前端如何实现视频中的效果？

我的想法是给身体每个部分做一个组件，prop 属性来控制变化。

但是我遇到了几个问题

1. 前端拿到的每个部分，其实是 .png 格式图片，比如说裤子，那如何去控制每个裤子的颜色呢，难道要不同颜色的裤子都要切图吗？

2. 裤子有不同的款式，也就是每张裤子的图片，宽高都是不一样的，定位的问题该如何解决。我之前是想，把身体的每个部分都切成一样大的图。但是我感觉应该有更好的方法

3. 如果直接按照 Figma 的设计稿在浏览器渲染的思路，是不是可以直接用 <Canvas> 来解决呢。我看阿里新出的 堆友，也是用 <Canvas> 来做的。

希望 V 友，能提供一些解决方案或关键词。谢谢。

[litchinn]

https://www.v2ex.com/t/809717
想要的和这个效果一样吗

[fqy12300]

@litchinn 感谢，我学习一下。