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