备案控制台
开发者社区 开发与运维 文章 正文

WPF水珠效果按钮组

2017-12-18 1293
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF水珠效果按钮组效果图   相关知识 这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看 贝塞尔曲线 先来看两组图,有助于理解什么是贝塞尔曲线(图片取自维基百科,参考链接1) 二次贝塞尔曲线: P0是起点,P2是终点,P1是控...
原文: WPF水珠效果按钮组

效果图

 

相关知识

这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看

贝塞尔曲线

先来看两组图,有助于理解什么是贝塞尔曲线(图片取自维基百科,参考链接1)

二次贝塞尔曲线:

P0是起点,P2是终点,P1是控制点

三次贝塞尔曲线:

 P0是起点,P2是终点,P1是控制点1,P2是控制点2

依次连接所有点,组成线段

t是比例,在0-1之间,就是每条线段的长度都是1

贝塞尔曲线就是最里层的线段在t位置的点所组成的路径

三次贝塞尔曲线公式:B(t)=(1-t)^3*P0+3(1-t)^2*t*P1+3(1-t)*t^2*P2+t^3*P3,0<=t<=1

B(t)代表曲线上任意点,P0,1,2,3分别代表决定曲线的4个点,t代表曲线长度为1的任意取值

其他知识

没接触过贝塞尔曲线的话,可能得花些时间整理下,其他的知识就比较简单了

直角三角形,角A的对边a,临边b,斜边c

三角函数:

sinA=a/c

cosA=b/c

勾股定理:

c^2=a^2+b^2

概括介绍

这个效果难点就两部分:一是水球分离和融合时候的连接,二是主体圆的抖动

然而其实网上都有解决方案了

第一部分是在两个圆之间加个用贝塞尔曲线组成的path,用一样的颜色,其实是障眼法.见参考链接4

第二部分是用4段三次贝塞尔曲线组成的path代替Ellipse,因为Ellipse是抖动不起来的,这样就可以控制贝塞尔曲线的点来让圆抖动.见参考链接3

主体的大圆

Path画法

主体的大圆是个ToggleButton,替换模版,背景换成贝塞尔曲线组成的圆.

每个贝塞尔曲线的起点和终点就不说了,非常简单,这里主要说说控制点.

计算出1/4圆弧的中间位置的点,此时t=0.5, 三角型边长h=sin45*r

让控制点P1,P2分别在起点和终点的切线上,P1到X轴的距离等于P2到Y轴的距离L

B(0.5)=h=sin45*r=(1-0.5)^3*0+3*(1-0.5)^2*0.5*L+3*(1-0.5)*0.5^2*r+0.5^3*r

sin45*r=0+0.375*L+0.375*r+0.125*r

L=(sin45*r-0.5*r)/0.375

于是两个控制点(r,L)和(L,r)可以确定

求出来的两个点是数学的坐标,要转换成程序的坐标,对应成4个象限,无非就是加减半径,加减L,不细说了

完整的path,取半径是50,见代码

 1 <Path>
 2     <Path.Data>
 3         <PathGeometry>
 4             <PathFigure StartPoint="50,0">
 5                 <BezierSegment Point1="77.614237491541,0" Point2="100,22.385762508459" Point3="100,50"></BezierSegment>
 6                 <BezierSegment Point1="100,77.614237491541" Point2="77.614237491541,100" Point3="50,100"></BezierSegment>
 7                 <BezierSegment Point1="22.385762508459,100" Point2="0,77.614237491541" Point3="0,50"></BezierSegment>
 8                 <BezierSegment Point1="0,22.385762508459" Point2="22.385762508459,0" Point3="50,0"></BezierSegment>
 9             </PathFigure>
10         </PathGeometry>
11     </Path.Data>
12 </Path>
View Code
抖动动画

由于圆是被12个点控制的,让圆抖动,也就是对12个点做点动画

可以用关键帧动画,这样控制的比较细致,要注意的是,衔接的地方要平滑.我这里做的比较简陋,就找了一个变换后的图形,重复了5次.如果你有兴趣,可以多做些,做的越多,动画看起来表现力越强

这里我并没有去研究什么算法,就是简单的在blend里,找了一些点

