这个网站（minimal-portfolio-swart.vercel.app）发现一个不错的交互效果，用户体验效果很不错。如上图所示，这个卡片上有一根白色的线条围绕着卡片移动，且在线条的卡片内部跟随这一块模糊阴影，特别是在线条经过卡片圆角部分有特别丝滑的感觉。

今天的文章就来解析如何实现这种效果，文末附源码预览地址。根据示例图片分析需要实现的功能点如下：

• 线条跟随卡片边框匀速移动
• 线条内部对应有模糊阴影
• 圆角部分丝滑动画

这里为什么单独说明圆角部分是因为这块需要特殊处理，请看后面的文章。

思考

看到这个效果首先感觉是丝滑，沿着边框移动的动画元素如果是根据当前边框实时计算而来的话，那么难度和算法会劝退很多人。

需要换一种思路，本质移动的线条元素和边框并没有关系，而是一个元素沿着边框移动，线条和卡片内部的阴影就是一个元素，通过某种透视的方式产生了这种效果。

透视

通过透视的方式实现一个边框效果，我们可以用2个盒子嵌套，父级设置1像素的padding，如下代码简单的实现一个边框效果。

.outer {
  width: 400px;
  height: 200px;
  margin: 100px;
  background: rgb(54, 224, 202);
  padding: 1px;
  position: relative;
}

.inner {
  background: rgb(99, 99, 99);
  width: 100%;
  height: 100%;
}

效果图：

然后增加一个子元素作为移动的元素，这个元素基于父级定位在边框位置，由于动画是沿着卡片内部四周移动，要确保在每一条边上的透出的长度保持一致，所有创建的这个子元素是一个正方形。

.moving-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: #fff;
    animation: moveAround 8s linear infinite;
}

并对这个元素增加简单的animation动画，沿着内边框移动。

这个动画需要注意的一个点是要使元素在移动的过程中保持匀速的动画，需要计算每个关键帧之间的距离，并根据这些距离来调整每个关键帧的百分比。这样可以确保元素在每个时间段内移动的距离与时间成正比，从而实现真正的匀速移动。

这里我们以上面的卡片举例，其宽度为400px，高度为200px，元素沿矩形的边框移动。

• 计算总路径长度：总长度 = 2 (宽度 + 高度) = 2 (400px + 200px) = 1200px
• 计算每段所占的时间比例：水平边所占比例 = 400px / 1200px = 1/3 ≈ 33.33%，垂直边所占比例 = 200px / 1200px = 1/6 ≈ 16.67%

动画代码如下：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: calc(100% - 80px);
    }
    50% {
        top: calc(100% - 80px);
        left: calc(100% - 80px);
    }
    83.33% {
        top: calc(100% - 80px);
        left: 0px;
    }
}

最终完成的简单版动画效果如下：

这里为了方便大家看增加了透明度展示内部移动的元素，若去掉透明度则只有边框上的一根线。

边框效果处理

仔细看上面的图可以发现在边框尽头时的过渡效果不好，瞬间从一条边切换到另一条边。首先还原网站的效果，增加边框圆角，然后将内部移动的元素通过圆角变成一个圆形，这时候还需要同步调整内部元素的定位和动画移动时设置的定位，保证内部圆形的中心和边框的一致。

增加圆角处理：

.outer {
  border-radius: 20px;
}

.inner {
  border-radius: 20px;
}

.moving-element {
  border-radius: 40px;
  /* 圆心和边框一致 */
  transform: translate(-40px, -40px);
}

调整动画过程中的定位：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    83.33% {
        top: 100%;
        left: 0px;
    }
}

此时的动画效果：

此时的边框位置动画已经很接近网站的效果，进一步观察在图中的效果可以发现在边框角落的位置有一点卡顿的感觉，这是因为边框位置我们设置了圆角，但是元素移动的轨迹是直角，导致视觉上停顿了一下。这里我们需要进一步优化animation。设置圆角后内部动画元素移动的点应该从4个变成8个，且对应的位置需要和圆角的大小一一对应才能保障流畅的动画效果。

