偶然看见了一张图，感觉挺好看的，花了点时间将他转化成了我代码仓库的一部分。虽然不难但也费时间。其中除了背景是百度的一张底图，其他所有内容均通过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基本开发环境搭建

    先安装node运行环境下载网址 https://nodejs.org/en/或者http://nodejs.cn/ 检查node是否安装成功命令行窗口直接输入 $ node -v 如果输出版本号,说明 ...

  2. pom父工程dependencyManagement中的jar包在子工程中不写版本号无法引入的问题

    1.遇到的问题:  本人用的idea,然后在导入别人的项目的时候,pom文件中没有报错了,但是在maven栏目中jar包却一直报红,是因为我没写版本的原因吗?不对呀,我的父工程下已经写了springb ...

  3. 常用torch代码片段合集

    PyTorch常用代码段整理合集 本文代码基于 PyTorch 1.0 版本,需要用到以下包 import collections import os import shutil import tqd ...

  4. 【开发记录】Linux常用命令记录（一）【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  5. DRF Django REST framework 之 解析器（二）

    引入 Django Rest framework帮助我们实现了处理application/json协议请求的数据,如果不使用DRF,直接从 request.body 里面拿到原始的客户端请求的字节数据 ...

  6. Linux-Ubuntu学习笔记

    因学习Python需求,特开此贴用于记录Linux-Ubuntu操作系统的学习笔记. Linux命令-基础版 Linux命令-高级版 此贴终结了,主要用于开发过程中忘记命令时使用.

  7. ios开发入门- WebView使用

    转自:http://mahaile.blog.51cto.com/2891586/1021515/ 目标 : webview使用 在一些移动app中,有时程序会载入 外表的html 界面, andro ...

  8. 2017 CCPC秦皇岛 L题 One Dimensions Dave

    BaoBao is trapped in a one-dimensional maze consisting of  grids arranged in a row! The grids are nu ...

  9. iOS开发 为何 大不如前？原因竟然是这个？

    前言: 近期,社会上对iOS开发行业的负面信息越来越多,并且还被一些黑骗机构的胡诌八扯越描越黑,现在iOS开发按照开发者与公司招聘的数量上来看,是显示的供大于求,但是从各公司的招人计划上来看,明显是供 ...

  10. 【GTK编程】安装与测试

    版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ 前言 领导让做个类似平板触摸的GUI程序,通过触摸两块区域,实现背景图片的左右切换.本 ...