首页 > 其他分享 >WPF炫酷UI及动画

WPF炫酷UI及动画

时间:2024-05-22 23:08:25浏览次数:18  
标签:动画 实现 炫酷 Path UI WPF Line 属性

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

     源码下载链接:

                         

   

  标签: WPF

标签:动画,实现,炫酷,Path,UI,WPF,Line,属性
From: https://www.cnblogs.com/webenh/p/18207321

相关文章

  • 开源Blazor UI组件库精选:让你的Blazor项目焕然一新!
    今天给大家推荐一些开源、美观的BlazorUI组件库,这些优秀的开源框架和项目不仅能够帮助开发者们提高开发效率,还能够为他们的项目带来更加丰富的用户体验。注:排名不分先后,都是十分优秀的开源框架和项目​AntDesignBlazorAntDesignBlazor是一个基于Blazor的前端UI组件库,......
  • Wpf UI框架 MaterialDesign 的使用记录
    近期公司有桌面客户端的开发需求,并且对样式和界面反馈有一定的要求,对比各种开源UI框架后确认使用MaterialDesign。1、引入框架MaterialDesignThemes,注意下对应的版本号,我用的2.6.0的。原因嘛视频教程就是这个版本。  2、App.xaml中引用样式文件注释下面的可以先不用加,后面......
  • WPF 给类库设置设计时使用的资源字典
    WPF给类库设置设计时使用的资源字典 在开发多语言版本时,我将界面显示的文本保存在语言资源zh.xaml和en.xaml中,但程序启动,加载语言资源时是外部的配置文件决定的,因此语言资源我无法添加在App.xaml文件中,而开发单个XAML界面时,设计器将会因为找不到资源文件的存在,而拿不到资......
  • WPF 实现触摸滑动功能
    自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置 12345678910111213141516171819202122232425262728double mPointY;//触摸点的Y坐标double mOffsetY;//滚动条当前位置bool mIsTouch= false;//是否触......
  • GeneralUpdate .Net5 WPF、Winfrom、控制台应用自动更新组件
    https://www.bilibili.com/video/BV1aX4y137dd/?vd_source=43d3e66cc2ad46bac54dfb0c6a3a0a23    GeneralUpdate教程2022.4.23 https://www.bilibili.com/video/BV1FT4y1Y7hV/?vd_source=43d3e66cc2ad46bac54dfb0c6a3a0a23   https://mp.weixin.qq.com/s/pR......
  • 全局设置element-ui Dialog组件的close-on-click-modal属性为false
    前言element组件库的Dialog对话框默认可以通过点击modal关闭Dialog,即点击空白处弹框可关闭。属性  importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'//默认主题//全局修改默认配置,点击空白处不能关闭弹窗ElementUI.Dialog.......
  • element ui 动态表头不刷新问题
    今天弄vue前端,动态表头出现如题问题。代码如下<el-table-columnv-for="(item,index)intableHeads":key="index"><templateslot="header">//处理表头业务逻辑……<div>{{item.num}}</div></template></el-table-column>......
  • 基于WPF+Sqlite开发抽奖软件【内附源码】
    在很早之前,就想过开发一款抽奖软件,却一直没有实际去做,最近经过一段时间的准备,终于开发出了一款基于WPF+Sqlite版的抽奖软件,包括客户端和管理端。本项目主要是为了熟悉WPF开发流程,仅供学习分享使用,如有不足之处,还请指正。 涉及知识点 抽奖软件是包括客户端和管理端,在抽奖软件......
  • vue搭建脚手架 出现问题Command vue init requires a global addon to be installed.
    使用vue-cli脚手架命令vueinitwebpackmy-App创建项目回车时显示Commandvueinitrequiresa global addontobeinstalled.Pleaserun yarn globaladd@vue/cli-initandtryagain. 解决方法:npminstall-g@vue/cli-init 然后创建项目,正常。 ......
  • 使用安卓片段创建动态-UI-全-
    使用安卓片段创建动态UI(全)原文:zh.annas-archive.org/md5/483E44769E1E47CD0C380E136A5A54D5译者:飞龙协议:CCBY-NC-SA4.0前言移动应用静态用户界面挤在微小屏幕上的日子已经一去不复返了。如今,用户期望移动应用是动态且高度交互的。他们希望在中分辨率智能手机上查看应用......