@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 = {
    // 背景色
    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();

销毁

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 );

dev构建预览

• npm start to start development.
• npm build to build library.