WPF UI and cool animation

       Accidentally saw a picture, I feel very good looking, he spent some time transformed into a part of my code repository. Although not difficult but also time-consuming. Which in addition to Baidu's background is a base map, all other content are achieved through the WPF's Path, Line, TextBlock, Border and DoubleAnimation.

Results are as follows:

NeonUI.gif

Pure black background is also quite nice.

NeonUI2.gif

      Most of my blog will be set forth in the realization of ideas or principles. This Demo implementation logic is as follows:

      1, flashing border drawn by the main Path, custom color binding dependency properties, and then the color is achieved by writing related ColorAnimationUsingKeyFrames. Path means may be brushed unskilled in Blend. I used more, mostly related to Point Data Path points in almost all manual input.

      2, the middle "I Copy the MIUI" looming below the dotted line, in fact, a simple Line, I'll give it a MaskOpacity additional property, then the value of his OpacityMask were TranslateTransform.X displacement animation.

      3, dashed moving animation is not complex, set StrokeDashOffset property, and the property can write DoubleAnimation.

      4, flashing content for Xaml elements in the written Opacity animation.

      5, the progress bar below the similar thing also with Line realize, I define the binding properties depend on the Line of X2, each modification when no direct assignment, but to deal with DoblueAnimation, smooth sliding effect.

    Tools: Visual Studio 2017

    Project: WPF C #

     Source Download Link:

                         

   

Guess you like

Origin www.cnblogs.com/duel/p/NeonUI.html