一起炫起来 -- 3D粒子动画篇
作者简介 Coco 蚂蚁金服·数据体验技术团队
效果演示
3D粒子动画效果如下：
embed: sky.mov
本示例所构成并不复杂，主要分成以下几部分：
- 渐变的背景
- 不断切换的3D粒子模型(入场的散点也是粒子模型的一种形态)
- 同时切换的文字
实现主要是基于threejs做的，接下来我会分别讲解各部分的实现，不过不会介绍基础。基础内容可以去官网找到~
渐变的背景
scene的background可以接收Color、Texture或CubeTexture。在本示例中，我们使用Texture就可以达到渐变效果。Texture可以接收canvas或图片，此处我们使用canvas画出渐变效果，具体代码如下：
const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const context = canvas.getContext('2d');
const gradient = context.createLinearGradient(0, 0, width, 0);
gradient.addColorStop(0, '#4e22b7');
gradient.addColorStop(1, '#3292ff');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
const texture = new THREE.Texture(canvas);
texture.needsUpdate = true;const scene = new THREE.Scene();
scene.background = texture;
复制代码减少模型粒子数
接下来给大家介绍的是一个黑科技——减少模型粒子数。通常情况下设计师会给你符合设计稿内所需的模型，粒子数不会比你所需的多，但凡是有例外的时候。另外，粒子的多少是影响性能的关键之一，在这个示例中我测试过1W个粒子就使动画有卡顿感(当然这还跟运行的本本性能有很大的关系)。如果你正好有这方面的烦恼，那这个方法或许对你有用。
实现思路：在X,Y,Z轴上分别计算相邻点之间的距离，如果大于距离小于设定值则删除。具体代码如下：
// pos为粒子的数据，单项数据分别含x,y,z坐标值 {x, y, z}
const all = [];
const yObjs = {};
const xObjs = {};
const zObjs = {};// 对所有点按照x,y,z值进行分组，分组后的数据分别存在xObjs,yObjs,zObjs
for (var i = pos.length-1; i>=0; i--) {const p = pos[i];const yKey = getKey(p.y);const xKey = getKey(p.x);const zKey = getKey(p.z);if (!yObjs[yKey]) { yObjs[yKey] = []; }if (!xObjs[xKey]) { xObjs[xKey] = []; }if (!zObjs[zKey]) { zObjs[zKey] = []; }const item = {x, y, z, r, g, b};yObjs[yKey].push(item);xObjs[xKey].push(item);zObjs[zKey].push(item);all.push(item);
}// 对x,y,z值进行排序
const xKeys = orderAscKeys(xObjs);
const yKeys = orderAscKeys(yObjs);
const zKeys = orderAscKeys(zObjs);// 提取在x,y,z轴上需删除的坐标值
const xDels = getDelKeys(xKeys, 4); // 4为点与点的间距
const yDels = getDelKeys(yKeys, 4);
const zDels = getDelKeys(zKeys, 4);const result = [];for (var i = all.length-1; i>=0; i--) {const item = all[i];if ( !(xDels.indexOf(getKey(item.x))>-1 || yDels.indexOf(getKey(item.y))>-1 || zDels.indexOf(getKey(item.z))>-1 )) {result.push(item);}
}return result;function getKey(x) {let r = x.toFixed(1);if (r==='-0.0') {r = '0.0'}return r;
} function orderAscKeys (obj) {return Object.keys(obj).sort((a, b)=>{return Number(a) - Number(b);});
}
function getDelKeys(keys, d) {const dels = [];keys.reduce((prev, curr, idx)=>{let res = curr;if (curr-prev < d) {dels.push(curr);res = prev;}return res;});return dels;
}
复制代码注：此方法只有对粒子排序比较整齐的模型，如果模型本身的粒子排序混乱使用此方法的效果可能会不理想。
模型切换动画
创建粒子对象
在整个动画效果中，粒子通过变换位置流畅的组合着各个模型，如何做到这一点呢？
如果你给每个模型都 new Geometry出来，这回让你手忙脚乱，而且效果不理想。比较好的处理方式是将这5个模型用一个Geometry，通过改变vertices属性来达到模型的变换。不过有一点需要注意，vertices属性可以改变里面每一项的值，但不能在定义之后再新增项的数量。这就要求我们在最初定义Geometry的vertices的值个个数必须是几个模型中点数最多的那个。
const config = this.config;
const textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = '';
const mapDot = textureLoader.load('img/gradient.png'); // 圆点
this.mapDot = mapDot;const geometry = new THREE.Geometry();const count = config.totalCount; // 四个模型中最多个粒子总数值
for (let i = 0; i < count; i++) {let x = 0, y = 0, z = 0;x = Math.random() * 2000 - 1000;y = Math.random() * 2000 - 1000;z = Math.random() * 8000 - 4000;geometry.vertices.push(new THREE.Vector3(x, y, z));geometry.colors.push(new THREE.Color(1, 1, 1));
}const material = new THREE.PointsMaterial({size: 20,map: mapDot,depthTest: true,alphaTest: .1,opacity: 1,side: THREE.DoubleSide,transparent: !0,vertexColors: THREE.VertexColors,
});
const points = new THREE.Points(geometry, material);// 调整模型姿势
points.rotation.z = Math.PI;
points.rotation.y = Math.PI;
points.rotation.x = -Math.PI * .3;points.position.y = 240;
points.position.x = 100;
points.position.z = 240;
this.scene.add(points);this.points = points;
复制代码webGL采用右手坐标系，而canvas二维坐标系是x轴往右延伸、y轴往下延伸，因为存在这样的差异直接通过图片生成的3维模型会是倒的。在实际处理的时候我们可以通过模型的整理做调整，也可以换算每个点的坐标值。具体做法可以根据实际想要的效果来选择。
坐标系的差异，如图：
状态切换
整个动画过程中有以下几种状态：
- 入场前奏动画(即散点状态)，用于数据准备和动画过渡效果
- 模型切换动画进行时
- 模型切换间隔休息时
状态的管理与切换具体代码如下：
// 一切模型都已经准备妥当
if (this.objectsData && this.points && this.index !== undefined) {const config = this.config;const len = config.objs.length;const idx = this.index % len; // 当前模型序号const item = this.objectsData[idx];const geometry = this.points.geometry;this.points.material.needsUpdate = true;geometry.verticesNeedUpdate = true;geometry.colorsNeedUpdate = true;// 前奏因数据准备时间不较长，不额外加延迟时间const delay = (this.index === 0) ? config.delay * 60 * 0 : config.delay * 60;if (item.waiting < delay) {// 等待时间，包含了前奏(1)和切换间隔时间(3)item.waiting++;} else if (item.waiting >= delay && item.count < config.totalCount - 1) {// 动画进行时(2)let nd;if (item.count === 0) {config.onLeave && typeof config.onLeave === 'function' && config.onLeave();nd = idx;const prevIdx = (idx - 1 > -1) ? idx - 1 : len - 1;const prev = this.objectsData[prevIdx];if (prev) {// 执行下一个模型切换动画时，将前一个的执行时计数和休息时计数都归零prev.count = 0;prev.waiting = 0;}}// 执行动画this.particleAnimation(this.points, item, nd);} else if (item.waiting >= delay && item.count >= config.totalCount - 1) {// 切换到下一个模型this.index++;}}
复制代码执行动画
模型切换动画执行时时按批执行的，并不是所有粒子一起开始运动的。
这样做的好处是：
- 避免出现因单位时间(16.67ms)内因计算量过大而出现画面卡顿感；单位时间是由requestAnimationFrame执行的频率决定的。
- 分组动画会让动画更有层次感
/*** points: 粒子对象* item: 当前模型数据* idx: 当前模型序号*/
particleAnimation(points, item, idx) {const geometry = points.geometry;const vertices = geometry.vertices;const colors = geometry.colors;const len = vertices.length;if (item.count >= len) { return; }if (!item.vTween) {item.vTween = [];}const config = this.config;let isOdd = this.index % 2===0;// 每组动画执行的粒子个数const cnt = 1000;for (let j = item.count, l = item.count + cnt; j < l && j < len - 1; j++) {const n = j % item.length;const p = item.data[n];if (!p) { return; }// TWEEN只new一次，减少多次实例化的开销if (!item.vTween[j] && vertices[j]) {item.vTween.push(new TWEEN.Tween(vertices[j]).easing(TWEEN.Easing.Exponential.In));}item.vTween[j].stop();// 奇偶序号的模型位置不一样，调整x坐标数据const x = (isOdd) ? p.x : p.x-400;item.vTween[j].to({ x, y: p.y, z: p.z }, config.speed).start();}item.count = item.count + cnt;
}
复制代码TWEEN是一个补间动画库，使用方法也很简单，详情参见说明文档。TWEEN提供了以下几种方式，可以自行替换使用，如图：
结束语
文字部分的动画是用css3实现的，网络上已经很多有关css3动画相关的文档就不再详述，这里就简单列出相关样式代码以作参考。
.leaving {transition: transform .7s, opacity .7s;transform: translate3d(0px, -205%, 0);opacity: 0;
}
.entering {transition: opacity .7s;opacity: 1;
}
复制代码至此整个动画效果中可能遇到的问题都已经一一阐述，有兴趣的同学可以自动动手尝试一下。如有更好的实现方式欢迎提出来共享。
感兴趣的同学可以关注专栏或者发送简历至'shanshan.hongss####alibaba-inc.com'.replace('####', '@')，欢迎大家加入~~
原文地址：github.com/ProtoTeam/b…
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！