关灯
开启左侧

腾讯 AlloyTeam 正式发布 Canvas 魔幻线条 - curvejs

[复制链接]
老蚊子 发表于 2018-12-14 08:27:59 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
本帖最后由 老蚊子 于 2018-12-14 08:31 编辑

腾讯 AlloyTeam 正式发布 Canvas 魔幻线条 - curvejs

写在前面
curvejs 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 Canvas就是舞台。
你还记得window经典的屏幕保护程序《变幻线》吗?


其原理就是使用 Perlin-Noise + Particle System + Bézier curve + Color Transition 制作而成。
使用curvejs实现类似变幻线功能只需要不到10行代码:
  1. const  { Stage, Curve, motion } = curvejs

  2. let stage = new Stage(document.getElementById('myCanvas'))

  3. stage.add(new Curve({
  4.     color: '#00FF00',
  5.     data: {value: 0, step: 0.008, width: 600, height: 400},
  6.     motion: motion.noise
  7. }))
复制代码

当然,curvejs的能力不仅仅是变换线,这完全取决于你的想象力。比如:
使用指南
  1. $ npm install curvejs
复制代码
  1. import curvejs from 'curvejs'
复制代码

也可以直接插入script到你的HTML页面:
  1. <script src="https://unpkg.com/curvejs@0.2.0/dist/curve.min.js"></script>[color=rgba(140, 140, 140, 0.8)]
复制代码

开始跳舞:
  1. var Stage = curvejs.Stage,
  2.     Curve = curvejs.Curve,
  3.     canvas = document.getElementById('myCanvas'),
  4.     stage = new Stage(canvas),
  5.     rd = function() {
  6.      return -2 + Math.random() * 2
  7.     }

  8. var curve = new Curve({
  9.   color: '#00FF00',
  10.   points: [277, 327, 230, 314, 236, 326, 257, 326],
  11.   data: [rd(), rd(), rd(), rd(), rd(), rd(), rd(), rd()],
  12.   motion: function motion(points, data) {
  13.       points.forEach(function (item, index) {
  14.           points[index] += data[index]
  15.       })
  16.   }
  17. })

  18. stage.add(curve)

  19. function tick(){
  20.   stage.update()
  21.   requestAnimationFrame(tick)
  22. }

  23. tick()
复制代码

上面的points代表了三次贝塞尔曲线的4个点。motion代表运动方式,motion可以拿去到points和data。motion里函数的this指向Curve是实例curve。
使用内置motion
  1. var curve = new Curve({
  2.   points: [277, 327, 230, 314, 236, 326, 257, 326],
  3.   data: {angle: 0, r:5 ,step:Math.PI / 50 }
  4.   motion: curvejs.motion.dance
  5. })
复制代码


基本原理

  • 每次创建Curve 可以传入八个数字,其实就代表上面的4个点的坐标
  • motion里可以拿到 points 进行自定义变幻
  • 幻影不需要开发者考虑,curvejs会自动生成幻影
这里需要特别强调,curvejs的幻影不是利用canvas的黑色底,然后fillRect填充半透而产生,而是Particle System。所以curvejs制作出的效果不用一定是黑色背景,而且canvas也可以是透明,这就大大增加了适用场景。
提交你的motion
motion 目录, 有许多内置的motion提供给开发者使用,但是你也可以提交你的motion到这个项目,我会第一时间review并合入主干。
基本motion格式规则:
  1. /**
  2. * motion description.
  3. *
  4. * @param {points}
  5. * @param {data}
  6. *      data rule example:
  7. *      [1, 0.2, -3, 0.7, 0.5, 0.3, -1, 1]
  8. */
  9. export default function (points, data) {
  10.     //你的motion逻辑
  11. }
复制代码



curvejs相关


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

13粉丝

75帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )