如果你玩过宝可梦系列，一定记得每一集开头的那个经典环节：
黑影 + 闪烁 + 正面亮相 →
就是那个“Who is that Pokémon?” 的过渡动画。
最近我尝试用 纯 SVG 实现一个类似的“小黑影闪烁 → 正体出现” 的过场效果，结果比预期简单许多，而且完全不需要 JS。
这篇文章会带你：
- 看懂一个“宝可梦黑影闪烁出现”的 SVG 动画结构
- 学会用
<animate>和<animateTransform>做复杂衔接 - 掌握点击触发动画的写法
- 了解如何把多图层叠在一起形成“神秘剪影感”
文中的代码来自一个 SVG 编辑器导出（示例中是 E2 编辑器的一个脑洞组件），我会按结构拆开讲一下思路，方便你自己改造、复用。
一、效果描述
整个动画过程非常像宝可梦的开场猜谜：
- 初始状态：一张角色图的“黑影版本”显示在前景
- 用户点击：黑影开始闪烁
- 闪烁过程中：背后的“真身图”逐渐显露
- 最终：黑影完全被替换，角色显现
核心是：
- 多层 SVG 图像叠加
- 前景黑影的 opacity 不断跳动
- 点击事件触发一系列动画
最终呈现出一种“剪影 → 闪烁 → 真身亮相”的宝可梦过场感。
二、核心代码（已清洗后结构化版本）
这是你提供的 SVG 核心结构的抽象化写法（已移除与平台绑定的属性），重点展示技术结构：
<svg viewBox="0 0 400 400">
<!-- 背景层：角色真身 -->
<g>
<foreignObject>
<svg style="background-image:url('real.png');"></svg>
</foreignObject>
</g>
<!-- 前景层：黑影（剪影） -->
<g opacity="0" pointer-events="none">
<animate
attributeName="opacity"
values="0;1;0;1;0;1"
keyTimes="0;0.6;0.7;0.8;0.9;1"
begin="click"
dur="2s"
fill="freeze"
restart="never" />
<!-- 外层放大收缩 -->
<g transform="scale(1.5)">
<animateTransform
attributeName="transform"
type="scale"
begin="click"
values="1;0.666;0.666"
dur="100s"
keyTimes="0;0.005;1"
fill="freeze" />
<!-- 剪影本体 -->
<foreignObject>
<svg style="background-image:url('shadow.png');"></svg>
</foreignObject>
</g>
</g>
</svg>
下面我们详细拆解其原理。
三、动画原理拆解
1. 剪影层的闪烁：通过 opacity 实现
核心代码：
values="0;1;0;1;0;1"
keyTimes="0;0.6;0.7;0.8;0.9;1"
可以理解为：
0%：不可见
60%：亮
70%：灭
80%：亮
90%：灭
100%：亮（定格）
这种“不稳定闪烁”的节奏，就很像宝可梦的“黑影谜底即将揭晓”的演出风格。
2. 点击触发动画：SVG 的 begin="click"
SVG 支持不用 JS 也能做交互触发：
begin="click"
意味着：
用户点击这个 SVG 就会启动动画序列（仅一次，不循环）。
如果你想改成自动播放，把 click 换成 0s 即可。
3. 外层 scale 形成“冲击波式扩散”
注意代码里嵌套了两层 <animateTransform>：
- 第一层 scale：1 → 0.666
- 第二层 scale：3 → 0.666
结构叠加后，会产生一种：
黑影先突然变大，再迅速缩小至正常尺寸
这种“出现冲击”效果，正是游戏过渡动画常见的动效逻辑。
4. 多重 foreignObject 叠加实现“真身在下，剪影在上”
剪影图片：
<svg style="background-image:url('shadow.png')">
角色真身：
<svg style="background-image:url('real.png')">
由于剪影在上层，它闪烁后渐渐露出下方的真身，就会产生一个：
“谜底揭开”的视觉瞬间。
这就是宝可梦经典动画的原理。
四、如何做成自己的“宝可梦猜一猜”？
只需要准备两张图：
- shadow.png（黑色剪影版角色图）
- real.png（正常角色图）
然后把它们填进上述代码结构里即可。
你可以用这个做：
- 角色介绍
- IP 展示
- 游戏/H5 页面过场
- 公众号的互动彩蛋
- 简单的表情包互动
可玩性很高。
五、扩展玩法：还能继续做哪些变化？
你可以修改：
✓ 闪烁节奏
keyTimes 和 values 控制多少次亮灭。
✓ 缩放冲击波
scale 的终点值越大，冲击越强。
✓ 形变更自然
配合 keySplines 可以让闪烁更柔和。
✓ 多层剪影
叠两层不同色彩轮廓可做“能量燃烧”的特效。
六、附：组件化方式（面向交互设计师）
如果你希望把复杂结构可视化、拖拽式生成，也可以使用支持 SVG 动画组件化的平台。
比如在 E2编辑器里，名字就叫：
「我是谁？」
适合不想手写代码但又需要 SVG 动画效果的场景。
结语
这个动画看似复杂，其实核心由三块组成：
① 前景剪影的闪烁 opacity 序列
② 外层 scale 冲击波
③ 背景角色图层叠加
由于都是 SVG 原生特性，不依赖 JS 和框架，适合在：
- 移动端
- 公众号文章
- H5 动画
- 教学交互
- 游戏 UI
里使用。
E2 编辑器这类SVG编辑器里有很多免费效果，都值得探索和学习。
如果你对这个系列（SVG 过渡、动画、交互）有兴趣，欢迎评论告诉我你想看哪种特效。
我会继续拆更多有意思的动画结构！
