PIXIJs实战之角色关系图

阅文前端团队阅文前端团队

前言

最近手上有个项目，要翻新一个旧的角色关系图页面，需要优化展示角色关系，凸显人物及其关联关系。下面让我们看看设计师给出的效果。

初次看到这个时，其实心理状态是这样的。

冷静下来，分析一波，也不是很难。

下面，一步步解析下是如何实现这样的一个页面的。

1.整体分析

首先，面对一个复杂的内容不能盲目下手。拆分开来看看整个页面包含哪些内容，决定下整体方向。

从层级上划分，包含三个部分：背景层，角色关系层，角色信息层。

角色信息：没有过多的动效和重复渲染，直接用 Dom 元素去实现，方便简单。

角色关系层 & 背景层：单看云雾背景，第一感觉可以用 3D 引擎去实现整体背景，比如 THREEJS，但对于一个单页面 THREEJS 的体量未免过重，页面内容本身更符合 2D。所以，在技术选型上选择了 2D 渲染库-- PIXIJS。PIXIJS 在 2D 渲染速度方面是最快的，同时 PIXIJS 封装了非常丰富的API可以使用，方便对不同的渲染对象进行属性设置、修改。动效方面，可以搭配 TWEENJS 设定要修改的属性，轻松实现各种动画效果。

对需求进行拆解及分析之后，选定了使用 PIXIJS 实现。梳理一下整体的实现思路：页面引入 PIXIJS，创建应用（app）及舞台（stage），根据不同层级对展示内容进行拆分，分别实现得到每层的可视化对象，最终归集于舞台上渲染展示。具体见下图：

2.具体实现

2.1 创建舞台

应用（app）：会自动选择使用 Canvas 或者是 WebGL 来渲染图形，这取决于浏览器的支持情况。

舞台（stage）：所有要渲染的可视化对象都需要添加到舞台中才能被显示出来，舞台是可视化对象的根容器，也是整个树形渲染结构的最底层。具体如下：

const app = new PIXI.Application({    width: windowWidth,    height: windowHeight,    antialias: true,    resolution: devicePixelRatio,    transparent: true,})app.renderer.autoDensity = trueapp.renderer.resize(windowWidth, windowHeight)document.getElementById('container').appendChild(app.view)app.stage.sortableChildren = true

概念解释

antialias：使字体和图形边缘更加平滑。
resolution：设置分辨率，决定了Canvas 的实际宽高（即 width/height ）。
autoDensity：属性设置为 true，使 Canvas 视图的 CSS 尺寸自动调整为屏幕尺寸(即 canvas.style.width/height )。
sortableChildren：属性设置为 true，舞台内的子元素将按设置的 zIndex 值排序（默认的 zIndex 为0。

*需要注意的是，resolution 越大 Canvas 需要绘制的区域就越大，这会拖慢整体加载及渲染速度。即使这样做可以保证足够的清晰度，但仍需开发人员自己衡量、优化。

2.2 创建背景

背景主要分为三层：云雾、星空以及地

2.2.1 云雾

对于云雾背景，通过查找网络示例，使用着色器编写效果是最好的。

图为通过噪声模拟的云雾纹理

而 PIXIJS，正好也提供了一种特殊的着色器 Filter ，它将后期处理效果应用于输入纹理，并写入输出渲染目标。简单讲，我们可以完全自定义纹理效果并轻松的展示它。

首先来创建渲染目标及Filter：

const background = new PIXI.Sprite()background.width = this.app.screen.widthbackground.height = this.app.screen.heightthis.app.stage.addChild(background)
this.filter = new PIXI.Filter(null, fogFragment, {  uResolution: {    x: this.app.screen.width * devicePixelRatio,    y: this.app.screen.height * devicePixelRatio,  },  uTime: 0,})background.filters = [this.filter]

创建好 Filter 后，很重要的一步是要传入更新时间，使其随着时间去渲染以实现云雾飘动的效果。

update() {  this.filter.uniforms.uTime += 0.01}

具体的着色器代码如下：

