GitHub: github.com/icochi/disn…
Gitee: gitee.com/icochi/disn…
Bilibili: www.bilibili.com/video/BV14N…
概述
利用一些 Web 特性，可以在网页中还原迪士尼电影的经典片头动画，首先可以将整体分成城堡、文字和流星三个部分。
一、 城堡动画
城堡背景可以用 clip-path 属性实现，clip-path 使用裁剪的方式创建元素的可显示区域。
前景的发光效果首先会想到使用 box-shadow 元素阴影
但是 box-shadow 只能作用于容器轮廓
而在我们想要实现的动画中阴影需要作用于图像本身
而使用 drop-shadow 滤镜，我们可以创建一个符合图像本身形状的阴影
使用多个 drop-shadow 强化发光效果
叠加模糊滤镜消除硬边缘
完成前景的光照还需要再进行裁剪
但是 clip-path 是在滤镜效果之后发生的，边缘的发光又被截断了
只能先逐帧制作城堡画面再叠加 drop-shadow
用 JavaScript 加载城堡图片
用 Canvas 执行裁剪并调用 API 生成 dataURL 位图
把生成的位图设置为元素背景，再循环执行裁剪更新
二、文字动画
pictures 文字及迪士尼文字比较简单，大家可以参考源码自行分析
闪光动画中光晕的基础形状并不规则，需要借助 SVG 形状和 drop-shadow 属性
path 元素的 d 属性能以 css 属性形式存在，于是光晕的变形动画可以用 css 关键帧动画来实现
路径变形动画是否生效关键在于，两个关键帧的形状坐标数量必须一致
三、流星动画
对流星动画进行拆解，我们要绘制两段弧线以及一个圆点
使用 SVG circle 元素绘制圆环
并设置 stroke-dasharray 和 stroke-dashoffset 制作弧线
关于这两个属性的详细说明，可以参考我的另一个视频
翻转元素并调整角度，就得到了第一段圆弧
重复这一过程生成第二段圆弧
使用关键帧动画更新 stroke-dashoffset 属性实现画线动画
而最后的圆点动画有很多方法都能实现
所有分解动画都完成后，将它们合成并调整先后顺序
