WPF水珠效果按钮组

同一、 环境vs2010,WCF应用程序,server 2008

效果图

 

第一步:WCF项目右键点击项目,选择生成部署包,如下图:

连带文化

立即有些基本就是是废话,网上都能找到,我只不过是整治了盖下.建议优先不扣,用到的时光可返回看望

贝塞尔曲线

先行来拘禁少组图,有助于了解啊是贝塞尔曲线(图片取自维基百科,参考链接1)

次破贝塞尔曲线:

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

老三潮贝塞尔曲线:

 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底即兴取值

 

其余文化

从来不点过贝塞尔曲线的口舌,可能得费数时间整理下,其他的知就比较简单了

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

三角形函数:

sinA=a/c

cosA=b/c

勾股定理:

c^2=a^2+b^2

第二步:WCF项目达成右键,选择:在windows资源管理器中打开文件夹,如下图:

包括介绍

这个力量难点就是少片:一凡水球分离及融合上的总是,二凡是主导圆的振动

然事实上网上还来解决方案了

首先局部是于少只健全之间加个用贝塞尔曲线组成的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

老三步:第二步:在您种所于的文件目录下找到Package文件夹,这就是咱的部署确保所当的地方。在此package文件夹下面来一个packageTmp。

振动动画

由于宏观是叫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按钮的倒,从圆心移动到计算后的位置

 计算位置的代码:

//函数是弧度制 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

起来之下,两漫长贝塞尔曲线的万丈是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

季步:在IIS上新建虚拟目录,将物理地址指于这文件夹。

1、windows server 2008中没自带Microsoft .NET Framework
4,因此需要以网上下载,手动安装,安装时右键选择管理员身份运行。

下载地址:http://www.microsoft.com/zh-cn/download/details.aspx?id=17718

2、完成.NET Framework 4后,重开服务器

3、在IIS上新建虚拟目录

点击确定,完成

4、第四总统:部署完毕。可以以浏览器被查阅我们安排之WCF了。

哈哈,结果。。。。

立刻是应为默认的net版本不对,修改章程如下:

改后,右键浏览,效果如下:

达成图中的http://localhost/Test.svc?wsdl即为我们要引用的服务地址。

小心:如果在别的机器及引用该机的WCF服务经常,需要用localhost替换为该机的ip。

 

原稿链接:http://blog.csdn.net/jiankunking