void main() {  const vec3 c1 = vec3(0.110, 0.110, 0.137);  const vec3 c2 = vec3(0.133, 0.149, 0.247);
  vec2 p = gl_FragCoord.xy * 8.0 / uResolution.xx;  float q = fbm(p - uTime * 0.1);  vec2 r = vec2(fbm(p + q + uTime * 0.4 - p.x - p.y), fbm(p + q - uTime * 0.7));  vec3 c = mix(c1, c2, fbm(p + r));  float grad = gl_FragCoord.y / uResolution.y;  gl_FragColor = vec4(c * cos(1.4 * gl_FragCoord.y / uResolution.y), 1.0);  gl_FragColor.xyz *= 0.8 + grad;}

基本原理是使用噪声模拟云雾纹理，加以两种颜色混合渲染，实现云雾飘动的效果。更多细节这里不在叙述。（大家有兴趣可以去了解下 shader，那是一片美丽的新大陆）。

此时我们的页面已经有了第一层。可以看到，效果还是很自然、丝滑的。

2.2.2 星空

对于星空的实现思路稍微复杂点：多精灵复用+径向分布+相机运动。

首先是创建多精灵，很简单，循环创建即可。

// 循环创建精灵for (let i = 0; i < this.starAmount; i++) {  const star = {    sprite: new PIXI.Sprite(starTexture),    z: 0,    x: 0,    y: 0,  }  // 锚地设置居中  star.sprite.anchor.set(0.5)  this.randomizeStar(star, true)  // 加入舞台内  this.app.stage.addChild(star.sprite)  // 保留对象  this.stars.push(star)}

创建好每个星星后，使用正余弦函数计算同一随机弧度得出它们的 x，y 轴位置，以确保没有与相机位置（即 0，0）重叠的对象。这就是所谓径向分布。

