@b-design/color

关于

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示例.