国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

WPF水珠效果按鈕組的實現教程

來源:懂視網 責編:小采 時間:2020-11-27 22:35:07
文檔

WPF水珠效果按鈕組的實現教程

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

效果圖

相關知識

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

貝塞爾曲線

先來看兩組圖,有助于理解什么是貝塞爾曲線(圖片取自維基百科,參考鏈接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,見代碼

<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,

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

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

上圖是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

開始的時候,兩條貝塞爾曲線的高度是0,控制點在path所在矩形的邊上,然后對而塞爾曲線上面的點和控制點做動畫,分別向上和內移動,最終形成上圖右邊的圖形,然后把這個動畫和item按鈕向外部移動的動畫結合起來,就偽裝成了水球分離的效果.

上圖紅色矩形就是連接部分的path.動畫的過程就是Item按鈕的直徑和大圓相交的時候開始和item按鈕一起做動畫,最后移動到Item按鈕直徑所在的位置,整個距離就是Item的半徑+item到主體的距離+藍色的d,而藍色的d可以通過公式求出

開始的時候也是讓連接部分path在圓心的位置.定位方法和定位Item按鈕的方法是完全一樣的.這里就不在重復了.只說一下c邊的距離是:大圓和小圓圓心的距離-連接path高度的一半

源碼下載:WaterDropsButtonGroup(jb51.net).zip

以上這篇WPF水珠效果按鈕組的實現教程就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

WPF水珠效果按鈕組的實現教程

WPF水珠效果按鈕組的實現教程:效果圖 相關知識 這部分基本就是廢話,網上都能找到,我只不過是整理了以下.建議先不看,用到的時候可以回來看看 貝塞爾曲線 先來看兩組圖,有助于理解什么是貝塞爾曲線(圖片取自維基百科,參考鏈接1) 二次貝塞爾曲線: P0是起點,P2是終點,P1是控制點 三次貝
推薦度:
標簽: 教程 水滴 實現
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产亚洲欧美另类一区二区三区 | 在线免费观看亚洲视频 | 成人毛片一区二区三区 | 国产精品九九久久精品女同 | 欧美综合在线视频 | 干比网 | 久久久久久穴 | 日韩欧美高清视频 | 日韩一区二区三区精品 | 一级毛片真人不卡免费播 | 亚洲v视频| 国产全黄a一级毛片视频 | 欧美 日韩 国产 在线 | 日韩 亚洲 欧美 中文 高清 | 国产精品免费精品自在线观看 | 亚洲一区影院 | 日韩国产欧美视频 | 国内精品视频在线观看 | 免费观看日韩大尺码观看 | 国产高清不卡一区二区 | 欧美精品一区二区三区免费播放 | 日韩欧美精品一区二区 | 亚洲a毛片| 天天做天天爱夜夜爽毛片毛片 | 亚洲午夜一区二区三区 | 韩日精品视频 | 欧美一区二区三区视频在线观看 | 免费视频国产 | 国产日韩欧美综合在线 | 北条麻妃国产九九九精品视频 | 国产高清在线精品一区二区三区 | 国产成人精品免费视频大全可播放的 | 精品国产日韩亚洲一区二区 | 中文字幕 日韩有码 | 九九九影院 | 视频二区 素人 欧美 日韩 | 一本久久精品一区二区 | 久久91精品国产91久久小草 | 精品视频二区 | 国产成人青青热久免费精品 | 国产日产欧美一区二区三区 |