zoukankan      html  css  js  c++  java
  • WPF炫酷UI及动画

           偶然看见了一张图,感觉挺好看的,花了点时间将他转化成了我代码仓库的一部分。虽然不难但也费时间。其中除了背景是百度的一张底图,其他所有内容均通过WPF的Path、Line、TextBlock、Border以及DoubleAnimation来实现。

    效果如下:

    NeonUI.gif

    纯黑色背景也还蛮好看的。

    NeonUI2.gif

          我的博客中大多都会阐述实现思路或原理。本Demo实现逻辑如下:

          1、闪烁的边框主要通过Path来绘制,颜色binding了自定义的依赖属性,然后通过对颜色写相关的ColorAnimationUsingKeyFrames实现。Path不熟练可借助Blend中的画笔绘制。 我用的比较多,大多Path中的Data的相关Point点几乎都是手动输入。

          2、中间“I Copy the MIUI”下面的若隐若现的虚线,其实就是一个简单的Line, 我给它附加了MaskOpacity属性,然后对他的OpacityMask值进行了TranslateTransform.X位移动画。

          3、虚线移动动画也不复杂,设置StrokeDashOffset属性,并对该属性写DoubleAnimation即可。

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

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

        工具:Visual Studio 2017

        工程:WPF C#

         源码下载链接:

                             

       

  • 相关阅读:
    java免费空间!最简单的openshift免费空间上传代码教程!和FTP一样简单!
    医疗大数据解决方案
    十大经典排序算法的JS版
    读取某个目录下的所有图片并显示到pictureBox
    一些植物查询的网站链接
    植物野外识别速查图鉴
    Winform改变Textbox边框颜色
    Microsoft Access数据库操作类(C#)
    自定义GroupBox
    ArrayList用法整理
  • 原文地址:https://www.cnblogs.com/duel/p/NeonUI.html
Copyright © 2011-2022 走看看