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

silencezwm 发布于2019-08-20 16:02 / 2213人阅读

摘要：原文链接写在前面中文读克，是腾讯打造的一款魔幻线条框架，让线条成为一名优秀的舞者，让线条们成为优秀的舞团，就是舞台。官网你还记得经典的屏幕保护程序变幻线吗其原理就是使用制作而成。代表运动方式，可以拿去到和。

【原文链接】

写在前面

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的能力不仅仅是变换线，这完全取决于你的想象力。比如：

Points-To

Rotate

Word

Perlin-Noise

Simple

Simple-ES5

Curves

Line

使用指南

$ npm install curvejs

import curvejs from "curvejs"

也可以直接插入script到你的HTML页面:

开始跳舞:

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)

服务器托管 idc机房托管正式发布正式版发布 v100正式发布 Next.js 12 正式发布、Yarn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82671.html

学习实践 - 收藏集 - 掘金

摘要：官网地址聊天机器人插件开发实例教程一创建插件在系统技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。我会简单基于的简洁视频播放器组件前端掘金使用和实现购物车场景前端掘金本文是上篇文章的序章，一直想有机会再次实践下。 2道面试题：输入URL按回车&HTTP2 - 掘金通过几轮面试，我发现真正那种问答的技术面，写一堆项目真不如去刷技术文章作用大，因此刷了一段时间的博客和掘金，整理下曾经被...

mikyou 2019-08-29 12:50 评论0 收藏0
腾讯AlloyTeam正式发布pasition - 制作酷炫Path过渡动画

摘要：下面来看看的结构在开发者工具里截图每条都包含个数字，分别代表三次贝塞尔曲线的起点控制点控制点终点。这个函数可以自行尝试一下，生成出的字符串赋值给的的就可以了。 showImg(https://segmentfault.com/img/remote/1460000009865685?w=164&h=98);showImg(https://segmentfault.com/img/remo...

shadowbook 2019-08-20 17:24 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
Web前端常用插件

摘要：弹窗视频嵌入插件幻灯片图片切换手机端响应式日期控件上传图片控件校验控件分页静态分页动态分页相册效果控件多级下拉图片延迟加载或响应式管理模板插件库大转盘九宫格效果整屏滚动滚动效果用于移动项目的光滑菜单浏览器端格式化工具千手观音弹窗 1.blockUI2.overlay 3.sweetAlert 视频 1.jwplayer2.video.js html53.swfobject Flas...

quietin 2019-08-21 10:31 评论0 收藏0