ThreeJS 动画之 Noisy Lines

五一假期即将结束啦，大家也即将准备投入到工作中来了，在这假期的最后一天，给大家带来一个复杂的线条动画，效果如下所示。

gif

如果你做过一些企业站点的项目，应该会有遇到过这种需求，为了让我们的站点更具有活力及动画效果，往往会加一些类似这样的效果来丰富我们的网站，今天就来看看如何实现这种效果吧，动画效果基于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
})

效果如下：

gif

最后

整体实现就介绍完啦，调用的方式相当简单，大家有兴趣的可以看看源码实现过程，基于threejs实现。如果觉得有用，赶紧点赞收藏起来吧，说不定哪天就用上啦～

地址

github：https://github.com/klevron/threejs-toys

codepen：https://codepen.io/soju22/pen/YzePgPV