欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

WPF水珠效果按钮组的实现教程

程序员文章站 2022-09-02 11:44:49
效果图 相关知识 这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看 贝塞尔曲线 先来看两组图,有助于理解什么是贝塞尔曲...

效果图

WPF水珠效果按钮组的实现教程

相关知识

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

贝塞尔曲线

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

二次贝塞尔曲线:

WPF水珠效果按钮组的实现教程WPF水珠效果按钮组的实现教程

p0是起点,p2是终点,p1是控制点

三次贝塞尔曲线:

WPF水珠效果按钮组的实现教程WPF水珠效果按钮组的实现教程

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

其他知识

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

WPF水珠效果按钮组的实现教程

直角三角形,角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,替换模版,背景换成贝塞尔曲线组成的圆.

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

WPF水珠效果按钮组的实现教程

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

<path>
 <path.data>
 <pathgeometry>
  <pathfigure startpoint="50,0">
  <beziersegment point1="77.614237491541,0" point2="100,22.385762508459" point3="100,50"></beziersegment>
  <beziersegment point1="100,77.614237491541" point2="77.614237491541,100" point3="50,100"></beziersegment>
  <beziersegment point1="22.385762508459,100" point2="0,77.614237491541" point3="0,50"></beziersegment>
  <beziersegment point1="0,22.385762508459" point2="22.385762508459,0" point3="50,0"></beziersegment>
  </pathfigure>
 </pathgeometry>
 </path.data>
</path>

抖动动画

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

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

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

见代码:

<eventtrigger routedevent="click">
 <beginstoryboard>
 <storyboard>
  <pointanimationusingkeyframes storyboard.targetname="pf_main" storyboard.targetproperty="startpoint" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="40,0" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main0" storyboard.targetproperty="point1" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="68,-10" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main0" storyboard.targetproperty="point2" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="115,14" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main0" storyboard.targetproperty="point3" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="100,66" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main1" storyboard.targetproperty="point1" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="100,67" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main1" storyboard.targetproperty="point2" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="85,111" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main1" storyboard.targetproperty="point3" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="33,103" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main2" storyboard.targetproperty="point1" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="22,103" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main2" storyboard.targetproperty="point2" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="-15,85" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main2" storyboard.targetproperty="point3" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="-6,50" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main3" storyboard.targetproperty="point1" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="4,9" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main3" storyboard.targetproperty="point2" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="41,-1" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
  <pointanimationusingkeyframes storyboard.targetname="bs_main3" storyboard.targetproperty="point3" begintime="0:0:0.7" autoreverse="true" repeatbehavior="5x" fillbehavior="stop">
  <easingpointkeyframe value="42,0" keytime="0:0:0.2"></easingpointkeyframe>
  </pointanimationusingkeyframes>
 </storyboard>
 </beginstoryboard>
</eventtrigger>

item

按钮的位置

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

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

WPF水珠效果按钮组的实现教程

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

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

WPF水珠效果按钮组的实现教程

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

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

计算位置的代码:

//函数是弧度制 2pi是360度
 1 a = c * math.sin(2 * math.pi / 8 * i - (itemssource.count - 1) * 2 * math.pi / 8 / 2);
 2 b = c * math.cos(2 * math.pi / 8 * i - (itemssource.count - 1) * 2 * math.pi / 8 / 2);

水球连接的部分

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

WPF水珠效果按钮组的实现教程

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

WPF水珠效果按钮组的实现教程

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

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

源码下载:waterdropsbuttongroup(jb51.net).zip

以上这篇wpf水珠效果按钮组的实现教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。