如下所示黑色圆点是到四个顶点的动画坐标，新的绿色圆点是基于圆角后的动画移动坐标。

基于上面的动画百分比算法计算出最新的比例及坐标代码如下：

@keyframes moveAround {
  0% { left: 40px; top: 0px; }
  28.93% { left: 360px; top: 0px; } 
  33.99% { left: 400px; top: 40px; } 
  44.82% { left: 400px; top: 160px; }
  49.88% { left: 360px; top: 200px; } 
  78.81% { left: 40px; top: 200px; }
  83.87% { left: 0px; top: 160px; } 
  94.70% { left: 0px; top: 40px; } 
  100% { left: 40px; top: 0px; } 
}

这里的动画需要注意的是圆角部分绿色按钮之间的动画距离需要使用使用勾股定理计算。比如右上角的两个点之间的计算方式是：

从 (360, 0) 到 (400, 40) = √((400-360)² + (40-0)²) = √(1600 + 1600) = √3200 ≈ 56.57px

此时的动画效果：

模糊阴影

现在就差最后的阴影部分还未实现，仔细观察移动的线条并不是全实心纯色，而是有渐变的效果，目前移动的元素是一个正方形，设置背景色为径向渐变即可，修改背景色的代码如下：

background-image: radial-gradient(#fff 40%,transparent 80%);

现在还需要将内部的渐变进一步模糊，注意这里仅仅是模糊元素背后的背景，不能影响卡片上面其他的元素内容展示。这里我们使用backdrop-filter设置blur模糊效果。

CSS属性 backdrop-filter 用于在元素后面的区域上应用图形效果（如模糊或颜色偏移）。这个属性可以让你对元素背后的背景进行处理，而不影响元素本身的前景内容。

最后进一步调整颜色还原网站的效果如下：

这个效果不仅可以做卡片展示，作为按钮的背景效果也很不错：

最后

到此整体的代码实现过程就结束了，完整还原的网站的动画效果。这是一个对用户体验很不错的卡片效果，原网站实现的部分细节不一样，整体实现原理差不多，基于两个元素的1像素间距透出移动的线条，配合使用backdrop-filter设置纯背景模糊效果，有兴趣的可以尝试看看。

作者:南城

来源-微信公众号:南城大前端

出处:https://mp.weixin.qq.com/s/g-_3iD97PxmGL7RGwRrSvg

括来说，用 HT for Web 做可视化主要分为两部分，也就是 2D 和 3D。这两部分需要单独创建。在它们被创建完成后，我们再把它们集成到一起。

HT for Web 的 2D 部分主要是指 ht.graph.GraphView (简称 GraphView，也就是 2D 图纸)。所谓 2D 图纸其本质是一个 canvas。我们可以在上面进行基本图形的绘制和编辑，进行连线布局，或者渲染动画。GraphView 可以脱离开 3D 单独使用，比如用于创建普通网页，组态软件，组织图，流程图等。

本节我们主要以一个示例说明一下 2D 图纸的基本概念、功能及用法。其主要包括以下几部分：

• 创建2D 图纸 -（GraphView）
• 添加节点 -（ht.Node）
• 坐标系与坐标转换
• 添加连线 - （ht.Edge）
• 动画 - ht.Default.startAnim()

创建2D 图纸 -（GraphView）

通过 new ht.graph.GraphView() 便可创建一张图纸。创建完图纸后，对于 HT 视图组件，可以通过 GraphView.addToDOM() 方法将其添加到 DOM 中。addToDOM() 方法本身接收一个参数。如果为空，则默认添加到 body 下面。也可以通过传递一个 div 将 2D 图纸固定到页面的某个位置。

对于新创建的图纸，其默认具有缩放、平移、编辑，以及框选等属性。我们可以根据需要对其进行启用或禁用。

与其他视图组件一样，如果不指定 DataModel, GraphView 自身也会创建一个空的 DataModel 容器用来管理所有添加到其里面的各种图元。通过 GraphView.getDataModel() 或 GraphView.dm() 可以获取该容器。对于 GraphView，它支持通过 DataModel.setBackground() 来配置图纸的背景颜色。

/*************** 创建一张 2D 图纸，添加到 body 下，并配置各种属性 ******************/
const gv = new ht.graph.GraphView();
gv.addToDOM();
gv.setZoomable(true); // 可缩放，默认：true
gv.setPannable(true); // 可平移，默认：true
gv.setEditable(true); // 图纸上的 Node 是否可编辑，默认：true
gv.setRectSelectable(true); // 是否允许对 Node 进行框选，默认：true
const dm = gv.getDataModel(); // 获取图纸的 DataModel，简写形式：gv.dm()
dm.setBackground('#DADADA'); // 同 dm.setBackground('rgba(218, 218, 218, 1)');

为什么要通过 DataModel 来设置图纸的背景而不是直接操作 GraphView 本身？

在第一节我们提到过，为了能将我们创建的 2D/3D 数据保存与恢复，可以通过对 DataModel 进行序列化与反序列化来实现。注意，这里的序列化操作针对的是 DataModel 而不是视图组件。因此，像如 GraphView 这种视图组件，其背景颜色这种显示属性需要通过配置到 DataModel 才能保存下来。而像缩放，平移等操作属性，则需要根据项目运行需要单独配置。

添加节点 -（ht.Node）

有了 2D 图纸的 DataModel，我们便可以向其添加节点或者叫图元。这里我们添加了两个机柜图标。

/**************** 分别创建两个 HT 节点并添加到图纸中 ************************/
const server1 = new ht.Node();
server1.setSize(40, 100); // 节点宽高。应当根据图片比例设置，不然会出现拉伸效果
server1.setPosition(100, 100); // 节点位置。左上角为（0，0）坐标
server1.setImage('assets/server.png'); // 节点图片
server1.setName('Server 1'); // 显示名称
dm.add(server1); // 添加到 DataModel中，也就是添加到图纸中
const server2 = new ht.Node();
server2.setSize(40, 100);
server2.setPosition(250, 100);
server2.setImage('assets/server.png');
server2.setName('Server 2');
dm.add(server2); // 注意一定要添加到 DataModel 中

在传统前端（Vue, React, HTML）的开发过程中，要添加一个节点，我们往往需要先手动创建该节点（如添加一个 icon）并添加到 HTML 下面。然后通过数据绑定对该节点进行操作。而在 HT 中，我们只需要将新增的节点添加到 DataModel 下面。HT 的视图组件会监听 DataModel 的变化，自动触发重新渲染操作。我们对节点的所有样式风格配置和操作都可以直接在节点上进行。

节点配置

ht.Node（简称为 Node）是 2D 图纸和 3D 场景呈现节点图元的基础类，它继承自 ht.Data。在 ht.Data 的基础上，其又新增了位置，大小，旋转，缩放，吸附等属性。这些属性都可以通过 set*/get* 来设置和获取。

在 GraphView 中，新增一个 ht.Node 节点，默认其会显示一个电脑图片。我们可以通过 setImage(image) 方法来更改。如在上例的代码中，我们找了一个机柜照片并将它给了新增的节点。

由于机柜图片可能很大，我们可以通过 setSize(width, height) 来对节点大小进行控制。通过配置不同的宽高还可以实现拉伸效果。如果不想要拉伸效果，则可以根据原始图片宽高比来设置节点的大小。

坐标系与坐标转换

添加的节点如果不指定位置，其默认会被放到（x: 0, y: 0）点。通过 Node.setPosition(x, y) 或 Node.p(x, y) 可以控制节点的位置。通过 Node.getPosition() 或 Node.p() 可以获取其坐标。在 GraphView 中，如果不手动修改节点的坐标，其在 GraphView 中的位置便是固定不变的。

由于 GraphView 本身具有缩放、平移等属性，因此其里面的节点显示在浏览器上的位置是不固定的。因此我们可以知道 GraphView 的坐标系与浏览器的坐标系是不一样的。

实际上，GraphView 采用的是一个相对坐标系，其方向与 canvas 一致，即左上角为（0, 0）点。往右为 x 轴的正方向，往下为 y 轴的正方向。通过以下两个方法可以在 GraphView 坐标与浏览器坐标之间进行转换。

• GraphView.getLogicalPoint(event): 传入 HTML 事件对象，将浏览器坐标转换为 GraphView 中的逻辑坐标
• GraphView.getScreenPoint(point, y): 传入 GraphView 中的坐标，转换为浏览器坐标

添加连线 - （ht.Edge）

在添加了两个机柜图标之后，我们现在用连线将他们连接起来。HT 中的连线是用 ht.Edge 实现的。

ht.Edge 类型（简称 Edge）用于连接起始和目标两个 Node 节点，两个节点间可以有多条 Edge 存在，也允许起始和目标为同一节点。 可通过 new ht.Edge(source, target) 直接在构造函数中传入 source 和 target 节点对象，也可构建 Edge 对象之后再分别设置。

• getSource() 和 setScource(node) 获取和设置起始节点
• getTarget() 和 setTarget(node) 获取和设置目标节点
• isLooped() 判断连线的起始和目标是否为同一节点

/****************************** 创建连线 *************************************/
const edges = [];
// 创建三条连线连接 server1 和 server2
edges.push(createEdge(4, 'green', 6, 'yellow', [20, 10]));
edges.push(createEdge(3, '#fff', 3, '#000', [10, 10])); // 黑白线
edges.push(createEdge(10, 'rgb(51,153,255)', 5, 'rgb(242,83,75)', [5, 10])); // 红蓝线
function createEdge(width, color, dashWidth, dashColor, pattern) {
  const edge = new ht.Edge(server1, server2);
  edge.s({
    'edge.width': width, // 连线宽度
    'edge.gap': 30, // 连线与连线的距离
    'edge.color': color, // 连线颜色。也可使用 rgb 或16进制颜色
    'edge.dash': true, // 是否使用虚线
    'edge.dash.width': dashWidth, // 虚线宽度
    'edge.dash.color': dashColor, // 虚线颜色
    'edge.dash.pattern': pattern, // 虚线与连线的占比。[虚线, 连线]
    'edge.offset': 0, // 偏移
  });
  dm.add(edge); // 注意一定要添加到 DataModel 中
  return edge;
}
// 创建第四条连线用于 server1 自连线
const edge = new ht.Edge();
edge.setSource(server1);
edge.setTarget(server1);
edge.s({
  'edge.width': 5, // 连线宽度
  'edge.gap': 30, // 连线与连线的距离
  'edge.color': 'pink', // 连线颜色。也可使用 rgb 或16进制颜色
  'edge.dash': true, // 是否使用虚线
  'edge.dash.width': 5, // 虚线宽度
  'edge.dash.color': 'purple', // 虚线颜色
  'edge.dash.pattern': [10, 10], // 虚线与连线的占比。[虚线, 连线]
	'edge.offset': 0, // 偏移	
});
dm.add(edge); // 注意一定要添加到 DataModel 中
edges.push(edge);

上面的代码创建了4条 Edge，其中前三条分别是连接 server1 和 server2，第四条是 server1 自连接。ht.Edge 的属性主要是由 edge.s() 方法来配置，该方法是 edge.setStyle() 的简写形式。edge.s() 主要用来配置节点内置的属性。HT for Web 引擎会根据属性键值来渲染不同的效果。如果想要设置自定义属性，需要使用 edge.a() 来实现。

与 ht.Node 相同的是，ht.Edge 也是由 ht.Data 扩展而来。但在大部分情况下，其又有自己的特点：

需要设置起始节点和目标节点。二者可以为同一个节点（如上例最后一条 Edge）。

缺少起始或目标节点的 Edge 不会在图纸上显示。

Edge 会跟随节点移动。也就是说当我们拖动起始节点和目标节点的时候，其所相关的 Edge 会跟随移动。

由于 Edge 的位置由两个端点决定，因此 Edge 不支持 getPosition()/setPosition() 方法。同样的，其宽度是在 edge.s() 中配置的，因此 Edge 也不支持 getSize()/setSize() 方法。

除了上面示例中的配置，ht.Edge 还支持自定义连线类型。如果嫌麻烦，也可以使用 HT 内置的十几种连线类型，如 edge.s(’edge.type’, ‘boundary’) 就代表连线仅连接到图元矩形边缘。如果要使用内置连线类型，需要引入连线类型插件：

<script src="../../lib/plugin/ht-edgetype.js"></script>

在创建了连线后，如何让它们流动起来呢？这里就用到了动画功能。

动画 - ht.Default.startAnim()

要实现动画功能，不外乎有这样几个关键属性：动画播放时长，播放过程中的属性变化，播放完的回调事件。

HT 支持多种方式来实现动画。这里我们选择一种比较常用的。先来看代码：

/****************************** 连线动画 *************************************/
const animParams = {
  // frames: 12, // 动画帧数
  // interval: 10, // 动画帧间隔毫秒数
  duration: 2000, // 动画播放时长
  easing: function(t){ return t * t; }, // 动画缓动函数，默认采用`ht.Default.animEasing`
  finishFunc: function(){
  	ht.Default.startAnim(animParams);
  }, // 动画结束后调用的函数。
  action: function(v, t){ // action函数必须提供，实现动画过程中的属性变化。
    // v代表通过easing(t)函数运算后的值，t代表当前动画进行的进度，范围：[0~1]
    edges.forEach((edge, index) => {
      const direction = index%2 == 0 ? 1 : -1;
      edge.s('edge.dash.offset', t * 20 * direction);
    });
  }
};
ht.Default.startAnim(animParams);

这里 HT 用于播放动画的方法是 ht.Default.startAnim(animParams)，该方法会返回一个 anim 对象，可调用anim.stop(true) 终止动画。同时 anim 还具有 anim.pause() 和 anim.resume() 方法可用来中断和继续动画功能， 以及 anim.isRunning() 函数判断动画是否正在进行。

该方法所使用的参数也很简单：

• duration: 动画播放时长。如果想精确地控制动画播放帧数及帧间隔，我们也可以用 frames + interval 的形式来控制动画播放。
• easing: 缓动函数。使用数学公式来控制动画播放的速度与快慢。
• finishFunc: 播放完回调。在动画结束后，该方法会被执行。
• action: 动作控制。节点的哪些属性需要变化都是在这里定义。如控制节点的位置，旋转，大小等。在动画执行过程中的每一帧都会调用一次该方法。其中的两个参数分别是：
• t: 代表当前动画进行的进度。其范围是从开始执行0到执行结束1。该值的变化随着时间前进，是相对均匀的。如果我们想要动画匀速执行，这里可以用 t 来实现。
• v: 代表通过 easing(t) 函数运算后的值。其范围在大部分情况下也是从0到1。但是这里的 v 值在变化上由 easing(t) 函数决定，不一定是均匀的。对于有的缓动效果，如 easeOutBack () ，其 v 值在中间阶段就可能大于1。如果想要在动画中使用缓动效果，这里就需要使用 v 参数来控制属性变化。

小结

本节我们主要介绍了 HT for Web 图纸的创建与基本配置。在 GraphView 中，我们可以向其 DataModel 添加 ht.Node 来绘制机柜。通过 Node.setPosition(x, y) 或 Node.p(x, y) 方法可以控制节点的位置，并通过 Node.getPosition() 或 Node.p() 方法来获取其坐标。同时，GraphView 中的坐标系与浏览器坐标系不同，我们可以使用 GraphView.getLogicalPoint(event) 和 GraphView.getScreenPoint(point, y) 方法在两种坐标系之间进行转换。

对于连线，我们使用 ht.Edge 类型表示。创建 ht.Edge 对象时需要传入起始节点和目标节点，同时可以通过 edge.s() 方法配置其属性，如宽度、颜色、虚线等。在创建多条连线后，我们可以使用 ht.Default.startAnim(animParams) 方法来实现连线动画，其中 animParams 是一个对象，包含动画播放时长、缓动函数、动画结束回调函数和动作控制函数等参数。