ripple

提供一个无 ui 的 ripple 类（由遗弃包 enr 拆分而来）。

安装

npm install --save @vvi/ripple

# pnpm 
pnpm add --save @vvi/ripple

# yarn 
yarn add --save @vvi/ripple

使用

[!Note]

该模块魔改自 jquery.ripples

• 尽管接受所有的 style 属性，但是 position 还是期待是非 'static' 值，否则将影响涟漪背景的渲染位置和显示状态；
• 当前如果设置了 background 的话，有可能在恢复时使得其覆盖其他子属性；
• 当前期待使用 background-color 设置背景色，而不是在上面的 background 中设置背景色。譬如background-color: #f0f6;
• 当前更期待使用配置参数 option 的 'imgUrl' 来配置目标背景图（请注意图源的跨域问题）。譬如：imgUrl: 'background.png'
• 当然，也可以使用标准的 background-image 配置符合要求的背景图片（目前仅支持单张图配置）。譬如：background-image: url(background.png);
• 当前可配置 background-image 为渐变色，但仅支持从上到下的线性渐变（仅支持单渐变）。譬如： background-image: linear-gradient(black, transparent);
• 在同时配置了 imgUrl、background-image、background-color 时仅会显示一个效果（混合效果暂时并未实现）。优先展示 imgUrl，然后是 background-image，之后是 background-color 。如果都未设置则会展示默认的老式地板砖背景图
• 尽量不要是使用透明色或是当前的主背景色，否则导致涟漪的效果不明显

开发者提示：切换背景最好不要通过设置样式，显示使用 param.imgUrl 效果更佳

使用

import { Ripples, type RipplesOptions } from '@vvi/ripple';

/** 用户渲染的 canvas 元素节点 */
const canvasElement : HTMLCanvasElement = document.querySelect('canvas#ripple');

/** 配置涟漪状态 */
const rippleOption: RipplesOptions = {
    perturbation: 0.2, // 设定扰动系数，增强扰动效果
    interactive: false, // 关闭光标在父级元素滑动痕迹
    raindropsTimeInterval: 2400, // 定义无操作时雨滴滴落间隔（若 `idleFluctuations` 值为 `false` 时该值无效）
    darkMode: true, // 当前模式为暗黑模式
}

/** 渲染涟漪 */
const ripple = new Ripples(canvasElement, rippleOption);


ripple.raindropsFall(); // 随机手动触发一个雨滴
ripple.pause(); // 暂停涟漪
ripple.play(); // 播放涟漪
ripple.changePlayingState(); // 切换状态
ripple.set('rippleOptionKey', value); // 更新原始涟漪状态

... 


/** 在移除 canvas 或父级 div 元素节点前请先注销涟漪 */
ripple.destroy();

状态

此软件包是 MrMudBean 生态系统的一部分。 它使用严格的 TypeScript 编写，并通过 Rollup 构建进行验证。 虽然单元测试较少，但 API 稳定，并在生产环境中大量使用。