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

效果如下：

​

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

​

我的博客中大多都会阐述实现思路或原理。本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#

源码下载链接：

​

WPF炫酷UI及动画的更多相关文章

  1. 8个超炫酷仿HTML5动画源码

    1.jQuery万年历插件 带农历老皇历功能 这是一款基于jQuery的日历插件,这款日历插件和之前分享的日历控件有很大差异,它是一本万年历,包含了农历已经老皇历的功能,是一个挑好日子的工具.同时日历 ...

  2. 来瞧瞧，WPF 炫酷走马灯!

    来瞧瞧,WPF 炫酷走马灯! 控件名:SpotLight 作者:WPFDevelopersOrg 原文链接: https://github.com/WPFDevelopersOrg/WPFDevelo ...

  3. FIR.im Weekly - 让炫酷 UI 为 APP 增色

    上周我看到一些不错的设计分享,挑选了几个比较全的 GitHub 资源推荐给大家.此外,还精选了一些实用的 iOS,Android 干货文章. iOS 炫酷动画资源 @荧星诉语 收集整理了主流炫酷动画框 ...

  4. 手把手带你做一个超炫酷loading成功动画view Android自定义view

    写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾 ...

  5. C# Winform实现炫酷的透明动画界面

    做过.NET Winform窗体美化的人应该都很熟悉UpdateLayeredWindow吧,UpdateLayeredWindow可以实现窗体的任意透明,效果很好,不会有毛边.不过使用这个API之后 ...

  6. HTML5 Canvas 超炫酷烟花绽放动画教程

    这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特效,效果非常逼真,但是毕竟是电脑模拟,带女朋友看就算了,效果还是差了点,呵呵.这个HTML5 Canvas动画有一 ...

  7. 如何在你的blog中添加炫酷的飘雪动画效果

    将下面的代码复制到你的设置栏下页眉html代码框中即可 <script> (function($){$.fn.snow=function(options){,maxSize:,newOn: ...

  8. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  9. 使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js ...

随机推荐

  1. netty的调优-及-献上写过注释的源码工程

    Netty能干什么? Http服务器 使用Netty可以编写一个 Http服务器, 就像tomcat那样,能接受用户发送的http请求, , 只不过没有实现Servelt规范, 但是它也能解析携带的参 ...

  2. 人人学IoT 助学思维导图

    原来学IoT记录的学习笔记,学完之后,对考试和工作都有些帮助,特分享给大家 笔记分享链接 https://share.mindmanager.com/#publish/s6TqusKeSG6aflXL ...

  3. 虚拟环境创建的另外一种方法：anaconda

    anaconda基本使用- 主要是一个虚拟环境管理器-还是一个安装包管理器- conda list: 显示anaconda安装的包- conda env list: 显示anaconda你的虚拟环境列 ...

  4. “setTimeout、Promise、Async/Await 的区别”题目解析和扩展

    解答这个题目之前,先回顾下JavaScript的事件循环(Event Loop). JavaScript的事件循环 事件循环(Event Loop):同步和异步任务分别进入不同的执行"场所& ...

  5. cocoapods 安装使用详解

    http://blog.csdn.net/showhilllee/article/details/38398119 http://www.jianshu.com/p/1222dd6c4271  删除 ...

  6. 调用rest api杀死yarn上的应用

    调用rest api杀死yarn上的应用 调用yarn reat api,通过app name 获取application id public static String getApplication ...

  7. 声明式服务调用Feign

    什么是 Feign Feign 是种声明式.模板化的 HTTP 客户端(仅在 consumer 中使用).   什么是声明式,有什么作用,解决什么问题? 声明式调用就像调用本地方法一样调用远程方法;无 ...

  8. vue2.5 + element UI el-table 导出Excel

    安装依赖 npm install --save xlsx file-saver 新建excelHelper.js \src\utils\目录下新建excelHelper.js文件 import Vue ...

  9. 【Maven】常用命令

    [Maven]常用命令 转载:https://www.cnblogs.com/yangchongxing/p/10267028.html Maven Jar 搜索:https://mvnreposit ...

  10. flask之分析线程和协程

    flask之分析线程和协程 01 思考:每个请求之间的关系 我们每一个请求进来的时候都开一个进程肯定不合理,那么如果每一个请求进来都是串行的,那么根本实现不了并发,所以我们假定每一个请求进来使用的是线 ...