偶然看见了一张图，感觉挺好看的，花了点时间将他转化成了我代码仓库的一部分。虽然不难但也费时间。其中除了背景是百度的一张底图，其他所有内容均通过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. 浅析vue混入(mixin)

    vue中的混入,可以在一定程度上提高代码的复用性.通俗来说,混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”.但是与继承不同的是,继承一般都跟随着属性的重写与合并,混入在不同 ...

  2. 基于netty4.x开发时间服务器

    在写代码之前 先了解下Reactor模型: Reactor单线程模型就是指所有的IO操作都在同一个NIO线程上面完成的,也就是IO处理线程是单线程的.NIO线程的职责是: (1)作为NIO服务端,接收 ...

  3. php权重分配

    假设有3个人  能力的权重 分别为 A=>1,B=>2,C=>3,那么当有6个案子的时候  A分配到1个,B分配到2个,C分配到3个,这很合理,但是当案子只有5个,或者有7个的时候, ...

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

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

  5. MySQL必知必会(组合Where子句，Not和In操作符)

    SELECT prod_id, prod_price, prod_name FROM products ; SELECT prod_id, prod_price, prod_name FROM pro ...

  6. http状态码_____ 204/206/200

    HTTP的状态码有很多种,主要有五个大类 1xx(临时响应) 2xx(成功) 3xx(已重定向) 4xx(请求错误) 5xx(服务器错误) 每个大类还对应一些具体的分类.平时我们接触比较多的是200. ...

  7. [TimLinux] docker CentOS7入门——服务(2)

    1. 服务含义 分布式应用中,应用的不同部分即称为“服务”,视频网站是一个分布式应用,包含有:数据的存储,视频的转码,前端展示等部分,对应的这些部分即称为相应的服务.docker平台中,定义.运行和扩 ...

  8. C语言之推箱子游戏代码

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:Yan_Less 正文 新手注意:如果你学习遇到问题找不到人解答,可以点 ...

  9. ARTS-S golang单元测试

    golang单元测试 在$GOPATH的src目录下建目录demo_unittest 在目录demo_unittest下建文件calc.go,内容如下: package demo_unittest f ...

  10. windows安装apache+mysql+php

    文件打包下载,包括apache.mysql.php,地址如下: 链接: https://pan.baidu.com/s/1Mcm4OxJV45UWsktBycw7mQ 密码: dwy6 安装apach ...