面试题：结合CSS变量与Houdini实现复杂交互效果

设计思路

CSS变量：用于存储和管理组件的可定制属性，如颜色、形状相关参数等。通过修改CSS变量的值，可动态改变组件外观，提高代码的可维护性和复用性。
Houdini：提供底层API，打破CSS常规限制，实现复杂图形和动画效果。比如使用Paint API自定义绘制图形，Animation Worklet API创建高性能动画。

关键步骤与相关技术点

定义CSS变量：在CSS中定义组件所需的变量，例如：

:root {
  --shape-color: blue;
  --shape-width: 100px;
  --shape-height: 100px;
}

使用CSS变量构建基础样式：将定义的变量应用到组件的基本样式上，如：

.component {
  width: var(--shape-width);
  height: var(--shape-height);
  background-color: var(--shape-color);
}

引入Houdini的Paint API（自定义绘制图形）：
- 注册一个Paint Worklet：

// 注册Paint Worklet
CSS.paintWorklet.addModule('paint.js');

- 在`paint.js`中定义自定义绘制逻辑，例如绘制一个自定义形状：

registerPaint('custom - shape', class {
  paint(ctx, size, props) {
    ctx.beginPath();
    // 根据需求绘制复杂形状
    ctx.moveTo(0, 0);
    ctx.lineTo(size.width, 0);
    ctx.lineTo(size.width / 2, size.height);
    ctx.closePath();
    ctx.fillStyle = props.get('--shape - color');
    ctx.fill();
  }
});

- 在CSS中使用自定义绘制：

.component {
  background: paint(custom - shape, var(--shape - color));
}

利用Houdini的Animation Worklet API（实现复杂动画）：
- 注册Animation Worklet：

// 注册Animation Worklet
CSS.animationWorklet.addModule('animation.js');

- 在`animation.js`中定义动画逻辑，例如根据鼠标位置改变形状：

class MouseShapeAnimation {
  static get inputProperties() { return ['--mouse - x', '--mouse - y']; }
  animate(time, frame, props) {
    const mouseX = props.get('--mouse - x').value;
    const mouseY = props.get('--mouse - y').value;
    // 根据鼠标位置计算形状的变化
    let newWidth = 100 + mouseX / 10;
    let newHeight = 100 + mouseY / 10;
    return {
      width: newWidth + 'px',
      height: newHeight + 'px'
    };
  }
}
registerAnimation('mouse - shape - animation', MouseShapeAnimation);

- 在CSS中触发动画，同时监听鼠标事件更新CSS变量：

<div class="component" id="component"></div>
<script>
  const component = document.getElementById('component');
  component.addEventListener('mousemove', (e) => {
    component.style.setProperty('--mouse - x', e.clientX);
    component.style.setProperty('--mouse - y', e.clientY);
  });
</script>

.component {
  animation: mouse - shape - animation 1s linear infinite;
}

面试题：结合CSS变量与Houdini实现复杂交互效果

知识考点

面试题答案

设计思路

关键步骤与相关技术点