kfa-swiper 关键帧动画播放器

利用3d软件，建模生成关键帧动画文件，再通过kfa-swiper在web上还原成为H5动画 。网易 Gitlab地址。

不同于播放视频的是：

• 控制关键帧动画的前进后退由用户页面滑动决定，而不仅仅是按时间线从前往后播。
• 关键帧动画文件很小，一个包含复杂场景的30秒动画，dae文件在3M左右，并且贴图可以分开加载。

不同于H5动画的是：

• 使用kfa-swiper 不用再编写关于场景动画的代码，省去冗长的开发时间，拿到动画师建好的模型立即就能成为一个H5动画。
• 突破前端动画复杂度的限制。3d软件中实现电影级的动画也能成为一个H5动画页面。
• 缩短产品开发链，动画师建模直接成为产品，而不再是给前端的示意原型。
• 操作流畅。

适合场景：

• 单页滑动动画，虫洞时光机、宇宙漫游场景。

应用：

• 2017年哒哒六一儿童节《滑向童年》活动，查看地址。

技术方案：

3d 软件的动画导出关键帧动画格式，交由Three.js 播放。 播放时间线替换为页面滑动差值，即实现了一个可以用户前进后退的H5动画。

建模要点

• Cinema4d 建模并创建关键帧动画，以移动的摄像机为观察者视角。
• object的命名使用英文字母，贴图文件命名亦采用英文字母，避免路径无法识别。
• 无材质贴图（有子级）的组，采用"group_"前缀命名，在web上以此为关键字跳过贴图步骤。
• 模型的segment 宜少，同一平面贴一张图的情况，设置为1即可，以减少dae文件size。
• 场景的窗口尺寸以web 为准，如iphone6: 375 x 667。
• camera 的 fov , far, near 适中

本文来自网易实践者社区，经作者詹志祥授权发布。