[WPF] 抄抄超强的苹果官网滚动文字特效实现

WPF 实现苹果官网滚动文字特效：图层镂空与渐变滚动

苹果官网产品页有一个经典特效：巨大的文字标题以镂空形式固定在前景，背景的渐变色带随页面滚动滑过文字，文字从无到有、经历一轮渐变变化再逐渐消失。本文讲解如何用 WPF 复刻这一特效，核心是一个自定义像素着色器 Effect 实现的任意形状镂空，加一个 LinearGradientBrush 渐变图层。

一、特效原理

原理只有两步：

• 在前面固定一个黑色图层，但把它裁剪出文字形状（镂空）；
  
• 在背景放一个渐变色图层，滚动页面时透过前景图层的镂空部分观察移动的渐变色；随页面向下滚动，文字从无到出现、经历渐变变化、再逐渐消失。
  

所以要做的只有两样：一个镂空图层，一个渐变图层。

二、用自定义 Effect 实现文字任意形状的镂空

利用 HLSL 像素着色器实现裁剪：用 input 的 Alpha 通道减去 blend 的 Alpha 通道作为结果输出：

1. sampler2D blend : register(s1);
3. float4 main(float2 uv : TEXCOORD) : COLOR
4. {
5.     float4 inputColor = tex2D(input, uv);
6.     float4 blendColor = tex2D(blend, uv);
7.     float4 resultColor = 0;
8.     float opacity = inputColor.a - blendColor.a;
9.     resultColor.rgb = inputColor.rgb * opacity;
10.     resultColor.a = opacity;
12.     return resultColor;
13. }

复制代码

使用时，在一个不透明元素（如黑色背景的 Grid）上应用这个 ClipEffect，把它的 Blend 属性设置为文字形状的 VisualBrush，即可在 Grid 上裁出一段文字的镂空：

1. <Grid Background="Black">
2.     <Grid.Effect>
3.         <effects:ClipEffect>
4.             <effects:ClipEffect.Blend>
5.                 <VisualBrush Stretch="None"
6.                     Visual="{Binding ElementName=TextElement}" />
7.             </effects:ClipEffect.Blend>
8.         </effects:ClipEffect>
9.     </Grid.Effect>
10. </Grid>

复制代码

三、构建倾斜渐变图层

CSS 里一个带倾斜角度的渐变只需一行：

1. linear-gradient(-3deg, #000, #000 25%, #ffb6ff, #b344ff, #000 75%, #000);

复制代码

对应到 XAML 则需要定义一个 LinearGradientBrush 并旋转 -3 度。旋转有两种实现方式：改变 StartPoint 和 EndPoint（计算较繁琐），或者直接设置 LinearGradientBrush.RelativeTransform（推荐，语义直观）。渐变停靠点按上述 CSS 依次为 0%、25%、50%、65%、75%、100% 的黑-粉紫-黑序列。

四、组合两个图层

最后把两部分组合：镂空图层固定在前景，渐变图层放进 ScrollViewer。滚动 ScrollViewer 时渐变图层滑过镂空部分，透过文字形状观察到流动的色彩，特效即告完成。

五、要点总结

• WPF 的 Effect（像素着色器）适合做"逐像素的 Alpha 运算"，镂空、内阴影等效果都基于同样的减法混合思路；
  
• VisualBrush 是 WPF 实现"以任意视觉元素为蒙版"的关键——文字、图形甚至整个控件树都能变成裁剪形状；
  
• CSS 渐变到 XAML 的迁移技巧：用 RelativeTransform 旋转代替重算 StartPoint/EndPoint；
  
• 注意 HLSL Effect 只支持旧版着色器模型，若在 .NET 6+ 的 WPF 中使用需确认编译与运行环境兼容，也可改用 Composition API 或 Win2D 的等效方案。
  

qidao123.com企服评测-应用市场 编辑提示：本文为 WPF 滚动文字特效的实现整理稿，基于图层镂空（像素着色器 Alpha 减法）+ 渐变滚动两层结构；原文的源码仓库链接已按站点规范移除，可在开源平台按 wpf design and animation lab 检索完整示例工程。