dnazhd的博客

WPF(Windows Presentation Foundation) 是微软推出的用于构建桌面客户端应用程序的 UI 框架，集成了矢量图形，丰富的流动文字支持，3D视觉效果和强大无比的控件模型，这使得开发人员和设计人员可以创建更好的视觉效果和不同以往的用户体验。WPF特效这一专栏利用WPF动画、Clip元素裁剪、3D图形、粒子系统等功能组合，实现了一系列前端UI特效。目录及实现效果如下：1、WPF实现地震波警示效果2、WPF实现Loading条循环滚动效果3、WPF使用动画组

实现效果如下：思路：效果一利用路径动画，效果二利用关键帧动画。步骤：1、效果一环形动画类EllipseCircleAnimation.cs internal class EllipseCircleAnimation : Grid { private int ellipseCount = 5; private Color[] ellipseColors = { (Color)ColorConverter.ConvertFromString("

实现效果如下：思路：利用Geometry的Clip属性结合路径动画DoubleAnimationUsingPath来实现。步骤：1、窗体布局xaml <Grid> <Grid.Background> <ImageBrush ImageSource="Images/1.jpg" Stretch="Uniform"/> </Grid.Background> <

实现效果如下：思路：将前后两张图片进行切割，分别赋值给3D立方体的几个面，然后进行缩放转动。步骤：1、3D立方体自定义控件My3DCubeControl布局xaml：<UserControl x:Class="_3DRollImage.My3DCubeControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http

实现效果如下：思路：这里利用了Grid自适应的特点，引入GridLengthAnimation动画效果。步骤：1、GridLengthAnimation类 internal class GridLengthAnimation : AnimationTimeline { static GridLengthAnimation() { FromProperty = DependencyProperty.Register("

实现效果如下：思路：

实现效果如下：思路：照片自定义控件中放置两个Image分别展示照片墙图片和拼图裁切部分的图片，鼠标点击时执行旋转、位移、透明度组合动画。步骤：1、照片自定义控件MyPhotoControl public static readonly DependencyProperty PuzzleImageProperty = DependencyProperty.Register("PuzzleImage", typeof(BitmapImage), typeof(MyPhotoC

实现效果如下：思路：在自定义控件中放置两个Image控件，点击前后翻页按钮时对图片进行裁剪，随机打乱顺序后添加动作。步骤：1、MyImageControl控件 /// <summary> /// MyImageControl.xaml 的交互逻辑 /// </summary> public partial class MyImageControl : UserControl { public static r

实现效果如下：思路：水波纹算法可以查找到很多资料，这里算法引用自博文水波纹特效，在使用时加入定时器来随机生成波纹点。步骤：1、WaterEffect.cs、water.ps、Shader.fx文件引用不再赘述2、主窗体调用布局xaml： <Grid Name="back" ClipToBounds="True"> <Grid.Background> <RadialGradientBrush Gradie

实现效果如下：思路：根据子菜单个数计算旋转角度动态生成子菜单，并设置展开折叠动画。步骤：1、自定义按钮MyButton，建立展示图像属性DisplayImage public class MyButton : Button { public static readonly DependencyProperty DisplayImageProperty = DependencyProperty.Register("DisplayImage", typeof(

实现效果如下：步骤：1、粒子类Particle.cs /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> /// 坐标 /// </summary> public Point Position;2、粒子系统ParticleS

实现效果如下：思路：对图像按照缩放比例进行裁剪，将裁剪后图形作为3D球形Material。步骤：1、SphereMeshGenerator类，作为球形Geometry public class SphereMeshGenerator { private int slices = 64; private int stacks = 32; private Point3D center = new Point3D();

实现效果如下：思路：封装三角形三个顶点和路径的三角形类，图形渲染时同步更新公共顶点三角形的顶点位置。步骤：1、三角形类Triangle.cs public Point A, B, C;//初始三个顶点 public Point VA, VB, VC;//运动的三个顶点 public Path trianglePath;//三角形路径 public Color triangleColor;//填充 public

实现效果如下：思路：利用关键帧动画和ClipPath来实现。步骤：这里仅提供一个大致思路，具体样式可以根据需求调整。1、窗体样式 <Grid Width="600" Height="300" ClipToBounds="True"> <Image Name="myBgImage" Source="Images/bg.jpg" Stretch="Fill"></Image> <Grid x:Name="myA

实现效果如下：思路：仿照3D粒子系统，将粒子颗粒的Geometry改造为立方体，鼠标移动时将鼠标位置转为3D场景中的坐标。步骤：1、粒子类Particle.cs public Point3D Position;//位置 public double Width;//长方体底面宽 public double Height;//长方体侧面高 public int XIndex;//X位置标识 public int

实现效果如下：思路：首先根据显示文本创建文本路径Geometry，然后在路径内随机生成圆形粒子并添加动画。步骤：1、粒子类Particle.cs public class Particle { /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> ///

实现效果如下：思路：扇形自定义控件组合成半圆型菜单，再通过clip实现菜单的展开和折叠。步骤：1、扇形自定义控件CircularSectorControl窗体布局xaml： <Grid x:Name="mainGrid" MouseEnter="MainGrid_MouseEnter" MouseLeave="MainGrid_MouseLeave"> <Path x:Name="sectorPath" Data="M 200,200 0

实现效果如下：思路：将容器分割成组合三角形Path，鼠标移动时更新每个三角形的填充颜色。步骤：1、窗体xaml只需放置一个Canvas。<Canvas x:Name="container" Width="400" Height="400"></Canvas>2、交互逻辑 /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public p

实现效果如下：思路：自定义控件中利用Path来设置动作。步骤：1、自定义控件MyImageControl前端xaml:<UserControl x:Class="MouseOverEffect.MyImageControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft

实现效果如下：思路：外发光效果采用立方体外面嵌套两个立方体来实现。步骤：1、xaml窗体布局 <Window.Resources> <MeshGeometry3D x:Key="CubeLightMesh" TriangleIndices="0,1,2 3,4,5 6,7,8 9,10,11 12,13,14 15,16,17 18,19,20 21,22,23 24,25,26

实现效果如下：实现思路与上一篇博文WPF实现响应鼠标位置粒子背景动画特效一致，这里主要添加了粒子透明度改变动画。以下是在该博文的基础上进行修改的：1、粒子类Particle.cs中添加初始半径属性 /// <summary> /// 初始半径 /// </summary> public double DefaultRadius;2、粒子系统类ParticleSystem.cs添加方法：

实现效果如下：参考博文：WPF星空效果实现步骤：1、粒子类Particle.cs public class Particle { /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> /// 坐标 /// </summary>

实现效果如下：思路：两层字体，上层字体进行旋转。步骤：1、自定义控件MyImageControl布局： <Grid MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"> <Viewport3D > <Viewport3D.Camera> <PerspectiveCamera Position="0,0

实现效果如下：思路：难点在于字体悬浮的视差效果，这里采用修改MeshGeometry3D的相关参数来实现。步骤：1、自定义控件MyRollControl.xaml <UserControl.Resources> <Storyboard x:Key="RotateStoryboard"> <ParallelTimeline RepeatBehavior="Forever" Storyboard.TargetNam

实现效果如下：步骤：1、自定义控件MyImageControl实现图片的裁切和动画的赋值。 public partial class MyImageControl : UserControl { public static readonly DependencyProperty ShowImageProperty = DependencyProperty.Register("ShowImage", typeof(BitmapImage), typeof(M

实现效果如下：

实现效果如下：步骤：1、3D粒子类Particle.cs public class Particle { public Point3D Position;//位置 public double Size;//尺寸 public int XIndex;//X位置标识 public int YIndex;//Y位置标识 }2、粒子系统ParticleSystem类 public class Pa

实现效果如下：思路：采用LinearGradientBrush线性渐变色刷来实现源码： <TextBlock Text="LinearGradientBrush" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.75"> <TextBlock.Foreground> <LinearGradientBrush

实现效果如下：思路：利用WPF自带Expander控件实现点击展开折叠效果，上层采用ListBox来加载图片数据源。步骤：

实现效果如下：思路：使用自定义控件，设置一个背板 MyCardControlBottom，一个卡牌翻动的前部 MyCardControlFront，一个卡牌翻动后的背部 MyCardControlBack，另外实现卡牌翻动的MyCardControl；在主窗体中设置一计时器，根据卡牌上的数字和计时器时间启动翻牌动作。主要代码：1、自定义控件MyCardControlBottom<UserControl x:Class="TurnOverCards.MyCardControlBot

实现效果如下：思路：基本原理同博文WPF实现聚光灯动画效果一致，难点在与正弦曲线的绘制和动态效果。步骤：1、自定义控件UserControl的封装添加自定义Value属性： public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(MyLoadingControl), new PropertyMet

实现效果如下：思路：该效果用到了鼠标跟随获取坐标位置，根据位置信息设置展示图像的Clip属性EllipseGeometry；同时在进入进出时添加放大缩小动作。步骤：1、自定义控件MyImageBox的封装添加展示图像和展示字体内容属性： public static readonly DependencyProperty DisplayImageProperty = DependencyProperty.Register("DisplayImage", typeof(I

实现效果如下：思路：在Canvas里同一位置放置两个TextBlock，对上层字体设置路径动画，并设置其Clip为EllipseGeometry。步骤：1、窗体xaml<Window x:Class="SpotlightDemo.SpotlightExample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.m

实现效果如下：参考博文：WPF竖环形菜单实现步骤：1、图片自定义控件MyImageBox的封装<UserControl x:Class="RoundRotationEffect.MyImageBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/

实现效果：思路：封装一个自定义控件，添加NormalImage和HoverImage两个依赖属性，该控件可以识别鼠标从左、上、右、下哪条边进入进出，并根据方向设置出入动作。步骤：1、自定义控件MyImageButtom的封装MyImageButtom.xaml<UserControl x:Class="ImageTransformsEffect.MyImageButtom" xmlns="http://schemas.microsoft.com/winfx/2

WPF中粒子特效的实现多数是由DispatcherTimer计时器驱动，绑定事件：每1/60s执行一帧动作来实现的，这里主要参考大神的粒子群3D动画转圈示例博文，实现效果如下：实现步骤：1、由于要实现的效果是在平面坐标下，所以将Particle类中的3D坐标/向量修改为2D坐标/向量 public class Particle { public double Decay;//消散系数 public double Life; //存在时长

整体效果如下：实现步骤：1、自定义控件SearchTextBox控件由圆形搜索按钮和输入框两部分组成，输入框又设置了内置提示信息，光标点击则消失，前台窗体xaml和输入框样式如下：<UserControl x:Class="SearchTextboxDemo.SearchTextBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns

Loading动态滚动效果如下：1、窗体xaml<Window x:Class="LoadDemo.LoadWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/e

最近看到一个实时报警的大屏展示页面，里面有一个动态报警展示的效果，觉得可以用WPF来实现下，于是趁着没事写一下。实现效果如图：主要参考博文https://www.cnblogs.com/lonelyxmas/p/10799166.html1、主页面xaml<Window x:Class="DazzleEffect.MainWindow" xmlns="h...