移动网站视频主持人网,微信管理系统免费,沙河市建设局网站,网站如何做网站征求意见专栏本文经原作者授权以原创方式二次分享#xff0c;欢迎转载、分享。原文作者#xff1a;普通的地球人原文地址#xff1a;https://www.cnblogs.com/tsliwei/p/8041928.html相关知识这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看贝… 本文经原作者授权以原创方式二次分享欢迎转载、分享。原文作者普通的地球人原文地址https://www.cnblogs.com/tsliwei/p/8041928.html相关知识这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看贝塞尔曲线先来看两组图,有助于理解什么是贝塞尔曲线(图片取自维基百科,参考链接)二次贝塞尔曲线:P0是起点,P2是终点,P1是控制点三次贝塞尔曲线: P0是起点,P3是终点,P1是控制点1,P2是控制点2依次连接所有点,组成线段t是比例,在0-1之间,就是每条线段的长度都是1贝塞尔曲线就是最里层的线段在t位置的点所组成的路径三次贝塞尔曲线公式:B(t)(1-t)^3*P03(1-t)^2*t*P13(1-t)*t^2*P2t^3*P3,0t1B(t)代表曲线上任意点,P0,1,2,3分别代表决定曲线的4个点,t代表曲线长度为1的任意取值其他知识没接触过贝塞尔曲线的话,可能得花些时间整理下,其他的知识就比较简单了直角三角形,角A的对边a,临边b,斜边c三角函数:sinAa/ccosAb/c勾股定理:c^2a^2b^2概括介绍这个效果难点就两部分:一是水球分离和融合时候的连接,二是主体圆的抖动然而其实网上都有解决方案了第一部分是在两个圆之间加个用贝塞尔曲线组成的path,用一样的颜色,其实是障眼法.见参考链接第二部分是用4段三次贝塞尔曲线组成的path代替Ellipse,因为Ellipse是抖动不起来的,这样就可以控制贝塞尔曲线的点来让圆抖动.见参考链接主体的大圆Path画法 主体的大圆是个ToggleButton,替换模版,背景换成贝塞尔曲线组成的圆.每个贝塞尔曲线的起点和终点就不说了,非常简单,这里主要说说控制点.计算出1/4圆弧的中间位置的点,此时t0.5, 三角型边长hsin45*r让控制点P1,P2分别在起点和终点的切线上,P1到X轴的距离等于P2到Y轴的距离LB(0.5)hsin45*r(1-0.5)^3*03*(1-0.5)^2*0.5*L3*(1-0.5)*0.5^2*r0.5^3*rsin45*r00.375*L0.375*r0.125*rL(sin45*r-0.5*r)/0.375于是两个控制点(r,L)和(L,r)可以确定求出来的两个点是数学的坐标,要转换成程序的坐标,对应成4个象限,无非就是加减半径,加减L,不细说了完整的path,取半径是50,见代码PathPath.DataPathGeometryPathFigure StartPoint50,0BezierSegment Point177.614237491541,0 Point2100,22.385762508459 Point3100,50/BezierSegmentBezierSegment Point1100,77.614237491541 Point277.614237491541,100 Point350,100/BezierSegmentBezierSegment Point122.385762508459,100 Point20,77.614237491541 Point30,50/BezierSegmentBezierSegment Point10,22.385762508459 Point222.385762508459,0 Point350,0/BezierSegment/PathFigure/PathGeometry/Path.Data
/Path抖动动画由于圆是被12个点控制的,让圆抖动,也就是对12个点做点动画可以用关键帧动画,这样控制的比较细致,要注意的是,衔接的地方要平滑.我这里做的比较简陋,就找了一个变换后的图形,重复了5次.如果你有兴趣,可以多做些,做的越多,动画看起来表现力越强这里我并没有去研究什么算法,就是简单的在blend里,找了一些点见代码:EventTrigger RoutedEventClickBeginStoryboardStoryboardPointAnimationUsingKeyFrames Storyboard.TargetNamepf_main Storyboard.TargetPropertyStartPoint BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value40,0 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main0 Storyboard.TargetPropertyPoint1 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value68,-10 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main0 Storyboard.TargetPropertyPoint2 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value115,14 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main0 Storyboard.TargetPropertyPoint3 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value100,66 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main1 Storyboard.TargetPropertyPoint1 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value100,67 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main1 Storyboard.TargetPropertyPoint2 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value85,111 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main1 Storyboard.TargetPropertyPoint3 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value33,103 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main2 Storyboard.TargetPropertyPoint1 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value22,103 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main2 Storyboard.TargetPropertyPoint2 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value-15,85 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main2 Storyboard.TargetPropertyPoint3 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value-6,50 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main3 Storyboard.TargetPropertyPoint1 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value4,9 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main3 Storyboard.TargetPropertyPoint2 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value41,-1 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFramesPointAnimationUsingKeyFrames Storyboard.TargetNamebs_main3 Storyboard.TargetPropertyPoint3 BeginTime0:0:0.7 AutoReverseTrue RepeatBehavior5x FillBehaviorStopEasingPointKeyFrame Value42,0 KeyTime0:0:0.2/EasingPointKeyFrame/PointAnimationUsingKeyFrames/Storyboard/BeginStoryboard
/EventTriggeritem按钮的位置 不管是奇数个,还是偶数个,我们都想让它以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高度的一半
