共计 1258 个字符,预计需要花费 4 分钟才能阅读完成。
五一假期行将完结啦,大家也行将筹备投入到工作中来了,在这假期的最初一天,给大家带来一个简单的线条动画,成果如下所示。
如果你做过一些企业站点的我的项目,应该会有遇到过这种需要,为了让咱们的站点更具有活力及动画成果,往往会加一些相似这样的成果来丰盛咱们的网站,明天就来看看如何实现这种成果吧,动画成果基于 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/th…
codepen:https://codepen.io/soju22/pen…
专一前端开发,分享前端相干技术干货,公众号:南城大前端(ID: nanchengfe)
正文完