Three.js+TweenMax帮你实现骚气的H5动画(新手入门)

发表于   |   分类于 ，   |   阅读次数

本文未涉及详细的代码步骤来深入讲解H5动画的实现过程，只提供一些技术思路和方向，以供深入研究和学习。本文适合对css3与jquery动画库有一定了解的初学者。

公司突然要做一个H5广告，老板只有一个要求，就是要有3D效果，要向《穿越故宫来看你》、《淘宝造物节》等大神级作品看齐。回头看下只有1个策划2个美工不到3个前端的团队，额，臣妾做不到啊。但是老板要求了，别说要搞3D动画，就算他想搞原子弹，我们也要想办法弄清楚原子弹的设计原理，做不出大神级别H5，做个草根山寨版的也行啊，劳动人民的智慧总是无穷无尽的…..

视频动画

要做H5的3D动画广告，最先想到的就是视频了，这种方式当然对我们前端程序员来说是最省事的，只需要找相关视频制作的专业人事，做出一个狂拽酷炫吊炸天的视频，然后嵌入H5页面就搞定了。其中唯一需要担心的是网页视频在安卓设备上播放的时候，会默认冒出播放器的进度条。最简单粗暴的解决办法就是把视频的尺寸放大，让进度条飞出显示屏，嗯，完美。当然还有唯二需要担心的事情，比如公司没有这么一个会做视频的人…..

幻灯片图片动画

相信大家小时候都玩过书角动画（也叫手翻书），每一页的动画都有细微的差别，快速翻过由于视觉停留的缘故，看起来就像连续不间断的动画。H5动画广告也使用这种方法，在视频软件中制作特效后再导出为序列帧图片，设置时间间隔后让它们一张一张连续播放，再加一段音频字幕，完全可以以假乱真，假装自己是视频了。有的同学要问，那为什么不直接用视频呢？原因很简单，视频不能和用户交互呀！视频前端程序员不会做呀！对呀！不会做呀，那怎么导出连贯的静态图片？这个方案也不行，放弃。继续往下看吧。

补间动画和CSS3 3D转换

既然前2种方法中的视频制作对我们来说有些难度，那我们还是回归本质，运用自己最擅长的css和js来解决问题。

看到这张淘宝造物节作者的聊天记录截图，瞬间感觉被开启了新世界的大门，原来造物节广告是利用css3 3d转换实现的全景伪3d，不得不佩服这位设计师大神的智慧，把css3玩出了新的高度。他使用动画库jstween、css3d、陀螺仪orienter.js（用于横竖屏重力感应）等技术完成了这部作品。那我们先从简单的开始研究，jstween动画库是造物节作者自己封装的一个js动画库，适合设计大师的不一定适合自己，我们还是选个文档齐全点的来玩吧。要做补间动画最重要的就是timeline，GSAP的TimeLineMax库可以很方便的管理时间轴动画，但是GSAP提供了TweenLite.js、TweenMax.js、TimelineLite.js和TimelineMax.js 4个文件，不用一脸懵逼，下面就介绍一下这些引用库文件都是做什么的。

  • TweenLite 是GSAP的主体核心，它用于创建基本动画，是其他各类模块的基础。一般都会搭配plugins/CSSPlugin以实现DOM元素的动画（也就是我们最熟悉的动画了）。
  • TimelineLite 是一个叫做时间轴的动画容器，它用于对多个动画进行有序的组织与控制。
  • TimeLineMax 是TimelineLite的升级版，在TimelineLite的基础之上，可以有更高级的组织与控制。
  • TweenMax 是GSAP集合包，除前面3个之外，还包括plugins里的常用插件以及easing里的缓动函数补充。

因此，如果想要简单地引入GSAP的主体功能，使用TweenMax.js这一个文件即可。而如果要争取更小的库文件大小，应该使用TweenLite.js（必需）+ 其他文件的组合。下面是它们的重叠包含关系图。

搞明白这些概念之后，剩下的就简单了，只需要打开 文档 ，做几个Deom就什么都会了（毕竟更深的东西暂时也用不到）。下面给出一个简单的时间轴实现代码，只需要to to to to…..就完成了，是不是很容易。

1
2
3
4
5
var tl = new TimelineLite();
tl.to($box, 1, {x:50,y:0})
  .to($box, 1, {x:50,y:50})
  .to($box, 1, {x:-50,y:50})
  .to($box, 1, {x:-50,y:0});

GSAP还非常贴心的给出了一份包含丰富参考代码的 备忘单（Cheat Sheet）。

真正的3D动画webGL库—threejs

在H5内想实现空间变换和推拉的效果，面对很多素材的大型场景时，灵巧的css3 3d空间变换显得十分吃力。为了更好的效率和流畅的体验，可以选用webGL来绘制3D场景，通过3DMAX、玛雅等工具建模后导入3d模型进行外部模型加载。

制作三维场景的基本要素：

  1. 场景（Scene）：模型、灯光等；
    场景就是要在三维中显示的内容，好比电影中的场地、演员、道具，有了场景就知道要在三维中显示什么内容。

  2. 相机（Camera）：观察场景的视角；
    相机是用来观察场景的视角，好比电影中的摄像机，有了相机元素才能把场景中的内容获取下来，相机控制是场景交互和动画的基础。

  3. 渲染器（Renderer）：场景渲染输出的目标；

  4. 渲染（render）：执行渲染操作；

下面有一个简单的使用three.js实现3d模型的详细例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 创建场景元素对象
var scene= new THREE.Scene();  
// 模型对象（100,100,100分别为长宽高）
var geometry= new THREE.BoxGeometry(100,100,100);  
//材质对象 （红色的材质）
var material= new THREE.MeshLamberMaterial({color: 0xff0000}); 
// 添加网格模型
var mesh= new THREE.Mesh(geometry,material); 
//将mesh对象加入场景中
scene.add(mesh) ;
// 添加灯光（白色的点光源）
var light= new THREE.PointLight(0xffffff) ;
// 设置光源的位置
light.position.set(300,400,200);
// 将光源加入场景之中
scene.add(light);
// 创建相机对象（透视相机）
var camera= new THREE.PerspectiveCamera(40,800/600,1,1000);
// 设置相机的位置
camera.position.set(200,200,200);
// 将相机朝向场景的中心
camera.lookAt(scene.position);
// 创建WebGL渲染器
var renderer= new THREE.WebGLRenderer();
// 设置渲染器的尺寸
renderer.setSize(800,600);
document.body.appendChild(renderer.domElement);
//渲染 场景和相机
renderer.render(scene,camera);

总结：实际上H5广告的技术并不算难，工作量基本耗费在美术素材上，有点人海战术的意思，依靠大量元素的视觉轰炸来达到惊艳的视觉体验。

请zkzhao喝杯咖啡作为鼓励！