騰訊 AlloyTeam 正式發佈 Canvas 魔幻線條 - curvejs



寫在前面

curvejs 中文讀["克js"]，是騰訊AlloyTeam打造的一款魔幻線條框架，讓線條成爲一名優秀的舞者，讓線條們成爲優秀的舞團，HTML5 Canvas就是舞臺。

官網：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的能力不單單是變換線，這徹底取決於你的想象力。好比：

• Points-To
• Rotate
• Word
• Perlin-Noise
• Simple
• Simple-ES5
• Curves
• Line
• Close

使用指南

$ 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相關

• 官網：alloyteam.github.io/curvejs/
• Github: github.com/AlloyTeam/c…
• 更加方便的交流關於curvejs的一切能夠加入QQ的curvejs交流羣(179181560)