P一是调整点

效果图

威尼斯人官网 1

 

有关文化

那部分骨干正是废话,网络都能找到,小编只不过是收10了以下.提议先不看,用到的时候能够回去看望

贝塞尔曲线

先来看两组图,有助于领悟什么是贝塞尔曲线威尼斯人官网 2(图片取自维基百科,参照他事他说加以调查链接一)

3次贝塞尔曲线:

威尼斯人官网 3威尼斯人官网 4

P0是源点,P二是终点,P一是调节点

一遍贝塞尔曲线:

威尼斯人官网 5威尼斯人官网 6

 P0是起源,P三是终极,P壹是调控点一,P二是决定点贰

逐条连接全体一点点,组成线段

t是比例,在0-壹之内,正是每条线段的长短都是一

贝塞尔曲线正是最里层的线条在t地方的点所组成的门路

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

B(t)象征曲线上大四点,P0,一,二,三分级代表决定曲线的伍个点,t代表曲线长度为一的大四取值

别的知识

没接触过贝塞尔曲线的话,恐怕得花些日子整理下,其余的知识就比较轻便了

威尼斯人官网 7

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

三角形函数:

sinA=a/c

cosA=b/c

勾股定理:

c^2=a^2+b^2

席卷介绍

以此作用难题就两部分:一是水球分离和融合时候的三番五次,2是重头戏圆的抖动

唯独实际上英特网都有减轻方案了

率先有的是在三个圆之间加个用贝塞尔曲线组成的path,用同1的颜色,其实是障眼法.见参谋链接4

第一局地是用肆段三回贝塞尔曲线组成的path替代Ellipse,因为Ellipse是颠簸不起来的,这样就能够调控贝塞尔曲线的点来让圆抖动.见参照他事他说加以调查链接三

入眼的大圆

Path画法

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

每一种贝塞尔曲线的源点和终端就背着了,特别轻松,这里关键说说调节点.

威尼斯人官网 8

计量出四分一半圆的中档地方的点,此时t=0.五, 三角型边长h=sin45*r

让决定点P一,P二分别在源点和终极的切线上,P1到X轴的偏离等于P二到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)能够鲜明

求出来的多个点是数学的坐标,要转变到程序的坐标,对应成四个象限,无非就是加减半径,加减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

振动动画

是因为圆是被12个点调整的,让圆抖动,也正是对11个点做点动画

能够用关键帧动画,那样调节的可比密切,要留意的是,衔接的地点要平滑.作者那边做的可比简陋,就找了3个更动后的图形,重复了四遍.假诺你风乐趣,能够多做些,做的越来越多,动画看起来表现力越强

此间小编并不曾去切磋怎样算法,便是简单的在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轴对称

第2把圆分成8等份,每1份都是45度,也正是最三只可以放下九个item,

威尼斯人官网 13

 

从上海教室能够看出来,其实就是奇数个在线上,偶数个在两线时期

有个轻巧的点子,就是先在顶峰依次顺时针排列,每种item间隔四伍度,然后再逆时针转动,每多一个item就多转45/二度(两条分割线是45度,中间也就是45/贰度),如下图:

威尼斯人官网 14

 上航海用教室是item终点的职位,源点的职位是在圆心.

动画片用DoubleAnimation调节item按键的位移,从圆心移动到总计后的职位

 总结地点的代码:

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

相关文章