- 博客(97)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 WPF特效系列简介
WPF(Windows Presentation Foundation) 是微软推出的用于构建桌面客户端应用程序的 UI 框架，集成了矢量图形，丰富的流动文字支持，3D视觉效果和强大无比的控件模型，这使得开发人员和设计人员可以创建更好的视觉效果和不同以往的用户体验。WPF特效这一专栏利用WPF动画、Clip元素裁剪、3D图形、粒子系统等功能组合，实现了一系列前端UI特效。目录及实现效果如下：1、WPF实现地震波警示效果2、WPF实现Loading条循环滚动效果3、WPF使用动画组
2020-09-04 15:49:22
6248
5
原创 WPF实现两种Loading加载特效
实现效果如下：思路：效果一利用路径动画，效果二利用关键帧动画。步骤：1、效果一环形动画类EllipseCircleAnimation.cs internal class EllipseCircleAnimation : Grid { private int ellipseCount = 5; private Color[] ellipseColors = { (Color)ColorConverter.ConvertFromString("
2020-11-12 15:25:48
1787
1
原创 WPF实现自动擦除效果
实现效果如下：思路：利用Geometry的Clip属性结合路径动画DoubleAnimationUsingPath来实现。步骤：1、窗体布局xaml <Grid> <Grid.Background> <ImageBrush ImageSource="Images/1.jpg" Stretch="Uniform"/> </Grid.Background> <
2020-11-05 11:02:26
1113
原创 WPF实现3D切图式过渡效果
实现效果如下：思路：将前后两张图片进行切割，分别赋值给3D立方体的几个面，然后进行缩放转动。步骤：1、3D立方体自定义控件My3DCubeControl布局xaml：<UserControl x:Class="_3DRollImage.My3DCubeControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http
2020-11-03 10:29:44
1097
1
原创 WPF实现手风琴照片墙展示效果
实现效果如下：思路：这里利用了Grid自适应的特点，引入GridLengthAnimation动画效果。步骤：1、GridLengthAnimation类 internal class GridLengthAnimation : AnimationTimeline { static GridLengthAnimation() { FromProperty = DependencyProperty.Register("
2020-10-27 16:26:01
901
1
原创 WPF实现照片墙拼图展示特效
实现效果如下：思路：照片自定义控件中放置两个Image分别展示照片墙图片和拼图裁切部分的图片，鼠标点击时执行旋转、位移、透明度组合动画。步骤：1、照片自定义控件MyPhotoControl public static readonly DependencyProperty PuzzleImageProperty = DependencyProperty.Register("PuzzleImage", typeof(BitmapImage), typeof(MyPhotoC
2020-09-29 16:16:47
1588
2
原创 WPF实现棋盘式图片切换效果
实现效果如下：思路：在自定义控件中放置两个Image控件，点击前后翻页按钮时对图片进行裁剪，随机打乱顺序后添加动作。步骤：1、MyImageControl控件 /// <summary> /// MyImageControl.xaml 的交互逻辑 /// </summary> public partial class MyImageControl : UserControl { public static r
2020-09-27 15:10:53
861
原创 WPF实现水面波纹特效
实现效果如下：思路：水波纹算法可以查找到很多资料，这里算法引用自博文水波纹特效，在使用时加入定时器来随机生成波纹点。步骤：1、WaterEffect.cs、water.ps、Shader.fx文件引用不再赘述2、主窗体调用布局xaml： <Grid Name="back" ClipToBounds="True"> <Grid.Background> <RadialGradientBrush Gradie
2020-09-11 11:35:21
1929
原创 WPF实现圆形菜单动态展开折叠效果
实现效果如下：思路：根据子菜单个数计算旋转角度动态生成子菜单，并设置展开折叠动画。步骤：1、自定义按钮MyButton，建立展示图像属性DisplayImage public class MyButton : Button { public static readonly DependencyProperty DisplayImageProperty = DependencyProperty.Register("DisplayImage", typeof(
2020-09-10 10:35:25
2555
3
原创 WPF实现DNA螺旋粒子动画特效
实现效果如下：步骤：1、粒子类Particle.cs /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> /// 坐标 /// </summary> public Point Position;2、粒子系统ParticleS
2020-09-08 20:55:33
842
原创 WPF实现球面放大镜效果
实现效果如下：思路：对图像按照缩放比例进行裁剪，将裁剪后图形作为3D球形Material。步骤：1、SphereMeshGenerator类，作为球形Geometry public class SphereMeshGenerator { private int slices = 64; private int stacks = 32; private Point3D center = new Point3D();
2020-09-08 09:32:01
598
原创 WPF实现平面三角形3D运动效果
实现效果如下：思路：封装三角形三个顶点和路径的三角形类，图形渲染时同步更新公共顶点三角形的顶点位置。步骤：1、三角形类Triangle.cs public Point A, B, C;//初始三个顶点 public Point VA, VB, VC;//运动的三个顶点 public Path trianglePath;//三角形路径 public Color triangleColor;//填充 public
2020-09-02 19:01:31
867
原创 WPF实现仿Glitch闪烁特效
实现效果如下：思路：利用关键帧动画和ClipPath来实现。步骤：这里仅提供一个大致思路，具体样式可以根据需求调整。1、窗体样式 <Grid Width="600" Height="300" ClipToBounds="True"> <Image Name="myBgImage" Source="Images/bg.jpg" Stretch="Fill"></Image> <Grid x:Name="myA
2020-08-28 20:52:45
1048
原创 WPF实现3D立方体波浪墙效果
实现效果如下：思路：仿照3D粒子系统，将粒子颗粒的Geometry改造为立方体，鼠标移动时将鼠标位置转为3D场景中的坐标。步骤：1、粒子类Particle.cs public Point3D Position;//位置 public double Width;//长方体底面宽 public double Height;//长方体侧面高 public int XIndex;//X位置标识 public int
2020-08-26 18:46:03
975
原创 WPF实现文字粒子闪烁动画效果
实现效果如下：思路：首先根据显示文本创建文本路径Geometry，然后在路径内随机生成圆形粒子并添加动画。步骤：1、粒子类Particle.cs public class Particle { /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> ///
2020-08-25 18:32:36
897
原创 WPF半圆形导航菜单
实现效果如下：思路：扇形自定义控件组合成半圆型菜单，再通过clip实现菜单的展开和折叠。步骤：1、扇形自定义控件CircularSectorControl窗体布局xaml： <Grid x:Name="mainGrid" MouseEnter="MainGrid_MouseEnter" MouseLeave="MainGrid_MouseLeave"> <Path x:Name="sectorPath" Data="M 200,200 0
2020-08-17 18:36:45
1229
原创 WPF实现背景灯光随鼠标闪动效果
实现效果如下：思路：将容器分割成组合三角形Path，鼠标移动时更新每个三角形的填充颜色。步骤：1、窗体xaml只需放置一个Canvas。<Canvas x:Name="container" Width="400" Height="400"></Canvas>2、交互逻辑 /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public p
2020-08-12 21:26:06
669
原创 WPF鼠标划过图片动态展示信息效果
实现效果如下：思路：自定义控件中利用Path来设置动作。步骤：1、自定义控件MyImageControl前端xaml:<UserControl x:Class="MouseOverEffect.MyImageControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft
2020-08-11 16:46:53
742
1
原创 WPF实现鼠标拖动旋转3D发光立方体效果
实现效果如下：思路：外发光效果采用立方体外面嵌套两个立方体来实现。步骤：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
2020-08-07 15:17:08
1018
1
原创 WPF实现鼠标划过点亮粒子背景特效
实现效果如下：实现思路与上一篇博文WPF实现响应鼠标位置粒子背景动画特效一致，这里主要添加了粒子透明度改变动画。以下是在该博文的基础上进行修改的：1、粒子类Particle.cs中添加初始半径属性 /// <summary> /// 初始半径 /// </summary> public double DefaultRadius;2、粒子系统类ParticleSystem.cs添加方法：
2020-08-05 16:48:22
922
1
原创 WPF实现响应鼠标位置粒子背景动画特效
实现效果如下：参考博文：WPF星空效果实现步骤：1、粒子类Particle.cs public class Particle { /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> /// 坐标 /// </summary>
2020-08-04 17:13:02
1038
原创 WPF实现字体仿开门3D效果
实现效果如下：思路：两层字体，上层字体进行旋转。步骤：1、自定义控件MyImageControl布局： <Grid MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave"> <Viewport3D > <Viewport3D.Camera> <PerspectiveCamera Position="0,0
2020-07-28 19:14:31
646
原创 WPF实现带视差的3D图片翻转特效
实现效果如下：思路：难点在于字体悬浮的视差效果，这里采用修改MeshGeometry3D的相关参数来实现。步骤：1、自定义控件MyRollControl.xaml <UserControl.Resources> <Storyboard x:Key="RotateStoryboard"> <ParallelTimeline RepeatBehavior="Forever" Storyboard.TargetNam
2020-07-23 17:38:37
765
2
原创 WPF实现手风琴式轮播图切换效果
实现效果如下：步骤：1、自定义控件MyImageControl实现图片的裁切和动画的赋值。 public partial class MyImageControl : UserControl { public static readonly DependencyProperty ShowImageProperty = DependencyProperty.Register("ShowImage", typeof(BitmapImage), typeof(M
2020-07-17 17:26:31
829
2
原创 WPF实现3D粒子波浪效果
实现效果如下：步骤：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
2020-07-13 15:19:49
1065
1
原创 WPF实现字体霓虹灯渐变动画效果
实现效果如下：思路：采用LinearGradientBrush线性渐变色刷来实现源码： <TextBlock Text="LinearGradientBrush" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.75"> <TextBlock.Foreground> <LinearGradientBrush
2020-07-09 17:41:57
1506
原创 WPF实现图片手风琴动态切换效果
实现效果如下：思路：利用WPF自带Expander控件实现点击展开折叠效果，上层采用ListBox来加载图片数据源。步骤：
2020-07-09 10:24:56
781
1
原创 WPF实现3D翻牌式倒计时特效
实现效果如下：思路：使用自定义控件，设置一个背板 MyCardControlBottom，一个卡牌翻动的前部 MyCardControlFront，一个卡牌翻动后的背部 MyCardControlBack，另外实现卡牌翻动的MyCardControl；在主窗体中设置一计时器，根据卡牌上的数字和计时器时间启动翻牌动作。主要代码：1、自定义控件MyCardControlBottom<UserControl x:Class="TurnOverCards.MyCardControlBot
2020-07-03 14:37:02
1332
原创 WPF实现Loading加载文字水波纹动画效果
实现效果如下：思路：基本原理同博文WPF实现聚光灯动画效果一致，难点在与正弦曲线的绘制和动态效果。步骤：1、自定义控件UserControl的封装添加自定义Value属性： public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(MyLoadingControl), new PropertyMet
2020-06-24 16:21:39
1245
原创 WPF实现聚光灯查看内容特效
实现效果如下：思路：该效果用到了鼠标跟随获取坐标位置，根据位置信息设置展示图像的Clip属性EllipseGeometry；同时在进入进出时添加放大缩小动作。步骤：1、自定义控件MyImageBox的封装添加展示图像和展示字体内容属性： public static readonly DependencyProperty DisplayImageProperty = DependencyProperty.Register("DisplayImage", typeof(I
2020-06-22 20:31:54
736
原创 WPF实现聚光灯照亮文字动画效果
实现效果如下：思路：在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
2020-06-22 09:54:18
1161
原创 WPF实现图片环形旋转轮动效果
实现效果如下：参考博文：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/
2020-06-18 16:44:15
1921
3
原创 WPF实现图片翻转切换特效
实现效果：思路：封装一个自定义控件，添加NormalImage和HoverImage两个依赖属性，该控件可以识别鼠标从左、上、右、下哪条边进入进出，并根据方向设置出入动作。步骤：1、自定义控件MyImageButtom的封装MyImageButtom.xaml<UserControl x:Class="ImageTransformsEffect.MyImageButtom" xmlns="http://schemas.microsoft.com/winfx/2
2020-06-15 14:00:52
1804
1
原创 WPF实现将图像转化成粒子效果
实现效果如下：这里的处理逻辑首先是将图像进行马赛克处理，然后对于每一个需要填充的粒子按照颜色的深浅度计算粒子大小，最后按照坐标进行填充。1、粒子类 public class Particle { public Point Position;//位置 public double Size;//尺寸 }2、图像处理类 public class MosaicHelper { /// <summar
2020-06-11 15:20:28
849
原创 WPF实现两种粒子背景动画效果
WPF中粒子特效的实现多数是由DispatcherTimer计时器驱动，绑定事件：每1/60s执行一帧动作来实现的，这里主要参考大神的粒子群3D动画转圈示例博文，实现效果如下：实现步骤：1、由于要实现的效果是在平面坐标下，所以将Particle类中的3D坐标/向量修改为2D坐标/向量 public class Particle { public double Decay;//消散系数 public double Life; //存在时长
2020-06-08 16:58:36
1695
1
原创 WPF使用动画组合实现搜索框动态展开折叠效果
整体效果如下：实现步骤：1、自定义控件SearchTextBox控件由圆形搜索按钮和输入框两部分组成，输入框又设置了内置提示信息，光标点击则消失，前台窗体xaml和输入框样式如下：<UserControl x:Class="SearchTextboxDemo.SearchTextBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns
2020-06-04 09:48:56
1164
原创 WPF实现Loading条循环滚动效果
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
2020-06-02 17:34:33
1251
原创 WPF一个完整的GIF制作工具实例（Part3：生成GIF）
这里生成GIF文件用的是AnimatedGifEncoder、LZWEncoder、NeuQuant，网上可以找到源码，由于该实例可对每一帧单独修改延时，所以修改了AnimatedGifEncoder中的AddFrame方法： public bool AddFrame(Image im, int ms) { if ((im == null) || !started) { return fals
2020-05-29 13:58:44
528
Microsoft.Expression.Interactions.dll和system.windows.interactivity.dll
2019-07-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人