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

本文主要是介绍【实战】流动的箭头 —— 线性流动组件（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 } = propsreturn <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

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

src\components\flow-arrow\constant.js

const constant = {flowLen: 1.2,
}export default constant

组件调用

/* 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.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构建电子商务网站等内容。此外，本书还提供了相应的示例、代码，以帮助读者进一步理解相关方案的实现过程。

📚 京东购买链接：《Next.js实战》
📚 当当购买链接：《Next.js实战》

这篇关于【实战】流动的箭头 —— 线性流动组件（repeating-linear-gradient，@keyFrames）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---