@b-design/color
v1.0.7
Published
B-Design Color
Downloads
29
Readme
关于
B-Design 是阿里云推出的一套面向企业应用领域的设计系统。在企业级软件服务逐渐走向云端化的趋势下,为阿里内部及合作伙伴的 SaaS 系统上云提供标准化的设计规范和指导。
B-Design 色板工具 Palette Tool
import { PaletteTool } from '@b-design/color';
// 主色
const primaryColor = '#1B58F4';
// 生成10个家族色 [ primary100, primary90, primary80, primary70, primary60, primary50, primary40, primary30, primary20, primary10 ]
const colors = PaletteTool.generate(primaryColor);
console.log(`Color Palette of ${primaryColor} from @primary100 to @primary10: `, colors);
B-Design 呼吸色工具 Breathing Color Tool
index.html
<div id="container-gl"></div>
index.js
import { BreathingColor } from '@b-design/color';
// 呼吸色设置
const config = {
// 是否在动画pause和resume的时候console.log,默认为false。
debug: true,
// 设备像素比,默认值window.devicePixelRatio ;详细见下方“性能平衡”
dpr: window.devicePixelRatio,
// 抽帧率,详细见下方“性能平衡”
frame: 1,
// 图形分段,详细见下方“性能平衡”
segment: 200,
// 背景色
background: 'ff6220',
// 预设颜色
palette: ['f2c04a', '6c5ed4', 'ffc5dd', '3e19e8', 'ff792f'],
// 预设颜色偏移量
offsets: [
2, 2, // 颜色1偏移量X, 颜色1偏移量Y
2, 1.17, // 颜色2偏移量X, 颜色2偏移量Y
0.65, 0.7, // 颜色3偏移量X, 颜色3偏移量Y
-0.54, 0.9, // 颜色4偏移量X, 颜色4偏移量Y
2, -0.9 // 颜色5偏移量X, 颜色5偏移量Y
],
// 呼吸色偏移参数
twist: [
4, 0, // UV分段数量X, UV分段数量Y
0.37, 5.7, // 扭曲高度, 扭曲波幅
0.6, 0.15, // 时间参数1, 时间参数2
1.5, 1, // 扭曲密度, 扭曲强度
0.13, 0.05 // 扭曲速度, 噪点强度
]
};
const bdColor = new BreathingColor({
config: config,
container: document.getElementById('container-gl'), // 容器元素
initWidth: window.innerWidth,
initHeight: window.innerHeight
});
// 初始化
// 此时画布还没有出现图案,需要调用渲染接口绘制到画布上,见下方“渲染”
bdColor.init();
渲染
/** 更新渲染 */
let rafID;
const animate = () => {
bdColor.update()
rafID = requestAnimationFrame(animate);
}
animate();
/** 暂停渲染 */
bdColor.pause();
/** 恢复渲染 */
bdColor.resume();
性能平衡
// configs中与性能相关的参数如下
/** 设备像素比 dpr
* 取值范围:0.5 - 2。数字越大,画面精度越高,性能开销越大。
* @type {Number}
* @default window.devicePixelRatio 或 1
*/
dpr: window.devicePixelRatio,
/** 抽帧率 frame
* 取值范围:1, 2 或 3。数字越小,画面刷新率越高,性能开销越大。
* 当值为1时,每1帧都渲染一次。当值为2时,每2帧渲染一次。以此类推。
* @type {Integer} 整数
* @default 根据GPU自动推荐为1,2 或 3。
*/
frame: 1,
/** 图形分段 segment
* 取值范围:10 - 500的整数。数字越大,分段越多,画面色彩变化越细致,性能开销越大。
* @type {Integer} 整数
* @default 根据GPU自动推荐为60,100 或 200。
*/
segment: 200,
销毁
cancelAnimationFrame(rafID)
bdColor.destroy();
设置画布尺寸和监听鼠标事件
window.onresize = () => { bdColor.setSize(window.innerWidth || 1024, window.innerHeight || 480) };
window.onmousemove = (e) => { bdColor.setMousemove(e) };
更新预设
const config2 = {...};
bdColor.updateConfig( config2 );
查看预设
const config = bdColor.getConfig();
dev构建预览
npm start
to start development.npm build
to build library.cd examples && npm install && npm start
运行example示例.