WPF之TextBlock控件实现字体聚光灯照亮的效果

最新推荐文章于 2024-09-14 23:32:22 发布

一只毛驴成长记

最新推荐文章于 2024-09-14 23:32:22 发布

阅读量122

点赞数 1

分类专栏： WPF 文章标签： wpf

本文链接：https://blog.csdn.net/xl296336767/article/details/142169906

版权

WPF 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：

实现思路：

通过TextBlock.Clip设置EllipseGeometry来实现聚光的效果；

添加动画使其移动；

最后添加相同TextBlock作为背景。

思路参考于收费大佬，欢迎点赞与交流哦！！！

代码实现：

<Canvas>
    <TextBlock Text="🐱‍🐉聚光灯照亮😂" FontSize="64" FontWeight="ExtraLight">
        <TextBlock.Foreground>
            <LinearGradientBrush SpreadMethod="Repeat" StartPoint="0,0" EndPoint="1,0">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.00" Color="LawnGreen"/>
                    <GradientStop Offset="0.25" Color="GreenYellow"/>
                    <GradientStop Offset="0.50" Color="Yellow"/>
                    <GradientStop Offset="0.75" Color="SkyBlue"/>
                    <GradientStop Offset="1.00" Color="DeepSkyBlue"/>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </TextBlock.Foreground>
    </TextBlock>
    <TextBlock Text="🐱‍🐉聚光灯照亮😂"  FontSize="64" FontWeight="ExtraLight" Foreground="Red">
        <TextBlock.Clip >
            <GeometryGroup>
                <EllipseGeometry RadiusX="42" RadiusY="42" Center="-38,42">
                    <EllipseGeometry.Transform>
                        <TranslateTransform x:Name="TranslateTransform"/>
                    </EllipseGeometry.Transform>
                </EllipseGeometry>
            </GeometryGroup>
        </TextBlock.Clip>
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="TextBlock.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimation Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="X" From="0" To="600" Duration="0:0:5" BeginTime="0:0:1"/>
                        <DoubleAnimation Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="X" From="600" To="0" Duration="0:0:5" BeginTime="0:0:7"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>
</Canvas>