本文介绍了如何使用WPF的Path、Line、TextBlock、Border和DoubleAnimation等元素创建一款炫酷的霓虹灯效果UI。通过ColorAnimationUsingKeyFrames实现闪烁边框，使用Line和OpacityMask配合TranslateTransform.X位移动画制作虚线移动效果，同时利用Opacity动画使内容闪烁。下方进度条效果由Line和DoubleAnimation完成平滑滑动。详细源码可在作者博客中获取。
偶然看见了一张图，感觉挺好看的，花了点时间将他转化成了我代码仓库的一部分。虽然不难但也费时间。其中除了背景是百度的一张底图，其他所有内容均通过WPF的Path、Line、TextBlock、Border以及DoubleAnimation来实现。
效果如下：
纯黑色背景也还蛮好看的。
实现逻辑如下：
1、闪烁的边框主要通过Path来绘制，颜色binding了自定义的依赖属性，然后通过对颜色写相关的ColorAnimationUsingKeyFrames实现。Path不熟练可借助Blend中的画笔绘制。 我用的比较多，大多Path中的Data的相关Point点几乎都是手动输入。
2、中间“I Copy the MIUI”下面的若隐若现的虚线，其实就是一个简单的Line， 我给它附加了OpacityMask属性，然后对他的MaskOpacity值进行了TranslateTransform.X位移动画。
3、虚线移动动画也不复杂，设置StrokeDashOffset属性，并对该属性写DoubleAnim
最低0.47元/天 解锁文章
扫一扫
1272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
