五一假期即将结束啦，大家也即将准备投入到工作中来了，在这假期的最后一天，给大家带来一个复杂的线条动画，效果如下所示。
png
如果你做过一些企业站点的项目，应该会有遇到过这种需求，为了让我们的站点更具有活力及动画效果，往往会加一些类似这样的效果来丰富我们的网站，今天就来看看如何实现这种效果吧，动画效果基于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：https://github.com/klevron/threejs-toys
codepen：https://codepen.io/soju22/pen/YzePgPV
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
网友评论