本文主要是介绍【实战】流动的箭头 —— 线性流动组件(repeating-linear-gradient,@keyFrames),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 一、引子
- 二、组件思路
- 三、效果图
- 四、源代码
- src\components\flow-arrow\index.js
- src\components\flow-arrow\keyFrames.js
- src\components\flow-arrow\constant.js
- 组件调用
- 五、拓展学习
- 1.repeating-linear-gradient
- 2.animation
- 3.@keyFrames
- 组件源码获取:
- ⭐️ 好书推荐
- 《Next.js实战》
- 【内容简介】
一、引子
在大屏数据展示中,若是按节点展示在不同数据层的数据时,为了形象体现数据的流动效果,需要让节点之间,层与层之间用流动的虚线+箭头连接。
二、组件思路
正常情况下,数据需要从上个节点底部出发到下个节点顶部结束,层与层之间传递需要经过汇总。因此水平方向上主要有两种情况:
- 底部汇总:数据流从外向里;(左侧从左往右,右侧从右往左)
- 顶部分散:数据流从里向外;(左侧从右往左,右侧从左往右)
偶尔会有特殊情况,比如:
- 同一层中两个节点数据是互相流动的,这就需要在两个节点之间使用双向箭头,且依据实际情况,其中一个可能不会有向下流动的数据只有与同层节点的数据交互,若此层刚好两个节点且为了美观保持对称(而非将带有向下流动数据的节点居中),此时数据流动会出现从左到右或从右到左的单向流动
- 同一层中还会有层级关系。。。(这个对数据流影响不大)
- 此思路在当前需求下够用了,后续有新需求再灵活变动
垂直方向上,无论是节点底部的小尾巴还是顶部的部分都是向下流动,而且由于与节点是强关联的,因此不需要单独封装出来到组件中
效果优化:
- 为保证起始位置不会出现“闪现”,虚线的出现一定是从 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)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!