1. 前言

几个月前 ChokCoco 大佬发布了一篇文章:

CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果

在文章里实现了一个发光的心形线条互相追逐的效果:

现在正好有空就试试用 WPF 实现一下。在实现过程中我用到这些知识和技巧:

  • Segoe Fluent 图标字体
  • 在 Blend 中创建 Path
  • 计算 Path 的长途
  • Path 的边框动画
  • VisualStudio 的设计时数据支持
  • 自定义 Effect

这篇文章将讲解如何使用这些知识和技巧模仿他的动画效果。

2. 图标字体和 Path

虽然 ChokCoco 大佬已经给了一个心形的路径,但总不能每次都期待别人给的东西。对于 WPF 开发者来说,用图标字体和 Blend 可以轻松创建一些简单的路径。

首先要找到一个心形的图标字体,在 Windows 10/11 可以直接使用 Segoe MDL2 和 Segoe Fluent 字体,这两个是随 Windows 10/11 发布的系统内置字体。下面的页面列出了可用的 Segoe Fluent 字体:

https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font

找到 HeartFill 的 Unicode 码位 eb52,然后打开 Microsoft Blend for VisualStudio 2019(更新的版本砍掉了这篇文章用到的功能),创建一个 WPF 应用,在 XAML 中输入下面这段 XAML:

<TextBlock FontFamily="Segoe Fluent Icons" Text="" Foreground="#C72335" FontSize="300"/>

这时候应该可以看到一个心形,他就是 HeartFill 的文字图标。在设计视图选中它,右键选择 Path -> Convert to Path(中文版本下应该是 转换为路径):

这样 TextBlock 就被转换为一个相同形状的 Path。接下来将 Fill 设置为空,Stroke 和 StrokeThickness 分别设置为 Black 和 10,Path 的形状就如下图所示,选中左边工具栏的 Pen 工具还可以调整 Path 的形状:

这时候对应的 XAML 如下:

 <Path Margin="0,18.75,492,137.75"
Data="M80.859375,18.75 C91.894524,18.75 102.31933,20.849609 112.13379,25.048828 C121.94823,29.248047 130.76172,35.205078 138.57422,42.919922 C140.52734,44.873062 142.40723,46.777359 144.21387,48.632813 C146.02051,50.488297 147.90039,52.392593 149.85352,54.345703 C151.70898,52.392593 153.54004,50.488297 155.34668,48.632813 C157.15332,46.777359 159.0332,44.92189 160.98633,43.066406 C168.89648,35.449219 177.66113,29.56543 187.28027,25.415039 C196.8994,21.264648 207.22655,19.189453 218.26172,19.189453 C229.58983,19.189453 240.23436,21.362305 250.19531,25.708008 C260.15625,30.053711 268.82324,35.961914 276.19629,43.432617 C283.56934,50.903336 289.37988,59.619156 293.62793,69.580078 C297.87598,79.541031 300,90.185562 300,101.51367 C300,112.25586 297.97363,122.68066 293.9209,132.78809 C289.86816,142.89551 284.0332,151.75781 276.41602,159.375 L159.375,277.58789 C156.93359,280.0293 153.95508,281.25 150.43945,281.25 C147.02148,281.25 144.0918,280.0293 141.65039,277.58789 L23.876953,158.64258 C16.259766,150.92773 10.375976,142.0166 6.2255859,131.90918 C2.0751953,121.80176 0,111.2793 0,100.3418 C0,89.111343 2.0996094,78.564468 6.2988281,68.701172 C10.498046,58.837906 16.235352,50.195328 23.510742,42.773438 C30.786131,35.351563 39.331055,29.492188 49.145508,25.195313 C58.959957,20.898438 69.53125,18.75 80.859375,18.75 z"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill"
Stroke="Black"
StrokeThickness="10">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
</Path>

3. 计算 Path 的长途

拿到路径后,下一步需要计算它的长度。这个长度不需要太精确,可以用 GetFlattenedPathGeometry 获取 PathGeometry 对象的多边形近似 Geometry,然后计算每条边的长度:

public double GetLength(Geometry geo)
{
PathGeometry path = geo.GetFlattenedPathGeometry();
double length = 0.0;
foreach (PathFigure pf in path.Figures)
{
Point start = pf.StartPoint;
foreach (PolyLineSegment seg in pf.Segments)
{
foreach (Point point in seg.Points)
{
length += (start - point).Length;
start = point;
}
}
}
return length;
}