randomizeStar(star, initial) {    star.z = initial      ? Math.random() * 2000      : this.cameraZ + Math.random() * 1000 + 2000
    // 随机分布在径向坐标上，确保没有与相机位置（即0，0）重叠的对象    const deg = Math.random() * Math.PI * 2 // 0～2PI    const distance = Math.random() * 60 + 1 // 距中心距离，越大越发散    star.x = Math.cos(deg) * distance    star.y = Math.sin(deg) * distance}

接下来，要让星空动起来。

相机运动，简单讲就是让相机随时间匀速推进（ z 轴坐标增加），并将星星的坐标由三维坐标投影至二维。同时，需要计算当前星星是否已经出镜（即 z 轴坐标小于相机坐标），出镜则重新初始化位置，以起到重复使用的作用。具体代码如下：

update(delta) {    this.cameraZ += delta * 10 * this.baseSpeed    for (let i = 0; i < this.starAmount; i++) {      const star = this.stars[i]      // 若z轴坐标小于相机，说明已出镜，重新计算位置      if (star.z < this.cameraZ) {        this.randomizeStar(star)      }
      // 三维坐标投影至二维      const z = star.z - this.cameraZ      star.sprite.x =        star.x * (this.fov / z) * this.app.renderer.screen.width +        this.app.renderer.screen.width / 2      star.sprite.y =        star.y * (this.fov / z) * this.app.renderer.screen.width +        this.app.renderer.screen.height / 2
      // 计算缩放      const distanceScale = Math.max(0, (2000 - z) / 2000) * this.starBaseSize      star.sprite.scale.x = distanceScale      star.sprite.scale.y = distanceScale    }}

让我们看看实际效果，还是很有代入感的～

*视频中星星数量为100，可根据实际使用进行调整。但要注意过多的渲染对象会增加渲染成本，拉低性能。

地球背景没有过多的动态效果，直接使用直接使用精灵贴图就好，这里不在叙述～

看一下整体效果。

做到这里，是不是感觉已经成功一半了呢～

2.3 创建角色及其关联关系

2.3.1 角色头像

对于角色，可以两个点切入：定位、绘制。

先从绘制入手，考虑到动效及交互，之后会更利于处理，头像合并绘制成一个对象，由四个部分组成：背景、头像图片、阴影遮罩及名称。

考虑到存在头像图片裁剪、文字超长省略等问题。使用 Canvas 绘制更为灵活和便捷。通过 Canvas 绘制出不同的头像和名称，Canvas 转换成 Texture 再加载为精灵图更为灵活和便捷。最后，添加到背景金圈中，形成一个整体。

const canvas = document.createElement('canvas')const texturePIXI.Texture.from(canvas)const roleSprite = new PIXI.Sprite(texture)

其次是定位问题，根据设计师描述，所有的角色分为了主角、关联角色两部分，其中关联角色又分为内圈 & 中圈角色各 6 个、外圈角色至多 24 个。

主角：定位在舞台中央即可。

内圈、中圈：不难看出，他们均匀的分布在圆周上，即每个角色之间的弧度为三分之一PI；

外圈：外圈比较特殊，虽然是至多摆放24个，但一屏内实际能看到的内容最多只有12 个，分布在上下两个半圆弧上，所有我们只需要计算出第一个点的位置，其余的可以通过它依次推理出来。

下面简单画了一个示意图：

通过 arctan 函数（反正切函数）计算出一个弧度值，这个弧度值即可以确定第一个角色的初始位置，同时它也代表前三个角色占位的总弧度，进而可以计算出固定的弧度间隔，依次计算出每个角色的弧度。

const h = this.screenHeight * 0.3const w = this.screenWidthconst atan = Math.atan(w / 2 / h)

2.3.2 角色关系

角色定位后，角色关系就很容易处理了。可以拆分为：连线和关系名称。

每个角色的圆心连线即关系连线，这一点很容易做到，只需要计算两两圆心间距在绘制线条即可

const widthTarget =Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2))-(this.ROLE_SIZE / 2)

注：这里连线是需要穿入关联角色的中心，故只剪去了主角的半径。至于层级顺序，上文提到过的每个对象的 zIndex 属性可以轻松解决。

对于关系名称，同样使用 Canvas 绘制文字，再转换为 Texture 加载。这样做的好处在于我们可以在绘制的同时，通过 ctx.measureText 方法拿到文字的实际宽度，以结合线条长度计算出文字相对线条的居中位置。

relation.position.set(  line.x + ((widthTarget - (v.effectiveWidth / 2) * operation) / 2) * Math.cos(rotation),  line.y + ((widthTarget - (v.effectiveWidth / 2) * operation) / 2) *Math.sin(rotation),)

细心的同学会发现这里多乘了一个operation，它是什么呢？

让我们看看去掉它的样子。

左侧的文字倒置了。脖子快扭断了才能看，体验是不是极差～

operation 就是处理这种情况的，对弧度在第二、第三象限绘制的文字进行镜像倒置。设置文字 scale 为 -1，就是指将渲染对象的 x、y 轴缩放 -1 倍，即实现镜像倒置。

另外，设 operation 为 -1。文字被镜像倒置后，原本的位置计算也发生相应的变化。

这样，文字摆放正常的同时依旧是居中的。

if (rotation < -Math.PI / 2 && rotation > (-Math.PI / 2) * 3) {  // 镜像倒转  relation.scale.set(-0.5)  operation = -1}

3.动画效果

当我们创建好舞台、背景以及处理好角色及其关联关系后，下一步就可以处理动画了。

角色的动画主要包括缩放、位移、旋转。使用 TweenJS 可以非常简单的实现每个对象的动画。

Tween.js，类似于 jQuery 的 animate 方法和 CSS3 动画。以平滑的方式修改元素的属性值。只需要告诉 TweenJS 你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，Tween 引擎就可以计算从开始动画点到结束动画点之间值，就可以产生平滑的动画效果。另外还有很多中缓动函数，帮助创作出更完美的动画效果。

3.1 动画实现

具体实现如同上文介绍的一样简单，下面是一个主角登场的动画，一看就懂：

const enterTween = new TWEEN.Tween(bg)      .group(this.innerGroup)      .to({ scale: { x: scaleTarget, y: scaleTarget }, rotation: 0 }, 300)

又例如外圈角色的转动动画，也只是简单的旋转，加以缓动函数辅助实现的，非常简单易懂。

const tween = new TWEEN.Tween(this.outer[i])    .to({ rotation: ro }, du)    .easing(TWEEN.Easing.Sinusoidal.InOut)    .delay(5000 - du)

其他动画效果都大同小异，在这里不一一叙述了。

最后，看下整体效果～

4.爬了一些小坑

4.1 适配问题

起初，全局所有对象的适配均是按照等比放大，但在例如 iPad Pro 等大屏设备上，角色头像显示的过大、内圈中圈角色偏移位置过大等等适配问题，整体美化度被大大折扣。

为解决这个问题，在舞台加载前，根据当前设备屏幕宽高和设计稿提供的宽高计算出一个基准值 Benchmark。

getBenchmark(w, h) {      return (        (innerWidth * h > innerHeight * w          ? (innerHeight * w) / h          : innerWidth) / 360      )}

后续的所有计算可以加入此系数，限制缩放、位置计算等使整体效果达到最优。

role.width = base * this.app.benchmarkrole.height = base * this.app.benchmark……const scaleTarget = s[i] * this.app.benchmark……const offsetX =  Math.cos(rotation) *   (this.app.benchmark * this.REFER_SHOW_SIZE) * coefficientconst offsetY =  Math.sin(rotation) *  (this.app.benchmark * this.REFER_SHOW_SIZE) * coefficient……const widthTarget =  Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)) -  (this.ROLE_SIZE / 2) * this.app.benchmark

