WPF水珠效果按鈕組

来源:http://www.cnblogs.com/tsliwei/archive/2017/12/18/8041928.html
-Advertisement-
Play Games

效果圖 相關知識 這部分基本就是廢話,網上都能找到,我只不過是整理了以下.建議先不看,用到的時候可以回來看看 先來看兩組圖,有助於理解什麼是貝塞爾曲線(圖片取自維基百科,參考鏈接1) 二次貝塞爾曲線: P0是起點,P2是終點,P1是控制點 三次貝塞爾曲線: P0是起點,P2是終點,P1是控制點1,P ...


效果圖

 

相關知識

這部分基本就是廢話,網上都能找到,我只不過是整理了以下.建議先不看,用到的時候可以回來看看

貝塞爾曲線

先來看兩組圖,有助於理解什麼是貝塞爾曲線(圖片取自維基百科,參考鏈接1)

二次貝塞爾曲線:

P0是起點,P2是終點,P1是控制點

三次貝塞爾曲線:

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

其他知識

沒接觸過貝塞爾曲線的話,可能得花些時間整理下,其他的知識就比較簡單了

直角三角形,角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,替換模版,背景換成貝塞爾曲線組成的圓.

每個貝塞爾曲線的起點和終點就不說了,非常簡單,這裡主要說說控制點.

計算出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,見代碼

 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個點控制的,讓圓抖動,也就是對12個點做點動畫

可以用關鍵幀動畫,這樣控制的比較細緻,要註意的是,銜接的地方要平滑.我這裡做的比較簡陋,就找了一個變換後的圖形,重覆了5次.如果你有興趣,可以多做些,做的越多,動畫看起來表現力越強

這裡我並沒有去研究什麼演算法,就是簡單的在blend里,找了一些點

見代碼:

 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,

 

從上圖可以看出來,其實就是奇數個線上上,偶數個在兩線之間

有個簡單的辦法,就是先在頂點依次順時針排列,每個item間隔45度,然後再逆時針旋轉,每多一個item就多轉45/2度(兩條分割線是45度,中間也就是45/2度),如下圖:

 上圖是item終點的位置,起點的位置是在圓心.

動畫用DoubleAnimation控制item按鈕的位移,從圓心移動到計算後的位置

 計算位置的代碼:

1 //函數是弧度制 2PI是360度
2 1 a = c * Math.Sin(2 * Math.PI / 8 * i - (itemsSource.Count - 1) * 2 * Math.PI / 8 / 2);
3 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高度的一半

 

源碼下載: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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 長期更新系列:C#知識點
    PS:寫這個主要是基礎差,寫這麼一個主要是為了自己查漏補缺,不會的搞會了。會了搞的更會。順便整理知識。 目錄 1.C#知識點之:值類型和引用類型 ...
  • 從一些代碼方法中，去學習C#委托
    先來看看下麵一個類中的一些方法： class Bc { public double Add(double number1, double number2) { return number1 + number2; } public double Multiply(double number1, dou ...
  • 微信昵稱emoji表情，特殊表情導致列表不顯示，導出EXCEL報錯等問題解決！
    最近做的項目，上線後一切正常，過段時間管理員反饋用戶導出EXCEL報錯，前臺獲取用戶列表不顯示，查找問題找到是微信昵稱、emoji表情導致報錯， emoji表情介紹 由於微信介面中對於emoji表情使用的是UTF-8的二進位字元串，並沒有解碼，表現就是當收到微信端用戶發來的emoji表情時，顯示為一 ...
  • 使用介面實現多繼承
    類只能繼承一個類，不能繼承多個類，但可以繼承多個介面Interface。 類是對象的抽象，抽象類是類的抽象，而介面是行為的抽象。 下麵Insus.NET創建2個介面： 介面是統一行為，抽象是從現在有代碼中，把上同代碼抽取出來的一個抽象方法，而介面卻是相反。不清楚有什麼子類存在，行為具體實現也不確定。 ...
  • 多線程編程學習筆記——async和await（一）
    通過前面的文章，已經學習了怎麼使用線程，怎麼使用線程同步，怎麼使用線程池，怎麼使用任務並行庫。儘管通過上面的學習，對於線程的使用越來越簡單。有沒有更簡單的方法呢。 C# 5.0之後，微軟在c#語言中添加了兩個關鍵字async與await，這是在TPL上面的更高一級的抽象，真正簡化了異... ...
  • C#的抽象類別
    抽象類，有3個特點： 第1個，不能被實例化。 第2個，類中的抽象方法在繼承的子類中必須重寫。 第3個，類一旦有抽象方法出現，那這個類必須定義為抽象類。 現實開發中，發現有共同的代碼，可以把這些共同的代碼放在一個抽象類中。舉個例子，計算四邊形的周長。 矩形，長方形，正方形： class Rectang ...
  • ASP.NET沒有魔法——ASP.NET MVC使用Oauth2.0實現身份驗證
    隨著軟體的不斷發展，出現了更多的身份驗證使用場景，除了典型的伺服器與客戶端之間的身份驗證外還有，如服務與服務之間的(如微服務架構)、伺服器與多種客戶端的(如PC、移動、Web等)，甚至還有需要以服務的形式開放給第三方的，身份驗證這一功能已經演化為一個服務，很多大型應用中都有自己的身份驗證伺服器甚至集 ...
  • CefSharp v62修改,支持.net4.0
    吐槽一下,博客園久了沒有上,賬號沒了,重新申請一個. cesharp v62版本,內核採用最新的Cef 62,支持最新的Grid佈局. 由於官方的cefsharp 採用.net4.5.2開發.怎麼辦怎麼辦.我只能用.net4.0.沒辦法啊,自己拿源碼修改相容唄. 仔細分析源碼發現: 1.net4.5 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類