见代码:

 1 <EventTrigger RoutedEvent="Click">
 2     <BeginStoryboard>
 3         <Storyboard>
 4             <PointAnimationUsingKeyFrames Storyboard.TargetName="pf_main" Storyboard.TargetProperty="StartPoint" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
 5                 <EasingPointKeyFrame Value="40,0" KeyTime="0:0:0.2"></EasingPointKeyFrame>
 6             </PointAnimationUsingKeyFrames>
 7             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main0" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
 8                 <EasingPointKeyFrame Value="68,-10" KeyTime="0:0:0.2"></EasingPointKeyFrame>
 9             </PointAnimationUsingKeyFrames>
10             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main0" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
11                 <EasingPointKeyFrame Value="115,14" KeyTime="0:0:0.2"></EasingPointKeyFrame>
12             </PointAnimationUsingKeyFrames>
13             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main0" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
14                 <EasingPointKeyFrame Value="100,66" KeyTime="0:0:0.2"></EasingPointKeyFrame>
15             </PointAnimationUsingKeyFrames>
16             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main1" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
17                 <EasingPointKeyFrame Value="100,67" KeyTime="0:0:0.2"></EasingPointKeyFrame>
18             </PointAnimationUsingKeyFrames>
19             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main1" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
20                 <EasingPointKeyFrame Value="85,111" KeyTime="0:0:0.2"></EasingPointKeyFrame>
21             </PointAnimationUsingKeyFrames>
22             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main1" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
23                 <EasingPointKeyFrame Value="33,103" KeyTime="0:0:0.2"></EasingPointKeyFrame>
24             </PointAnimationUsingKeyFrames>
25             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main2" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
26                 <EasingPointKeyFrame Value="22,103" KeyTime="0:0:0.2"></EasingPointKeyFrame>
27             </PointAnimationUsingKeyFrames>
28             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main2" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
29                 <EasingPointKeyFrame Value="-15,85" KeyTime="0:0:0.2"></EasingPointKeyFrame>
30             </PointAnimationUsingKeyFrames>
31             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main2" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
32                 <EasingPointKeyFrame Value="-6,50" KeyTime="0:0:0.2"></EasingPointKeyFrame>
33             </PointAnimationUsingKeyFrames>
34             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main3" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
35                 <EasingPointKeyFrame Value="4,9" KeyTime="0:0:0.2"></EasingPointKeyFrame>
36             </PointAnimationUsingKeyFrames>
37             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main3" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
38                 <EasingPointKeyFrame Value="41,-1" KeyTime="0:0:0.2"></EasingPointKeyFrame>
39             </PointAnimationUsingKeyFrames>
40             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main3" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
41                 <EasingPointKeyFrame Value="42,0" KeyTime="0:0:0.2"></EasingPointKeyFrame>
42             </PointAnimationUsingKeyFrames>
43         </Storyboard>
44     </BeginStoryboard>
45 </EventTrigger>
View Code

item

按钮的位置

不管是奇数个,还是偶数个,我们都想让它以Y轴对称

首先把圆分成8等份,每一份都是45度,也就是最多只能放下8个item,

 

从上图可以看出来,其实就是奇数个在线上,偶数个在两线之间

有个简单的办法,就是先在顶点依次顺时针排列,每个item间隔45度,然后再逆时针旋转,每多一个item就多转45/2度(两条分割线是45度,中间也就是45/2度),如下图:

 上图是item终点的位置,起点的位置是在圆心.

动画用DoubleAnimation控制item按钮的位移,从圆心移动到计算后的位置

 计算位置的代码:

1 //函数是弧度制 2PI是360度
2 1 a = c * Math.Sin(2 * Math.PI / 8 * i - (itemsSource.Count - 1) * 2 * Math.PI / 8 / 2);
3 2 b = c * Math.Cos(2 * Math.PI / 8 * i - (itemsSource.Count - 1) * 2 * Math.PI / 8 / 2);
水球连接的部分

连接的部分是用两个二次贝塞尔和一条直线做一个path

开始的时候,两条贝塞尔曲线的高度是0,控制点在path所在矩形的边上,然后对而塞尔曲线上面的点和控制点做动画,分别向上和内移动,最终形成上图右边的图形,然后把这个动画和item按钮向外部移动的动画结合起来,就伪装成了水球分离的效果.

 上图红色矩形就是连接部分的path.动画的过程就是Item按钮的直径和大圆相交的时候开始和item按钮一起做动画,最后移动到Item按钮直径所在的位置,整个距离就是Item的半径+item到主体的距离+蓝色的d,而蓝色的d可以通过公式求出