4.2 创建背景 shader noise 算法兼容问题

在测试阶段，发现了一些 iOS 机型存在云雾背景渲染出错问题。很明显，是 iOS Safari 浏览器版本兼容问题。

持着这样的猜测去测试机上逐句调试 Shader 代码，最终发现并非某个 Shader 内置计算方法不支持，而是在噪声计算中，设置的 43758.5453 系数在低版本 Safari 浏览器中不支持，改为 537.5453 即可修复问题。本质上该参数只影响由正弦函数生成的伪随机数密度，不影响整体效果的展示。

float rand(vec2 n) {  return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 437.5453);}

4.3 外圈角色滚动不自然

最初的外圈转动实现，是修改 x，y 轴坐标。但如果把动画时间调长会发现动画很不自然。根本原因是同一时间内 x，y 轴的偏移量是不一样的。为了解决这个问题，重新制定外圈实现思路，通过计算弧度来进行定位、旋转弧度来实现动画效果。（具体见上文）

4.4 性能相关

在测试阶段，主要出现两点性能问题：

低端机略显卡顿
部分机型长时间运行发热的问题

下面找了两款配置差别较大的真机进行 GPU 呈现模式分析。

华为Mate30

小米5s

黄色——表示处理任务的时间，也可以说是CPU等待GPU完成任务的时间，线条越高表示 GPU 做的事情越多

红色——表示执行任务的时间，线条越高表示需要绘制的视图更多

蓝色——表示绘制视图列表所需要的时间，线条越高说明当前视图比较复杂或者无效需要重绘，影响帧率

绿色——包括测量、布局、动画、输入事件、主线程任务等等

绿色水平线——表示16ms线，每个柱形高度都小于它是最理想的

从整体趋势可以看出两款手机渲染均显示稳定（图形没有明显突变波动）。但低端机上整体性能略差。

红色和黄色部分任务都是由 CPU，GPU 负责处理，即使超出 16ms 线也不完全意味着页面卡顿。上图可以看出除了手机配置差异外，绘制的视图还是存在略多的问题，后期可选择合并渲染对象，减少渲染对象数量来优化。蓝色和绿色部分则是我们需要重点关注的，低端机的较差表现依旧可以认为是元素布局层级多，配置低效率差的原因。

另外，由于页面始终存在动画效果，总是不停歇的在渲染，长时间的高频渲染是部分机型长时间运行发热的根本原因。可以从闲时停止渲染着手优化，这里不再扩展。

5.总结

经历了如此复杂、细节满满的页面。学习到了很多没有接触过的知识。同时，也有几点感悟：

再复杂的事物，也都可以化繁为简，一一解决。
细节、细节、还是细节。

欢迎大家长按识别二维码或点击底部「阅读原文」体验线上成品：