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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類