如何使顶层glare layer自动适配所有任意形状带动画的子元素

核心思路 #

放弃全局矩形眩光层，改为让所有可见子元素通过CSS变量同步眩光参数，利用伪元素在自身形状范围内渲染眩光，天然适配任意形状、任意动画的子元素，不需要使用Canvas或Clip-Path。

具体修改步骤 #

1. CSS修改 #

替换原有全局眩光样式，新增子元素眩光伪类，使用CSS变量接收动态参数：

/* 删掉原有.appletv_gloss相关全部样式 */
.appletv_rendered_layer > :first-child::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: all 0.1s ease-out;
    background: linear-gradient(var(--glare-angle, 135deg), rgba(255,255,255,var(--glare-opacity, 0.25)) 0%,rgba(255,255,255,0) 80%);
    transform: translateX(var(--glare-x, 0)) translateY(var(--glare-y, 0));
}
/* 不需要眩光的子元素可加该类关闭 */
.no-glare::before {
    display: none;
}

2. JS修改 #

步骤2.1 移除眩光层相关初始化代码

删掉原有代码中创建shineHTML、将shineHTML插入容器的相关逻辑，不需要全局眩光层。

步骤2.2 修改processMovement函数

将原有更新全局眩光层样式的逻辑，替换为给父容器设置CSS变量，所有子元素伪类会自动同步参数：

// 删掉原有shine.style.background、shine.style.transform两行代码，替换为以下内容
_thisImg.style.setProperty('--glare-angle', angle + 'deg');
_thisImg.style.setProperty('--glare-opacity', (pageY - offsets.top - bdst)/h * 0.4);
_thisImg.style.setProperty('--glare-x', ((offsetX * totalLayers) - 0.1) + 'px');
_thisImg.style.setProperty('--glare-y', ((offsetY * totalLayers) - 0.1) + 'px');

步骤2.3 修改processExit函数

将原有清空全局眩光层样式的逻辑，替换为清空父容器的CSS变量：

// 删掉原有shine.style = ''代码，替换为以下内容
elem.style.removeProperty('--glare-angle');
elem.style.removeProperty('--glare-opacity');
elem.style.removeProperty('--glare-x');
elem.style.removeProperty('--glare-y');

效果说明 #

• 眩光只会在子元素自身的形状范围内渲染，完全不会出现矩形框形态
• 自动适配任意SVG、自定义形状、带动画的子元素，不需要额外手动配置
• 子元素溢出父容器时，眩光也只会跟随子元素本身的形状显示，不会出现溢出区域的异常眩光
• 所有交互逻辑和你原有Apple TV动效完全兼容，不需要修改原有交互逻辑

内容的提问来源于stack exchange，提问作者Monwell Partee