4. Path 的边框动画

上一步计算出的 Path 长度是 898。

然后通过 StrokeDashArray 和 StrokeDashOffset 对 Path 做边框动画。因为 Path 的 StrokeThickness 是 10 像素,所以做边框动画时所有数值都要除以 10。

第一步,将 StrokeDashArray 设置为 29.9 59.9,它将 Path 的边框分成两部分,第一部分为实线,第二部分为空白。

第二步,然后用 DoubleAnimation 使 StrokeDashOffset 从 0 到 89.8 不断循环,实现线条动画的不断循环。

第三步,添加一个相同的 Path,并让它的动画延迟一秒执行,这样就实现了两个心形线条的追逐动画。

<DoubleAnimation RepeatBehavior="Forever"
Storyboard.TargetName="P1"
Storyboard.TargetProperty="StrokeDashOffset"
To="89.8"
Duration="0:0:2" /> <DoubleAnimation RepeatBehavior="Forever" BeginTime="0:0:1"
Storyboard.TargetName="P2"
Storyboard.TargetProperty="StrokeDashOffset"
To="89.8"
Duration="0:0:2" /> <Path x:Name="P1" />
<Path x:Name="P2" d:StrokeDashOffset="45" />

有关边框动画的更多内容,可以参考这两篇文章:

实用的Shape指南

用Shape做动画

5. VisualStudio 的设计时数据

现在我们只差让这两个 Path 发光了。但在这之前我们需要了解 VisualStudio 的设计时数据的概念。

设计时数据是你设置的模拟数据,使控件更易于在 XAML 设计器中进行可视化。d: 前缀用于设置设计时的属性值,它只影响设计视图,不会编译到正在运行的应用中。具体可以参考这篇文档:

在 Visual Studio 中通过 XAML 设计器使用设计时数据

这是一个很实用的小技巧,由于上面的两个 Path 重叠在一起,在设计视图难以区分,所以用了 d:StrokeDashOffset="45" 让其中一个错开。这段内容只在设计视图起作用,不会有其它副作用。

6. 自定义 Effect

在 WPF 中要做发光效果通常都是用 DropShadowEffect ,例如这样:

<Path x:Name="P1" >
<Path.Effect>
<DropShadowEffect BlurRadius="40" ShadowDepth="0" Color="#f24983"/>
</Path.Effect>
</Path>
<Path x:Name="P2" d:StrokeDashOffset="45" >
<Path.Effect>
<DropShadowEffect BlurRadius="40" ShadowDepth="0" Color="#37c1ff"/>
</Path.Effect>
</Path>

但这样颜色实在太淡,太淡了。为了解决这个问题,其中一种做法是叠加多个 Path,这样它们的 Drop Shadow 也会叠加起来,实现一个很亮的发光效果。但是这里会需要对叠加的多个 Path 都做动画,恐怕性能会很有问题。

另一种方式是自定义一个 Effect,它的代码只需要如下几行:

float Amount : register(C0);

float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 srcColor = tex2D(input, uv);
srcColor.rgb *= Amount;
srcColor.a *= Amount;
return srcColor;
}

这只是个很简单的 Effect,就是将所有像素的颜色和透明度乘以一个指定值。我不知道这种效果叫什么名字,但因为它最终实现了发光的效果,所以命名为 GlowEffect。使用 GlowEffect 配合 BlurEffect,上面暗淡的颜色就变得明亮起来:

<Grid>
<Grid.Effect>
<effects:GlowEffect Amount="5" />
</Grid.Effect>
<Grid>
<Grid.Effect>
<BlurEffect Radius="70" RenderingBias="Quality" />
</Grid.Effect>
<Path x:Name="P1b" Stroke="#f24983" />
<Path x:Name="P2b"
d:StrokeDashOffset="45"
Stroke="#37c1ff" />
</Grid>
</Grid>
<Grid>
<Path x:Name="P1" />
<Path x:Name="P2" d:StrokeDashOffset="45" />
</Grid>

关于自定义 Effect 的更多内容,可以参考 WalterLv 大佬的这篇文章:

WPF 像素着色器入门:使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码

7. 成果

最后的成果如下:

8. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab

