WPF炫酷UI及动画

       偶然看见了一张图，感觉挺好看的，花了点时间将他转化成了我代码仓库的一部分。虽然不难但也费时间。其中除了背景是百度的一张底图，其他所有内容均通过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属性，并对该属性写DoubleAnimation即可。

      4、闪烁的内容为针对Xaml中的元素写的Opacity动画。

      5、下方类似进度条的东西也是用Line实现，我定义了依赖属性binding到Line的X2上，每次修改的时候不直接赋值，而是用DoblueAnimation去处理，实现平滑滑动效果。

    工具：Visual Studio 2017

    工程：WPF C#

   霓虹灯闪烁效果源码

private void CreateBorderColorAnim()
{
    ColorAnimationUsingKeyFrames colorKeyFrms = new ColorAnimationUsingKeyFrames();
    colorKeyFrms.KeyFrames.Add(new EasingColorKeyFrame(Color.FromRgb(245, 104, 5),
        KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5d))));
    colorKeyFrms.KeyFrames.Add(new EasingColorKeyFrame(Color.FromRgb(236, 247, 8),
        KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1d))));
    colorKeyFrms.KeyFrames.Add(new EasingColorKeyFrame(Color.FromRgb(10, 124, 238),
        KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1.5d))));
    colorKeyFrms.KeyFrames.Add(new EasingColorKeyFrame(Color.FromRgb(69, 205, 199),
        KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2d))));
    colorKeyFrms.KeyFrames.Add(new EasingColorKeyFrame(Color.FromRgb(8, 83, 158),
        KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5d))));
    colorKeyFrms.KeyFrames.Add(new EasingColorKeyFrame(Color.FromRgb(234, 112, 112),
        KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3d))));
    colorKeyFrms.KeyFrames.Add(new EasingColorKeyFrame(Color.FromRgb(6, 247, 203),
        KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3.5d))));
    colorKeyFrms.KeyFrames.Add(new EasingColorKeyFrame(Color.FromRgb(78, 201, 250),
        KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4d))));

    colorKeyFrms.RepeatBehavior = RepeatBehavior.Forever;
    this.BeginAnimation(NeonColorProperty, colorKeyFrms);
}

源码下载：

 https://www.cnblogs.com/duel/p/NeonUI.html