腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs
写在前面
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)
腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs的更多相关文章
- 腾讯AlloyTeam正式发布pasition - 制作酷炫Path过渡动画
pasition Pasition - Path Transition with little JS code, render to anywhere - 超小尺寸的Path过渡动画类库 Github ...
- 腾讯AlloyTeam正式发布omi-cli脚手架 v1.0 - 创建网站无需任何配置
omi-cli omi-cli omi-cli命令 omi框架 用户指南 文件目录 npm 脚本 npm start npm run dist 代码分割 兼容 IE8 插入 CSS 插入组件局部 CS ...
- 腾讯AlloyTeam正式发布omi-cli脚手架 - 创建网站无需任何配置
omi-cli omi-cli omi-cli命令 omi框架 用户指南 文件目录 npm 脚本 npm start npm run dist 代码分割 兼容 IE8 插入 CSS 插入组件局部 CS ...
- HTML5 canvas绘制线条曲线
HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...
- 你不容错过的 腾讯 AlloyTeam Web 前端大会 看点完全剖析
AC大会 ( Alloyteam Conf ),是由腾讯前端技术团队的标杆团队 AlloyTeam 发起的前端技术大会,旨在分享团队在技术研究.产品研发.开源项目的经验沉淀.AC2017 将会继续在工 ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- canvas设置线条样式
canvas设置线条样式 合法属性和方法 lineWidth = value 设置线宽 lineCap = type 设置线端点样式 lineJoin = type 设置线交合处样式 setLineD ...
- 8-2 canvas专题-线条样式
8-2 canvas专题-线条样式 学习要点 对第五章知识进行简单的回顾和总结 进一步讲解canvas绘图相关的知识点 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canvas绘 ...
- 腾讯AlloyTeam移动Web裁剪组件AlloyCrop正式开源
传送门 Github地址:https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop 在线Demo演示: 简介 裁剪图片的应用场景有 ...
随机推荐
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-4
来个目录吧: 第一章-入门 第二章- Entity Framework Core Nuget包管理 第三章-创建.修改.删除.查询 第四章-排序.过滤.分页.分组 第五章-迁移,EF Core 的co ...
- input解决浏览器记住密码问题
<input type="password" name="" id="">可以这样写 <input type=" ...
- Nginx+IIS+Redis 处理Session共享问题 1
最近遇到一个棘手的问题,微信公众平台的前端站点session老是丢失,我们是走的微信网页授权,授权后获取用户openid,丢失后没有openid后续的操作全白搭了,因为没了openid只能判断为客户不 ...
- Python 引用、浅拷贝、深拷贝解析
引用 Python是动态数据类型的语言,故在对变量进行赋值时是不用制定变量类型的. 或者说,你可以把变量赋值的过程,当作是贴一个标签,去引用该数据. 看下面的例子: In [54]: a=4 In [ ...
- 3384/1750: [Usaco2004 Nov]Apple Catching 接苹果
3384/1750: [Usaco2004 Nov]Apple Catching 接苹果 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 18 Solv ...
- Eclipse 项目导入 Studio Debug运行卡死在进入界面
最近,把一个以前开发的Eclipse的项目导入Studio中,遇到了各种奇葩的问题,这时候就要参考百度了,基本都能解决,我导入的项目遇到的问题在百度中都能找到答案,那么我这里就不在做总结了 第二天,发 ...
- .NET Core中的包、元包与框架
本文为翻译文章,原文:Packages, Metapackages and Frameworks .NET Core是一个由NuGet包组成的平台.一些产品受益于细粒度包的定义,也有一些受益于粗粒度包 ...
- 100本最棒的web前端图书推荐
前端技术,要学习的内容太多了,当你不知道从哪里开始的时候,你就先从看书开始,边看书边码代码,这个是学习编程必须的过程,因为你看一百遍,还不如自己写一遍,写一遍,第一可以加印象,第二便于更好的理解. 熟 ...
- ”在活动中穿梭”已经重做为“Intent的使用”
更新地址:http://www.cnblogs.com/tangwanzun/p/5702276.html
- Android之XListView下拉刷新,更新网络美女图
一.简介: 下拉刷新是一种特定的手动刷新交互,和其他的同类操作不同的地方在于它采用了更加直觉的下拉操作,所以它的交互足够清晰明显. 下拉刷新主要用在类似ListView这样的控件,设计下拉刷新有三 ...