{"id":15026184,"url":"https://github.com/alloyteam/curvejs","last_synced_at":"2025-05-15T23:06:46.611Z","repository":{"id":71391170,"uuid":"88454795","full_name":"AlloyTeam/curvejs","owner":"AlloyTeam","description":"Made curve a dancer in HTML5 canvas - 魔幻线条","archived":false,"fork":false,"pushed_at":"2019-03-22T07:31:17.000Z","size":582,"stargazers_count":1306,"open_issues_count":0,"forks_count":130,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-05-15T23:06:28.137Z","etag":null,"topics":["animation","bezier","canvas","curve","curvejs","dance","dancer"],"latest_commit_sha":null,"homepage":"https://alloyteam.github.io/curvejs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlloyTeam.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-17T01:24:18.000Z","updated_at":"2025-01-10T09:33:22.000Z","dependencies_parsed_at":"2024-01-13T17:58:57.091Z","dependency_job_id":"2f19d930-a851-4938-810b-3142f81f73c6","html_url":"https://github.com/AlloyTeam/curvejs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2Fcurvejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2Fcurvejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2Fcurvejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2Fcurvejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlloyTeam","download_url":"https://codeload.github.com/AlloyTeam/curvejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436948,"owners_count":22070947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","bezier","canvas","curve","curvejs","dance","dancer"],"created_at":"2024-09-24T20:03:58.514Z","updated_at":"2025-05-15T23:06:41.550Z","avatar_url":"https://github.com/AlloyTeam.png","language":"JavaScript","readme":"## 腾讯AlloyTeam正式发布Web魔幻线条 - curvejs\n\n![](http://images2015.cnblogs.com/blog/105416/201704/105416-20170423095323554-971072124.png)\n\n[curvejs](https://github.com/AlloyTeam/curvejs) 中文读[\"克js\"]，是腾讯AlloyTeam打造的一款魔幻线条框架，让线条成为一名优秀的舞者，让线条们成为优秀的舞团，HTML5 Canvas就是舞台。\n\n官网：[https://alloyteam.github.io/curvejs/](https://alloyteam.github.io/curvejs/)\n\n你还记得window经典的屏幕保护程序《变幻线》吗？\n\n![](http://images2015.cnblogs.com/blog/105416/201704/105416-20170421100349227-820259243.png)\n\n其原理就是使用 Perlin-Noise + Particle System + Bézier Curve + Color Transition 制作而成。\n\n使用curvejs实现类似变幻线功能只需要几行代码：\n\n```js\nconst  { Stage, Curve, motion } = curvejs\n\nlet stage = new Stage(document.getElementById('myCanvas'))\n\nstage.add(new Curve({\n    color: '#00FF00',\n    data: {value: 0, step: 0.008, width: 600, height: 400},\n    motion: motion.noise\n}))\n\nfunction tick(){\n    stage.update()\n    requestAnimationFrame(tick)\n}\n\ntick()\n```\n\n[【体验地址】](https://alloyteam.github.io/curvejs/pg/rd.html?type=noise)\n\n当然，curvejs的能力不仅仅是变换线，这完全取决于你的想象力。比如：\n\n* [Loading](https://alloyteam.github.io/curvejs/example/loading/)\n* [Rope](https://alloyteam.github.io/curvejs/example/rope/)\n* [Siri-Wave](https://alloyteam.github.io/curvejs/example/siri-wave/)\n* [Water](https://alloyteam.github.io/curvejs/example/water/)\n* [Sprout](https://alloyteam.github.io/curvejs/example/sprout/)\n* [Scale-To](https://alloyteam.github.io/curvejs/pg/rd.html?type=scale)\n* [Points-To](https://alloyteam.github.io/curvejs/pg/rd.html?type=points-to)\n* [Rotate](https://alloyteam.github.io/curvejs/pg/rd.html?type=rotate)\n* [Word](https://alloyteam.github.io/curvejs/pg/rd.html?type=word)\n* [Perlin-Noise](https://alloyteam.github.io/curvejs/pg/rd.html?type=noise)\n* [Simple](https://alloyteam.github.io/curvejs/pg/rd.html?type=simple)\n* [Simple-ES5](https://alloyteam.github.io/curvejs/pg/rd.html?type=simple-es5)\n* [Lerp Color](https://alloyteam.github.io/curvejs/pg/rd.html?type=color)\n* [Curves](https://alloyteam.github.io/curvejs/pg/rd.html?type=curves)\n* [Line](https://alloyteam.github.io/curvejs/pg/rd.html?type=line)\n* [Close](https://alloyteam.github.io/curvejs/pg/rd.html?type=close)\n\n## 使用指南\n\n```bash\n$ npm install curvejs\n```\n\n```javascript\nimport curvejs from 'curvejs'\n```\n\n也可以直接插入script到你的HTML页面:\n\n```html\n\u003cscript src=\"https://unpkg.com/curvejs@0.3.3/dist/curve.min.js\"\u003e\u003c/script\u003e\n```\n\n开始跳舞:\n\n```js\nvar Stage = curvejs.Stage,\n    Curve = curvejs.Curve,\n    canvas = document.getElementById('myCanvas'),\n    stage = new Stage(canvas),\n    rd = function() {\n        return -2 + Math.random() * 2\n    }\n\nvar curve = new Curve({\n    color: '#00FF00',\n    points: [277, 327, 230, 314, 236, 326, 257, 326],\n    data: [rd(), rd(), rd(), rd(), rd(), rd(), rd(), rd()],\n    motion: function motion(points, data) {\n        points.forEach(function (item, index) {\n            points[index] += data[index]\n        })\n    }\n})\n\nstage.add(curve)\n\nfunction tick(){\n    stage.update()\n    requestAnimationFrame(tick)\n}\n\ntick()\n```\n\n上面的points代表了三次贝塞尔曲线的4个点。motion代表运动方式，motion可以拿到points和data。motion里函数的this指向Curve是实例curve。\n\n\n## 使用内置motion\n\n```js\nvar curve = new Curve({\n    points: [277, 327, 230, 314, 236, 326, 257, 326],\n    data: {angle: 0, r:5 ,step:Math.PI / 50 },\n    motion: curvejs.motion.dance\n})\n```\n\n## 基本原理\n![](http://images2015.cnblogs.com/blog/105416/201704/105416-20170421100408884-843332110.png)\n\n\n* 每次创建Curve 可以传入八个数字，其实就代表上面的4个点的坐标\n* motion里可以拿到 points 进行自定义变幻\n* 幻影不需要开发者考虑，curvejs会自动生成幻影\n\n这里需要特别强调，curvejs的幻影不是利用canvas的黑色底，然后fillRect填充半透而产生，而是Particle System。所以curvejs制作出的效果不用一定是黑色背景，而且canvas也可以是透明，这就大大增加了适用场景。\n\n## 提交你的motion\n\n在 [ motion 目录](https://github.com/AlloyTeam/curvejs/tree/master/src/motion), 有许多内置的motion提供给开发者使用，但是你也可以提交你的motion到这个项目，我会第一时间review并合入主干。\n\n基本motion格式规则:\n\n```js\n/**\n * motion description.\n *\n * @param {points}\n * @param {data}\n *      data rule example:\n *      [1, 0.2, -3, 0.7, 0.5, 0.3, -1, 1]\n */\nexport default function (points, data) {\n    //你的motion逻辑\n}\n```\n\n## curvejs相关\n\n* 官网：[https://alloyteam.github.io/curvejs/](https://alloyteam.github.io/curvejs/)\n* Github: [https://github.com/AlloyTeam/curvejs](https://github.com/AlloyTeam/curvejs)\n* 更加方便的交流关于curvejs的一切可以加入QQ的curvejs交流群(179181560)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloyteam%2Fcurvejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falloyteam%2Fcurvejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloyteam%2Fcurvejs/lists"}