WPF水珠效果按钮组。WPF水珠效果按钮组。

二次贝塞尔曲线,二次贝塞尔曲线

效果图

澳门蒲京网址 1

 

效果图

澳门蒲京网址 2

 

连带知识

立即一部分骨干就是是废话,网上还能够找到,我只不过是收拾了因为下.建议事先不扣,用到之时节可以回去看看

系知识

马上有骨干就是是废话,网上还能找到,我只不过是整了坐下.建议优先不扣,用到之下可以回到看看

贝塞尔曲线

优先来拘禁少组图,有助于了解啊是贝塞尔曲线澳门蒲京网址 3(图片取自维基百科,参考链接1)

仲次等贝塞尔曲线:

澳门蒲京网址 4澳门蒲京网址 5

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

其三软贝塞尔曲线:

澳门蒲京网址 6澳门蒲京网址 7

 P0凡起点,P3是极限,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底轻易取值

贝塞尔曲线

先期来拘禁少组图,有助于了解啊是贝塞尔曲线澳门蒲京网址 8(图片取自维基百科,参考链接1)

其次次等贝塞尔曲线:

澳门蒲京网址 9澳门蒲京网址 10

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

老三次贝塞尔曲线:

澳门蒲京网址 11澳门蒲京网址 12

 P0凡是起点,P3是终极,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之擅自取值

其他文化

莫点过贝塞尔曲线的言语,可能得费来时间整治下,其他的知就是比较简单了

澳门蒲京网址 13

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

三角形函数:

sinA=a/c

cosA=b/c

勾股定理:

c^2=a^2+b^2

另文化

不曾点过贝塞尔曲线的言语,可能得花来时日整理下,其他的学识就是比较简单了

澳门蒲京网址 14

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

三角形函数:

sinA=a/c

cosA=b/c

勾股定理:

c^2=a^2+b^2

包括介绍

本条功能难点就是简单有的:一是水球分离与融合上的连年,二凡是主体圆的震动

但实际上网上都发出缓解方案了

先是部分凡是于简单独到之间加个用贝塞尔曲线组成的path,用平等的颜料,其实是障眼法.见参考链接4

老二局部凡是故4段三糟糕贝塞尔曲线组成的path代替Ellipse,因为Ellipse是振动不起来的,这样就是可操纵贝塞尔曲线的接触来受圆抖动.见参考链接3

包介绍

其一功效难点就是简单片:一凡是水球分离与融合上的连接,二凡主体圆之抖动

而事实上网上还发生解决方案了

第一有凡在少只健全之间加个用贝塞尔曲线组成的path,用同样的颜料,其实是障眼法.见参考链接4

第二片段凡为此4截三不成贝塞尔曲线组成的path代替Ellipse,因为Ellipse是振动不起来的,这样便足以决定贝塞尔曲线的点来叫圆抖动.见参考链接3

核心的大圆

重点的大圆

Path画法

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

每个贝塞尔曲线的起点与极端就不说了,非常简单,这里关键说说控制点.

澳门蒲京网址 15

计量出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,见代码

澳门蒲京网址 16澳门蒲京网址 17

 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

Path画法

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

每个贝塞尔曲线的起点与顶峰就背着了,非常简单,这里要说说控制点.

澳门蒲京网址 18

计算产生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,见代码

澳门蒲京网址 19澳门蒲京网址 20

 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里,找了有的碰

见代码:

澳门蒲京网址 21澳门蒲京网址 22

 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

振动动画

出于到是吃12只点控制的,让圆抖动,也即是指向12独点做点动画

好据此要帧动画,这样控制的比细,要顾的凡,衔接的地方如果同滑.我这边开的较简陋,就摸索了一个转换后底图形,重复了5次.如果你有趣味,可以基本上开来,做的更为多,动画看起表现力越强

这边自己连无失去研究什么算法,就是简的在blend里,找了有的接触

见代码:

澳门蒲京网址 23澳门蒲京网址 24

 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

item

按钮的职位

不论是是奇数只,还是偶数独,我们还惦记吃她为Y轴对如

率先将圆分成8等客,每一样客还是45度,也便是最为多只能放下8只item,

澳门蒲京网址 25

 

自打上图可以拘留下,其实就算是奇数个在线上,偶数只当片线期间

产生只大概的方法,就是优先以巅峰依次顺时针排列,每个item间隔45过,然后再度逆时针旋转,每多一个item就基本上反45/2度(两久分割线是45度,中间为即是45/2度),如下图:

澳门蒲京网址 26

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

卡通用DoubleAnimation控制item按钮的动,从圆心移动及计算后底位置

 计算位置的代码:

//函数是弧度制 2PI凡是360度
a = c * Math.Sin(2 * Math.PI / 8 * i – (itemsSource.Count – 1) * 2
* Math.PI / 8 / 2);
b = c * Math.Cos(2 * Math.PI / 8 * i – (itemsSource.Count – 1) * 2
* Math.PI / 8 / 2);

按钮的职

无是奇数独,还是偶数个,我们都想给其以Y轴对如

第一把圆分成8等卖,每一样份都是45过,也尽管是无与伦比多只能拖8独item,

澳门蒲京网址 27

 

从今上图可以扣押出来,其实就是奇数单在线上,偶数独以少丝内

发出个简易的不二法门,就是优先在极端依次顺时针排列,每个item间隔45渡过,然后再次逆时针转动,每多一个item就差不多反45/2度(两长达分割线是45过,中间也就算是45/2度),如下图:

澳门蒲京网址 28

 上图是item终点的职务,起点的职位是于圆心.

动画用DoubleAnimation控制item按钮的走,从圆心移动到计算后底职务

 计算位置的代码:

//函数是弧度制 2PI凡360度
a = c * Math.Sin(2 * Math.PI / 8 * i – (itemsSource.Count – 1) * 2
* Math.PI / 8 / 2);
b = c * Math.Cos(2 * Math.PI / 8 * i – (itemsSource.Count – 1) * 2
* Math.PI / 8 / 2);

水球连接的片段

总是的一些是因此单薄只伯仲次于贝塞尔与同一条直线做一个path

澳门蒲京网址 29

开始之时节,两条贝塞尔曲线的万丈是0,控制点在path所在矩形的边沿,然后对如塞尔曲线上面的触及以及控制点做动画,分别提高与舅活动,最终形成上图右边的图形,然后将此动画以及item按钮向外部移动的卡通片组成起来,就装成了水球分离之效果.

澳门蒲京网址 30

 上图红色矩形就是接二连三有的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
水球连接的有的

连的片是为此有限单次次于贝塞尔与均等长直线做一个path

澳门蒲京网址 31

起之时,两长贝塞尔曲线的冲天是0,控制点在path所在矩形的外缘,然后针对而塞尔曲线上面的触及及控制点做动画,分别提高与外活动,最终形成上图右边的图,然后拿这个动画及item按钮向外部移动的卡通组成起来,就作成了水球分离的效果.

澳门蒲京网址 32

 上图红色矩形就是连续有的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