[WPF] 用 Effect 实现线条光影效果的更多相关文章

  1. 【HLSL学习笔记】WPF Shader Effect Library算法解读之[DirectionalBlur]

    原文:[HLSL学习笔记]WPF Shader Effect Library算法解读之[DirectionalBlur] 方位模糊是一个按照指定角度循环位移并叠加纹理,最后平均颜色值并输出的一种特效. ...

  2. 【HLSL学习笔记】WPF Shader Effect Library算法解读之[Embossed]

    原文:[HLSL学习笔记]WPF Shader Effect Library算法解读之[Embossed] Embossed(浮雕效果)          浮雕效果主要有两个参数:Amount和Wid ...

  3. 【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

    原文:[HLSL学习笔记]WPF Shader Effect Library算法解读之[BandedSwirl] 因工作原因,需要在Silverlight中使用Pixel Shader技术,这对于我来 ...

  4. CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果

    本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中.通过本文,你 ...

  5. [WPF] 使用 Effect 玩玩阴影、内阴影、 长阴影

    最近在学习怎么用 Shazzam Shader Editor 编写自定义的 Effect,并试着去实现阴影.内阴影和长阴影的效果.结果我第一步就放弃了,因为阴影用到的高斯模糊算法对我来说太太太太太太太 ...

  6. WPF的Effect效果

    一.阴影效果(DropShadowEffect) <TextBlock Text="> <TextBlock.Effect> <DropShadowEffect ...

  7. WPF学习之绘图和动画

    如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是 ...

  8. WPF学习之绘图和动画--DarrenF

    Blend作为专门的设计工具让WPF如虎添翼,即能够帮助不了解编程的设计师快速上手,又能够帮助资深开发者快速建立图形或者动画的原型. 1.1   WPF绘图 与传统的.net开发使用GDI+进行绘图不 ...

  9. 仿制shazzam的简单功能,将hlsl转换为WPF中的ShaderEffect

    (此文章只是在对WPF的Effect产生兴趣才稍微研究了一点后面的知识;需要了解更多可参考https://archive.codeplex.com/?p=shazzam的源代码以及WPF基础知识) 1 ...

随机推荐

  1. Go - 如何编写 ProtoBuf 插件(二)?

    目录 前言 定义插件 使用插件 获取自定义选项 小结 推荐阅读 前言 上篇文章<Go - 如何编写 ProtoBuf 插件 (一) >,分享了使用 proto3 的 自定义选项 可以实现插 ...

  2. CF1433B Yet Another Bookshelf 题解

    Content 在一个仅有 \(0,1\) 这两个数的数列上,每次可以选择一段全为1的连续区间将其左移 \(1\) 或者右移 \(1\).现给出 \(t\) 次询问,每次询问给出一个长度为 \(n\) ...

  3. java 输入输出IO流:FileOutputStream FileInputStream

    什么是IO: 生活中,你肯定经历过这样的场景.当你编辑一个文本文件,忘记了 ctrl+s ,可能文件就白白编辑了.当你电脑上插入一个U盘,可以把一个视频,拷贝到你的电脑硬盘里.那么数据都是在哪些设备上 ...

  4. Sublime Text3 Package Control Emmet插件安装

    https://www.cnblogs.com/carrie-hong/p/4995735.html https://www.cnblogs.com/tamato-jacob-wealllostcon ...

  5. 数据改变认知——不知怎么选,用RFM模型看舔狗质量!

    假设我长得很漂亮,拥有众多追求者,但是初出闺房的我对这世界上的男人毫无认知,那么该如何选择呢?这真是一个问题! 妈妈说,愿意为我花钱的男人未必爱我,但不愿意为我花钱的男人必定不爱我,而后传授了一套RF ...

  6. 如何在Uni-app中通过腾讯IM SDK实现社交应用和直播互动等功能

    Uni-app想开发社交应用.IM.店铺客服.嵌入式社交模块.在线直播互动,这些功能Uni-app官方也没提供SDK,怎么办呢?找IM老大腾讯云啊,今天我们就在Uni-app中把腾讯云即时通讯TXIM ...

  7. IDEA微服务项目SpringBoot一键(批量)顺序启动

    找到 搜索 RunDashboard <option name="configurationTypes"> <set> <option value=& ...

  8. springboot发送邮件(含附件)

    引入maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  9. 【LeetCode】8. String to Integer (atoi) 字符串转换整数

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:字符串转整数,atoi,题解,Leetcode, 力扣,P ...

  10. java源码——两种格式日期的转换

    这里要实现1981.07.30 格式和July 30.1981格式的日期的转换. 在输入时进行日期格式的识别,并且对字符串进行操作并且输出. 难点在于字符串格式的识别和月份的转换,我用了正则表达式匹配 ...