还记得 window 经典的屏幕保护程序《变幻线》吗?
腾讯 AlloyTeam 刚刚开源了一款 Web 魔幻线条框架 curvejs,可让线条成为一名优秀的舞者。
使用 curvejs 实现类似《变幻线》的功能只需要几行代码:【DEMO 体验地址】
const { Stage, Curve, motion } = curvejs let stage = new Stage (document.getElementById ('myCanvas')) stage.add (new Curve ({ color: '#00FF00', data: {value: 0, step: 0.008, width: 600, height: 400}, motion: motion.noise })) function tick (){ stage.update () requestAnimationFrame (tick) } tick ()
除了变换线,curvejs 还能根据你的想象力实现很多功能,比如:
Scale-To
Points-To
Rotate
Word
Perlin-Noise
Simple
Simple-ES5
Lerp Color
Curves
Line
Close
具体使用指南和原理请查看官方文档和演示 Demo。