After Effects脚本需求：实现图层面板头部展开功能

需求：开发AE脚本，实现点击箭头后，图层面板头部展开为指定样式的交互效果。

由于AE原生ExtendScript无法直接修改内置图层面板的UI结构，推荐通过**Adobe CEP（Common Extensibility Platform）**开发自定义面板扩展，实现类似的展开/收起交互，同时可关联内置图层面板的功能。

实现步骤与核心代码 #

1. CEP面板HTML结构（index.html） #

负责UI展示和交互逻辑，实现箭头点击的展开/收起动画：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .panel-header {
            display: flex;
            align-items: center;
            padding: 8px;
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
        .expand-arrow {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            transition: transform 0.2s;
        }
        .panel-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s;
            background-color: #444;
            padding: 0 8px;
        }
        .panel-content.expanded {
            max-height: 200px;
            padding: 8px;
        }
        .expand-arrow.expanded {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="panel-header" id="header">
        <svg class="expand-arrow" viewBox="0 0 24 24">
            <path d="M7 10l5 5 5-5z" fill="#fff"/>
        </svg>
        <span>图层控制</span>
    </div>
    <div class="panel-content" id="content">
        <p>可在此添加图层筛选、显示模式切换等功能选项</p>
        <button id="syncLayers">同步当前合成图层</button>
    </div>

    <script>
        const header = document.getElementById('header');
        const content = document.getElementById('content');
        const arrow = document.querySelector('.expand-arrow');

        // 点击箭头切换展开/收起状态
        header.addEventListener('click', () => {
            content.classList.toggle('expanded');
            arrow.classList.toggle('expanded');
        });

        // 与AE脚本通信，获取图层数据
        document.getElementById('syncLayers').addEventListener('click', () => {
            window.__adobe_cep__.evalScript('getCurrentLayers()', (result) => {
                console.log('当前图层:', result);
                // 可根据返回结果更新面板内容
            });
        });
    </script>
</body>
</html>

2. ExtendScript脚本（script.jsx） #

负责与AE内核交互，获取合成图层信息：

// 获取当前激活合成的所有图层名称
function getCurrentLayers() {
    const proj = app.project;
    if (!proj || !proj.activeItem || !(proj.activeItem instanceof CompItem)) {
        return "请先打开一个合成";
    }
    const comp = proj.activeItem;
    const layerNames = [];
    for (let i = 1; i <= comp.numLayers; i++) {
        layerNames.push(comp.layer(i).name);
    }
    return layerNames.join(',');
}

3. CEP扩展配置文件（CSXS/manifest.xml） #

定义扩展的基本信息，让AE识别并加载：

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest Version="7.0" ExtensionBundleId="com.your.layerpanel" ExtensionBundleVersion="1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <ExtensionList>
        <Extension Id="com.your.layerpanel.main" Version="1.0.0"/>
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList>
            <Host Name="AE" Version="[13.0,)" />
        </HostList>
        <LocaleList>
            <Locale Code="All"/>
        </LocaleList>
        <RequiredRuntimeList>
            <RequiredRuntime Name="CSXS" Version="7.0"/>
        </RequiredRuntimeList>
    </ExecutionEnvironment>
    <DispatchInfoList>
        <Extension Id="com.your.layerpanel.main">
            <DispatchInfo>
                <Resources>
                    <MainPath>./index.html</MainPath>
                    <ScriptPath>./script.jsx</ScriptPath>
                    <CEFCommandLine>--allow-file-access-from-files</CEFCommandLine>
                </Resources>
                <Lifecycle>
                    <AutoVisible>true</AutoVisible>
                </Lifecycle>
                <UI>
                    <Type>Panel</Type>
                    <Menu>图层扩展面板</Menu>
                    <Geometry>
                        <Size>300 400</Size>
                    </Geometry>
                </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>

部署说明 #

1. 将上述文件按以下目录结构打包：

   扩展文件夹/
   ├─ CSXS/
   │  └─ manifest.xml
   ├─ index.html
   └─ script.jsx
   

2. 将文件夹放入AE的CEP扩展目录（Windows：C:\Program Files (x86)\Common Files\Adobe\CEP\extensions；Mac：~/Library/Application Support/Adobe/CEP/extensions）
3. 重启AE，在「窗口」菜单中找到自定义的「图层扩展面板」
4. 需在AE首选项中开启「允许脚本写入文件和访问网络」选项

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