WPF水珠效果按钮组葡京网上娱乐场

效果图

葡京网上娱乐场 1

 

                      我的姥姥

连锁文化

那有的骨干就是废话,网上都能找到,我只不过是收拾了以下.指出先不看,用到的时候可以重回放看

 一转
眼块18年了,周围的人都在谈论和发自己18的相片,网上广大人都在感慨老了,:“最终一批90成年了,接下去是00的年代了!”是啊,自己一度20岁了,到了一个要有责任感的人了,所以自己打算有时间带自己的大妈出去逛逛,小姑有言在先有提过想去海洋馆,动物园之类的,正好岁朝有几天假,所以我筹划着带三姑去游玩。

贝塞尔曲线

先来看两组图,有助于了解什么是贝塞尔曲线葡京网上娱乐场 2(图片取自维基百科,参考链接1)

二次贝塞尔曲线:

葡京网上娱乐场 3葡京网上娱乐场 4

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

一次贝塞尔曲线:

葡京网上娱乐场 5葡京网上娱乐场 6

 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的随意取值

快到元日的时候自己提前回到了家和大姑叙旧完未来我便把信息告诉了她,阿姨的外貌变了一下,笑了一晃,不过难为情的说:“还要花钱,别去了。”我态度坚决的说:“不行,必须去,妈,孙子都那么大了,听我五次”大妈便不再说话,只是静静的看着本人。

此外知识

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

葡京网上娱乐场 7

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

三角形函数:

sinA=a/c

cosA=b/c

勾股定理:

c^2=a^2+b^2

要去的头天自我把门票,车所有配置好了,就等着明早动身了,只是当天清早5:00的时候,姨妈赶忙的叫醒了自己,说:“你舅妈的生母好像要特别了,他们一家要去娘家,我去接您姥姥,。”原本还在睡觉的自己,一下子惊醒了。我点点头,于是三姨匆忙的去了姥姥家,我把部署的都撤消了今后,闲暇之际自身想起姥姥前不久刚住的院,本来得了晚年脑积水的姑外祖母现在又遇上了这件事,叹息后,我穿好衣裳,去超市买的点吃的。

席卷介绍

本条效果难点就两部分:一是水球分离和融合时候的总是,二是重头戏圆的抖动

只是事实上网上都有缓解方案了

先是有的是在四个圆之间加个用贝塞尔曲线组成的path,用相同的颜料,其实是障眼法.见参考链接4

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

东西买完后不久,妈妈和姑外婆也到了家,姥姥一贯对本身说:大舅和大舅妈去砍树去了,挺早就走了,我清楚实情加上四姨在一旁不断的使眼色我心中叹息一下问姥姥,砍树做如何,姥姥大声骄傲的说:”盖房屋呀,王晓凯搞对象了,要成家了。“我笑着应对他,心中到不是滋味,其实房子或多或少年便建好了,而叔叔就是那一年死去的,我摸摸外祖母的头,小姨在边上看不下去了对曾外祖母说:“看妈,晓宇给您买的爽口的。”有蛋糕,水果等等的,我们三一人一根香蕉,一块蛋糕躺在炕上很暖和的看着电视机剧,我每每的回头看着大姑再给老娘讲着剧情,姥姥认真的听着,真好。看到有护士和卫生院的一些姥姥会大声的说:“这天有两个大外孙女按着我,我就咬她们。”我笑着问何故要咬她们,姥姥生气的说要给他扎针,姨妈在一旁笑着让自己绝不逗姥姥了,姥姥还在一侧生气的说:“咬她们”我只好把那段快进过去。

重点的大圆

敏捷便到上午了,在进食的时候姥姥问:大舅她们怎么还不回家吃饭,我笑着对曾外祖母说:还没回家,还在砍树呢。姥姥大声的摔了筷子喊道:“瞎说,都那么长日子了,怎么还没砍完?“于是就要往外走,小姨拉着姥姥告诉她,这是我家,不是舅舅她们家,姥姥说上回就有六个闺女按着她着,就咬她们,还威吓三姑说,要咬他,我们费了好大的劲头说服她,说大舅她们临时不回家了,让这她安慰,还和舅舅通了电话,通完电话的姥姥老实的坐了下去用餐了,这午饭吃了好长期,因为姥姥吃的相比较慢,所以咱们就等着她,看着他吃饭,一会儿老娘便叫自己吃饭,让自己吃饭,问我怎么不进食,我笑着对她说吃完了,说完把吃完的碗给他看,她边吃边疑惑的·说:”我怎么没见你吃。”我肉眼有些难受,心情想起了前边央视播出的公益慈善广告,,这段等您长大便要享福的一些,还有把饺子装进口袋的部分,看着姥姥我笑了

Path画法

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

各类贝塞尔曲线的起源和终极就隐瞒了,至极简单,这里最紧要说说控制点.

葡京网上娱乐场 8

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

葡京网上娱乐场 9葡京网上娱乐场 10

 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

“起来吃饭了,给您做炒饭了,加鸡蛋,还有汤的”姥姥在门外大声的喊着,我不情不愿的兴起穿衣,三哥晓凯光着上身在房间另外一头洗着头,我在其它一边吃着炒饭,喝着姥姥做的蛋花汤,平常吃完事后姥姥会给我5毛零花钱。姥姥有时候也会和自家联合吃炒饭,我们比看何人先吃完,吃慢的要被罚洗碗的。我思绪转回来了明日,和三姨说一声回屋之后,便走到祥和的房间,打开台式机,逐渐的写上,“前几天清早6:30起床,做一份蛋炒饭带蛋花汤的。”

振动动画

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

可以用关键帧动画,这样控制的可比细致,要小心的是,衔接的地点要平滑.我这里做的相比简陋,就找了一个变换后的图样,重复了5次.即便你有趣味,可以多做些,做的越多,动画看起来表现力越强

此处我并从未去研商怎么样算法,就是简单的在blend里,找了有的点

见代码:

葡京网上娱乐场 11葡京网上娱乐场 12

 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,

葡京网上娱乐场 13

 

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

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

葡京网上娱乐场 14

 上图是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

葡京网上娱乐场 15

发端的时候,两条贝塞尔曲线的中度是0,控制点在path所在矩形的边缘,然后对而塞尔曲线上边的点和控制点做动画,分别提升和内活动,最终形成上图左侧的图纸,然后把那多少个动画和item按钮向外部移动的动画片组成起来,就伪装成了水球分离的效果.

葡京网上娱乐场 16

 上图肉色矩形就是连连部分的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