流光效果
-
绘制流光线条
创建SVG，根据UI给的背景图，定位到图上每条管道（即流光线条的路径）的起始点以及拐点，绘制折线。绘制折线的时候按照下图方框通过class分组，这几组的光线流动是同时出发的。
svg相关知识点：https://www.w3school.com.cn/svg/index.asp
<svg width="100%" height="100%" class="added-wrap_svg" :class="{toPause: pause}">
// 线条光晕
<filter id="filter1" x="-120%" y="-120%" width="400%" height="400%">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="6"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="multiply"></feBlend>
</filter>
// 绘制折线
<polyline class="cleanToMarket" points="1233,976 1239,983 1267,983"/>
<polyline class="cleanToMarket" points="1233,992 1239,999 1274,999"/>
<polyline class="cleanToMarket" points="1226,1010 1284,1010"/>
<polyline class="cleanToMarket" points="1233,1028 1239,1022 1274,1022"/>
<polyline class="cleanToMarket" points="1232,1045 1239,1039 1267,1039"/>
</svg>
折线样式
polyline{
stroke: #E5DA40;
fill: transparent;
stroke-width: 2;
stroke-linecap: round;
animation: act 3s linear infinite;
}
-
让光线动起来
上边画出来的是一整条长的实线，接下来我们会用到SVG的两个属性：stoke-dasharray和stroke-dashoffset。
stoke-dasharray：用于创建虚线。
stroke-dasharray = ‘10’
stroke-dasharray = ‘10, 5’
stroke-dasharray = ‘20, 10, 5’
stroke-dasharray为一个参数时： 其实是表示虚线长度和每段虚线之间的间距，
如：stroke-dasharray = ‘10’ 表示：虚线长10，间距10，然后重复虚线长10，间距10
两个参数或者多个参数时：一个表示长度，一个表示间距，
如：stroke-dasharray = ‘10, 5’ 表示：虚线长10，间距5，然后重复虚线长10，间距5；
如：stroke-dasharray = ‘20, 10, 5’ 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
stroke-dashoffset：这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
感兴趣的可以参考https://www.cnblogs.com/daisygogogo/p/11044353.html
这里相当于一条管道上，只有一段虚线，然后让这条虚线从左至右移动起来。
首先获取到所有的折线
var char = 'http://www.w3.org/2000/svg'
var polylines = document.getElementsByTagNameNS(char, 'polyline')
每条折线，获取到折线的长度，设置虚线，如第一组，设置虚线长80，间距为该条折线的长度，将偏移量设置为80px，虚线就会往左移动80px，这样初始时相当于虚线隐藏了。
然后，设置虚线移动动画，即设置偏移量为折线的长度。文章来源：https://www.toymoban.com/news/detail-812172.html
这样，流光效果就出来了。文章来源地址https://www.toymoban.com/news/detail-812172.html
polylines.forEach((i, index) => {
// 获取折线长度
const len = i.getTotalLength()
// 设置滤镜
i.style.filter = 'url(#filter1)'
// 设置虚线和间隔
i.style.strokeDasharray = '80,' + len
// 设置偏移量
i.style.strokeDashoffset = 80
// 设置动画名称
i.style.animationName = 'act' + index
var style = document.styleSheets[0]
// 插入动画规则
style.insertRule('@Keyframes act' + index + '{100% {stroke-dashoffset: ' + (-(len)) + '}}', 1)
if (i.classList[0] === 'cleanToMarket') {
i.style.strokeDasharray = '20,' + len
i.style.strokeDashoffset = 20
i.style.strokeWidth = 1
// 动画延迟
i.style.animationDelay = '3s'
}
if (i.classList[0] === 'marketToEmpowerment') {
i.style.strokeDasharray = '30,' + len
i.style.strokeDashoffset = 30
i.style.strokeWidth = 1
i.style.animationDelay = '6s'
}
if (i.classList[0] === 'operatioCcenter') {
i.style.animationDelay = '9s'
}
if (i.classList[0] === 'empowermentToLib') {
i.style.strokeDasharray = '60,' + len
i.style.strokeDashoffset = 60
i.style.strokeWidth = 1
i.style.animationDelay = '9s'
}
if (i.classList[0] === 'libToEmpowerment') {
i.style.strokeDasharray = '60,' + len
i.style.strokeDashoffset = 60
i.style.strokeWidth = 1
i.style.animationDelay = '12s'
}
if (i.classList[0] === 'libToService') {
i.style.animationDelay = '12s'
}
if (i.classList[0] === 'serviceToApply') {
i.style.animationDelay = '15s'
}
})
上下浮动
@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(6px)}
100%{transform:translateY(0)}
}
忽闪
@keyframes dataMarket { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }}
发光
@keyframes showBlur{
0% {
filter: blur(0px);
}
50% {
filter: blur(50px);
}
100% {
filter: blur(0px);
}
}
动画暂停
animation-play-state: paused
到了这里，关于SVG+CSS动画实现动效（流光、呼吸等效果）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
