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

有个简单的办法,就是先在顶点依次顺时针排列,每个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水珠效果按钮组的实现教程

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdspfx.html