129 lines
5.1 KiB
TypeScript
129 lines
5.1 KiB
TypeScript
/**
|
||
* 核心卡片配置对象
|
||
*/
|
||
export interface CardConfig {
|
||
version: string; // 配置文件版本，例如 "1.0.0"
|
||
id: string; // 唯一标识符
|
||
metadata: {
|
||
name: string; // 卡片名称（内部管理用）
|
||
createdAt: number; // 创建时间戳
|
||
};
|
||
|
||
// 1. 基础内容配置
|
||
content: {
|
||
imageUrl: string; // 图片资源地址（支持 base64 或 URL）
|
||
imageFit: 'cover' | 'contain' | 'fill';
|
||
imageScale: number; // 图片内部缩放 (1.0 = 原大)
|
||
imageOffset: { x: number; y: number }; // 图片在容器内的偏移
|
||
};
|
||
|
||
// 2. 容器样式配置
|
||
appearance: {
|
||
width: number; // 卡片宽度
|
||
aspectRatio: number; // 宽高比 (例如 0.714)
|
||
borderRadius: number; // 圆角大小 (px)
|
||
backgroundColor: string; // 兜底背景色
|
||
border: {
|
||
width: number;
|
||
color: string;
|
||
style: 'solid' | 'double' | 'groove';
|
||
};
|
||
shadow: {
|
||
x: number;
|
||
y: number;
|
||
blur: number;
|
||
spread: number;
|
||
color: string;
|
||
opacity: number;
|
||
};
|
||
};
|
||
|
||
// 3. 交互逻辑配置 (Hover-tilt 映射)
|
||
interaction: {
|
||
// 基础交互参数
|
||
tiltMax: number; // 最大倾斜角度
|
||
perspective: number; // 透视距离
|
||
scaleOnHover: number; // 悬停时的放大倍数
|
||
speed: number; // 过渡动画速度
|
||
gyroscope: boolean; // 是否开启移动端陀螺仪
|
||
|
||
// Hover-tilt 特定选项
|
||
tiltFactor: number; // 水平倾斜强度
|
||
tiltFactorY: number; // 垂直倾斜强度
|
||
scaleFactor: number; // 缩放系数
|
||
enterDelay: number; // 进入延迟 (毫秒)
|
||
exitDelay: number; // 退出延迟 (毫秒)
|
||
|
||
// vanilla-tilt.js 属性
|
||
reverse: boolean; // 反转倾斜方向
|
||
startX: number; // X轴起始倾斜角度
|
||
startY: number; // Y轴起始倾斜角度
|
||
scale: number; // 缩放比例
|
||
transition: boolean; // 是否设置进入/退出过渡
|
||
axis: 'x' | 'y' | 'xy'; // 启用哪个轴（xy表示无限制）
|
||
reset: boolean; // 退出时是否重置倾斜效果
|
||
resetToStart: boolean; // 退出重置是否回到起始位置
|
||
easing: string; // 进入/退出缓动函数
|
||
|
||
// 眩光效果
|
||
glare: boolean; // 是否启用眩光效果
|
||
maxGlare: number; // 最大眩光透明度
|
||
glarePrerender: boolean; // 是否预先渲染眩光元素
|
||
|
||
// 事件监听
|
||
mouseEventElement: string; // 监听鼠标事件的元素选择器
|
||
fullPageListening: boolean; // 是否在整个文档上监听鼠标事件
|
||
|
||
// 陀螺仪设置
|
||
gyroscopeMinAngleX: number; // X轴陀螺仪最小角度
|
||
gyroscopeMaxAngleX: number; // X轴陀螺仪最大角度
|
||
gyroscopeMinAngleY: number; // Y轴陀螺仪最小角度
|
||
gyroscopeMaxAngleY: number; // Y轴陀螺仪最大角度
|
||
gyroscopeSamples: number; // 陀螺仪采样数量
|
||
|
||
// 弹簧物理选项
|
||
springOptions: {
|
||
stiffness: number; // 刚度
|
||
damping: number; // 阻尼
|
||
};
|
||
tiltSpringOptions: {
|
||
stiffness: number; // 倾斜动画的刚度
|
||
damping: number; // 倾斜动画的阻尼
|
||
};
|
||
};
|
||
|
||
// 4. 视觉效果配置
|
||
visualEffects: {
|
||
holo: {
|
||
type: 'none' | 'rainbow' | 'sparkle' | 'galaxy' | 'glass';
|
||
intensity: number; // 0-1 强度
|
||
blendMode: string; // 例如 'color-dodge', 'screen'
|
||
opacity: number; // 全息层透明度
|
||
colorShift: boolean; // 是否随角度色相旋转
|
||
};
|
||
glare: {
|
||
enabled: boolean;
|
||
opacity: number;
|
||
blendMode: string;
|
||
};
|
||
|
||
// Hover-tilt 视觉效果
|
||
hoverTiltVisual: {
|
||
shadow: boolean; // 是否启用动态阴影
|
||
shadowBlur: number; // 阴影模糊半径
|
||
blendMode: string; // 晕影效果混合模式
|
||
glareIntensity: number; // 晕影效果强度
|
||
glareHue: number; // 晕影色调值 (0-360)
|
||
glareMask: string; // 晕影遮罩
|
||
glareMaskMode: 'match-source' | 'luminance' | 'alpha' | 'none'; // 遮罩模式
|
||
glareMaskComposite: 'add' | 'subtract' | 'exclude' | 'intersect'; // 遮罩合成
|
||
|
||
// vanilla-tilt.js 眩光相关
|
||
glareEnable: boolean; // 启用眩光效果
|
||
glarePosition: string; // 眩光位置
|
||
glareBorderRadius: string; // 眩光圆角
|
||
glareOpacity: number; // 眩光透明度
|
||
};
|
||
overlayTexture?: string; // 可选的纹理贴图（如磨砂、拉丝）
|
||
};
|
||
} |