【实战】流动的箭头 —— 线性流动组件（repeating-linear-gradient，@keyFrames）_前端流动箭头

---

一、引子

在大屏数据展示中，若是按节点展示在不同数据层的数据时，为了形象体现数据的流动效果，需要让节点之间，层与层之间用流动的虚线+箭头连接。

二、组件思路

正常情况下，数据需要从上个节点底部出发到下个节点顶部结束，层与层之间传递需要经过汇总。因此水平方向上主要有两种情况：

• 底部汇总：数据流从外向里；（左侧从左往右，右侧从右往左）
• 顶部分散：数据流从里向外；（左侧从右往左，右侧从左往右）

偶尔会有特殊情况，比如：

• 同一层中两个节点数据是互相流动的，这就需要在两个节点之间使用双向箭头，且依据实际情况，其中一个可能不会有向下流动的数据只有与同层节点的数据交互，若此层刚好两个节点且为了美观保持对称（而非将带有向下流动数据的节点居中），此时数据流动会出现从左到右或从右到左的单向流动
• 同一层中还会有层级关系。。。（这个对数据流影响不大）
• 此思路在当前需求下够用了，后续有新需求再灵活变动

垂直方向上，无论是节点底部的小尾巴还是顶部的部分都是向下流动，而且由于与节点是强关联的，因此不需要单独封装出来到组件中

效果优化：

• 为保证起始位置不会出现“闪现”，虚线的出现一定是从 0 到 1 的过程，主要需要调整盒子内虚线在起始位置的偏移度，经过调整，最终确定偏移度最小为线段长度；
• 为保证动画的流畅性，动画结束时需要与动画开始时状态保持一致，主要调整整段虚线的动画位移距离和线段及之间间隔，最终确定最小位移距离为“线段长度+间隔”

三、效果图

四、源代码

src\components\flow-arrow\index.js

/* eslint-disable react/no-unknown-property */
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/react';
import keyFrames from './keyFrames'
import constant from './constant'

const { flowLen } = constant

/**
 * 线性流动组件
 * @param direction 方向:从左到右(lr);从右到左(rl);从里到外(io);从外到里(oi)
 * @param place 位置:顶部(head);底部(foot)
 * @description 方向和位置参数控制，顶部数据流发散(io)，底部数据流汇聚(oi)，具体显隐可参考如下(案例中:fo 是顶层;f3 是底层)
 *   - {floor.code --= 'f0'? null : <div className='flow-head'/>} 
 *   - {floor.code --- 'f3'? null : <div className='flow-foot'/>}
 *   其他特殊情况特殊处理(单独配置，强制传参改变方向)
 */
const containerStyle = {
  ...keyFrames,
  '.flow-container': {
    width: 'calc(100% - 24vh)',
    height: '.5vh',
    position: 'relative',
    left:'12.8vh',
    overflow: 'hidden',
  },
  ".flow-head-container": {
    top:'-.6vh',
  },
  ".flow-foot-container": {
    bottom:'-1.6vh',
  },
  ".flow": {
    width:'110%',
    height: '.5vh',
    // 第三个值 每个线段长度; 第四个值角度同向渐变距离; 第五个值 每个线段间隔
    background: `repeating-linear-gradient(90deg, #e2e8fd 0, #e2e8fd ${flowLen}vh, rgba(0,0,0,0) ${flowLen}vh, rgba(0,0,0,0) ${flowLen}vh)`,
    zIndex: 1,
  },
  '.flow-both-container':{
    display:'flex',
  },
  '.flow-both': {
    width:'51%',
    overflow: 'hidden',
    '.flow-rl': {
      marginLeft: '-2vh'
    },
  },
  '.flow-lr, .flow-rl,.flow-io, .flow-oi': {
    background: `repeating-linear-gradient(90deg, #e2e8fd 0, #e2e8fd ${flowLen}vh, rgba(0,0,0,0) 0vh, rgba(0,0,0,0) ${flowLen * 2}vh)`,
  },
  '.flow-lr': {
    animation: 'flow-lr linear 1s infinite',
    marginLeft:'-2vh',
  },
  '.flow-rl': {
    animation: 'flow-rl linear 1s infinite',
    marginRight: '-2vh',
  },
}

const index = (props = {direction: 'lr', place: 'head'}) => {
  const { direction, place } = props
  
  return <div css={containerStyle}>
    <div className={`flow-container flow-${place}-container`}>
    {
      (() => {
        switch (direction) { 
          case 'lr': 
          case 'rl':
            return <div className={`flow flow-${props.direction}`} />
          case 'io':
            return <div className='flow-both-container'>
              <div className={`flow-both`}>
                <div className={`flow flow-head flow-rl`} />
              </div>
              <div className={`flow-both`}>
                <div className={`flow flow-lr`} />
              </div>
            </div>
          case 'oi':
            return <div className='flow-both-container'>
              <div className={`flow-both`}>
                <div className={`flow flow-lr`} />
              </div>
              <div className={`flow-both` }>
                <div className={`flow flow-rl`} />
              </div>
            </div>
          default:
            return <div className={`flow`} />
        }
      })()
    }
    </div>
  </div>
}

export default index
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

src\components\flow-arrow\keyFrames.js

const keyFrames = {
  '@keyFrames flow-lr': {
    from: {
      transform:'translateX(0vh)',
    },
    to: {
      transform: 'translateX(4.8vh)',
    }
  },
  '@keyFrames flow-rl': {
    from: {
      transform:'translateX(4.8vh)',
    },
    to: {
      transform: 'translateX(0vh)',
    }
  }
}

export default keyFrames
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

src\components\flow-arrow\constant.js

const constant = {
  flowLen: 1.2,
}

export default constant
1
2
3
4
5

组件调用

/* eslint-disable react/no-unknown-property */
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/react';
import FlowArrow from './components/flow-arrow/index'

function App() {
  return (
    <div className="App" css={{background: '#00f', height: '600px', 'h1': { textAlign: 'center' }}}>
      <h1>左右</h1>
      <FlowArrow direction='lr' place='head'/>
      <h1>右左</h1>
      <FlowArrow direction='rl' place='head'/>
      <h1>内外</h1>
      <FlowArrow direction='io' place='head'/>
      <h1>外内</h1>
      <FlowArrow direction='oi' place='head'/>
    </div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

五、拓展学习

1.repeating-linear-gradient

官方文档：repeating-linear-gradient() - CSS：层叠样式表 | MDN

2.animation

官方文档：animation - CSS：层叠样式表 | MDN

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

3.@keyFrames

官方文档：@keyframes - CSS：层叠样式表 | MDN

---

组件源码获取：

• 关注公众号：程序边界，输入 ‘程序边界 001’ ！
• 直接下载：流动的箭头-线性流动组件（repeating-linear-gradient，@keyFrames）资源-CSDN文库

⭐️ 好书推荐

《Next.js实战》

【内容简介】

《Next.js实战》详细阐述了与Next.js框架相关的基本解决方案，主要包括Next.js简介、不同的渲染策略、Next.js基础知识和内建组件、在Next.js中组织代码库和获取数据、在Next.js中管理本地和全局状态、CSS和内建样式化方法、使用UI框架、使用自定义服务器、测试Next.js、与SEO协同工作和性能管理、不同的部署平台、管理身份验证机制和用户会话、利用Next.js和GraphCMS构建电子商务网站等内容。此外，本书还提供了相应的示例、代码，以帮助读者进一步理解相关方案的实现过程。