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 适中

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