寫在前面
curvejs 中文讀["克js"],是騰訊AlloyTeam打造的一款魔幻線條框架,讓線條成為一名優秀的舞者,讓線條們成為優秀的舞團,HTML5 Canvas就是舞臺。
官網:https://alloyteam.github.io/curvejs/
你還記得window經典的螢幕保護程式《變幻線》嗎?
其原理就是使用 Perlin-Noise + Particle System + Bézier Curve + Color Transition 製作而成。
使用curvejs實現類似變幻線功能只需要不到10行程式碼:
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
}))
當然,curvejs的能力不僅僅是變換線,這完全取決於你的想象力。比如:
使用指南
$ npm install curvejs
import curvejs from 'curvejs'
也可以直接插入script到你的HTML頁面:
<script src="https://unpkg.com/curvejs@0.2.0/dist/curve.min.js"></script>
開始跳舞:
var Stage = curvejs.Stage,
Curve = curvejs.Curve,
canvas = document.getElementById('myCanvas'),
stage = new Stage(canvas),
rd = function() {
return -2 + Math.random() * 2
}
var curve = new Curve({
color: '#00FF00',
points: [277, 327, 230, 314, 236, 326, 257, 326],
data: [rd(), rd(), rd(), rd(), rd(), rd(), rd(), rd()],
motion: function motion(points, data) {
points.forEach(function (item, index) {
points[index] += data[index]
})
}
})
stage.add(curve)
function tick(){
stage.update()
requestAnimationFrame(tick)
}
tick()
上面的points代表了三次貝塞爾曲線的4個點。motion代表運動方式,motion可以拿去到points和data。motion裡函式的this指向Curve是例項curve。
使用內建motion
var curve = new Curve({
points: [277, 327, 230, 314, 236, 326, 257, 326],
data: {angle: 0, r:5 ,step:Math.PI / 50 }
motion: curvejs.motion.dance
})
基本原理
- 每次建立Curve 可以傳入八個數字,其實就代表上面的4個點的座標
- motion裡可以拿到 points 進行自定義變幻
- 幻影不需要開發者考慮,curvejs會自動生成幻影
這裡需要特別強調,curvejs的幻影不是利用canvas的黑色底,然後fillRect填充半透而產生,而是Particle System。所以curvejs製作出的效果不用一定是黑色背景,而且canvas也可以是透明,這就大大增加了適用場景。
提交你的motion
在 motion 目錄, 有許多內建的motion提供給開發者使用,但是你也可以提交你的motion到這個專案,我會第一時間review併合入主幹。
基本motion格式規則:
/**
* motion description.
*
* @param {points}
* @param {data}
* data rule example:
* [1, 0.2, -3, 0.7, 0.5, 0.3, -1, 1]
*/
export default function (points, data) {
//你的motion邏輯
}
curvejs相關
- 官網:https://alloyteam.github.io/curvejs/
- Github: https://github.com/AlloyTeam/curvejs
- 更加方便的交流關於curvejs的一切可以加入QQ的curvejs交流群(179181560)