开始的时候也是让连接部分path在圆心的位置.定位方法和定位Item按钮的方法是完全一样的.这里就不在重复了.只说一下c边的距离是:大圆和小圆圆心的距离-连接path高度的一半

 

源码下载:WaterDropsButtonGroup.zip 

 

参考连接:

  1. https://en.wikipedia.org/wiki/B%C3%A9zier_curve
  2. https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769?fr=aladdin
  3. https://www.cnblogs.com/ArthurQQ/articles/1730214.html
  4. http://blog.csdn.net/chouglas/article/details/50967566
文章标签：
C#
关键词：
wpf按钮
杰克.陈
目录
相关文章
niunan
|
C# 前端开发
wpf中的datagrid绑定操作按钮是否显示或者隐藏
如图，需要在wpf中的datagrid的操作那列有个确认按钮，然后在某些条件下确认按钮可见，某些情况下不可见的，放在mvc里直接在cshtml页面中if..else就行了。 但是在wpf里不行。。网上搜索了好久才找到解决方法，原来只是binding那个visiable属性就行了，
niunan
6850 0
杰克.陈
|
C#
WPF 右上角带数字的按钮
原文:WPF 右上角带数字的按钮 效果如图所示   三种方案, 1:不改控件模版,布局实现,死开 2:改button模版,利用附加属性,附加附加属性,功能多了话,不利于拓展 3:继承button,添加依赖属性,接下来是这种     1:新建类 为啥交LBSButton,因为...
杰克.陈
1224 0
杰克.陈
|
C# 内存技术
好玩的WPF第二弹：电子表字体显示时间+多彩呼吸灯特效按钮
原文:好玩的WPF第二弹：电子表字体显示时间+多彩呼吸灯特效按钮 版权声明：转载请联系本人，感谢配合！本站地址：http://blog.csdn.net/nomasp https://blog.csdn.net/NoMasp/article/details/46457923 我们先来看看Quartz MS字体动态显示系统时间的效果，难度相较于上一篇也要简单许多。
杰克.陈
1863 0
杰克.陈
|
C# Windows Web App开发
WPF 应用完全模拟 UWP 的标题栏按钮
原文:WPF 应用完全模拟 UWP 的标题栏按钮 版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名吕毅（包含链接：http://blog.csdn.net/wpwalter/），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。
杰克.陈
1041 0
杰克.陈
|
C#
WPF圆角按钮与触发颜色变化
原文:WPF圆角按钮与触发颜色变化 ...
杰克.陈
1543 0
杰克.陈
|
C# Windows
WPF实用指南一：在WPF窗体的边框中添加搜索框和按钮
原文:WPF实用指南一：在WPF窗体的边框中添加搜索框和按钮 在边框中加入一些元素，在应用程序的界面设计中，已经开始流行起来。
杰克.陈
1271 0
杰克.陈
|
C#
WPF自定义控件第二 - 转盘按钮控件
原文:WPF自定义控件第二 - 转盘按钮控件 继之前那个控件，又做了一个原理差不多的控件。这个控件主要模仿百度贴吧WP版帖子浏览界面左下角那个弹出的按钮盘。希望对大家有帮助。 这个控件和之前的也差不多，为了不让大家白看，文章最后发干货。
杰克.陈
1071 0
杰克.陈
|
C# 数据安全/隐私保护
用WPF写一个登录界面，我想在输入完密码后按回车就能够验证登陆，而不需要用鼠标单击登陆按钮
原文:用WPF写一个登录界面，我想在输入完密码后按回车就能够验证登陆，而不需要用鼠标单击登陆按钮 在wpf中,将按钮的IsDefault设置为true ​​​​
杰克.陈
1168 0
杰克.陈
|
C#
WPF实现Twitter按钮效果
原文:WPF实现Twitter按钮效果 最近上网看到这个CSS3实现的Twitter按钮,感觉很漂亮,于是想用WPF来实现下. 实现这个效果,参考了CSS3 原文地址:http://www.html5tricks.
杰克.陈
1207 0
杰克.陈
|
C#
[原译]一步步教你制作WPF圆形玻璃按钮
原文:[原译]一步步教你制作WPF圆形玻璃按钮 图1   1.介绍 从我开始使用vista的时候，我就非常喜欢它的圆形玻璃按钮。WPF最好的一个方面就是允许自定义任何控件的样式。用了一段时间的Microsoft Expression Blend后。
杰克.陈
996 0