本文已参与[新人创作礼]活动，一起开启掘金创作之路
五一假期即将结束啦，大家也即将准备投入到工作中来了，在这假期的最后一天，给大家带来一个复杂的线条动画，效果如下所示。
如果你做过一些企业站点的项目，应该会有遇到过这种需求，为了让我们的站点更具有活力及动画效果，往往会加一些类似这样的效果来丰富我们的网站，今天就来看看如何实现这种效果吧，动画效果基于threejs-toys实现，本文不讨论其底层原理，有兴趣的同学可以看看源码研究。
实现
引入依赖包
import { noisyLinesBackground } from 'https://unpkg.com/threejs-toys@0.0.4/build/threejs-toys.module.cdn.min.js'
初始化调用
<div id="app"></div>
const bg = noisyLinesBackground({ el: document.getElementById('app'), colors: [143811, 10932726], minStroke: 5, maxStroke: 20, timeCoef: 0.0002, coordScale: 2, displacementScale: 0.02 })
参数解释
| 参数 | 含义 |
| el | 动画加载元素 |
| colors | 线条颜色数组区间 |
| minStroke | 线条最小宽度 |
| maxStroke | 线条最大宽度 |
| timeCoef | 线条运动速度 |
| coordScale | 曲线级别，1是全直线运动 |
| displacementScale | 线条移动级别 |
通过以上初始化调用后界面就能看到线条动起来啦，我们改可以继续通过点击事件来改变相应的参数，让我们的界面动画效果发生变化。
document.body.addEventListener('click', () => { bg.config.colors = [Math.random() * 0xffffff, Math.random() * 0xffffff] bg.config.minStroke = Math.random() * 2 bg.config.maxStroke = bg.config.minStroke + Math.random() * 5 bg.drawTexture() bg.config.timeCoef = 0.000025 + Math.random() * 0.001 bg.uniforms.uCoordScale.value = 0.5 + Math.random() * 4.5 bg.uniforms.uDisplacementScale.value = 0.00025 + Math.random() * 0.01 })
效果如下：
最后
整体实现就介绍完啦，调用的方式相当简单，大家有兴趣的可以看看源码实现过程，基于threejs实现。如果觉得有用，赶紧点赞收藏起来吧，说不定哪天就用上啦～
地址
github：github.com/klevron/thr…
codepen：codepen.io/soju22/pen/…
