2018-05-21—屬性動畫實戰:521表白神器心跳實現

哈嘍,又和大家見面了,我們之前已經將屬性動畫學習的差不多了,今天我們就做一個很簡單很簡單的小功能吧,正好今天是5月21號,給各位大兄弟們提供一個裝B的時刻,讓人們知道程序員可是懂浪漫的哈哈!

好了,話不多說,我們來實現一個小功能——動態桃心彈出。

首先先給大家看一下model的效果:只是效果初步實現了,具體的優化和創新還是要看在座的各位是否有心了哈哈:

10608194-43d586fca2fc1832.gif

這個初步的Model是有點low哈,不過問題不大,畢竟咱們心意在這裏了對吧,好了,接下來,我們看一下這個效果是如何實現的:



實現流程:

繪製桃心:首先我們通過心形線方程得到他的參數方程,然後通過唯一的參數r,設置一個小範圍的循環去遍歷r,用二維數組存儲得到的x,y的值,最後用Path把數組存儲的點一次鏈接,這樣繪製桃心就得到了。

動畫:需要兩步:

1.寫一個桃心的Bean類,裏面存儲兩個屬性,a和b(具體a和b是什麼我們下面再說)

2.寫對應Bean類的估值器。

動作:

通過按鍵的點擊事件來觸發動畫的start方法。

如此一來,我們的效果就大體實現了。

接下來我們看一下詳細的實現過程:


1.心形線方程。

因爲我們要畫一個桃心,而我們的畫布canvas是不能直接畫出來桃心的,所以我們需要用心形線的方程去自己繪製一個桃心出來。

這是心形線的方程,

x^2+y^2+a*x=a*sqrt(x^2+y^2) 和 x^2+y^2-a*x=a*sqrt(x^2+y^2)

看着是很噁心對吧,不過問題不大,我們需要的不是這個方程,我們是需要得到他的參數方程:

x=a(1+2cost+cos2t)

y=b(2sint+sin2t)

現在我們得到了他的參數方程。


2.創建我們所需要的各種類:

1.PeachView類:

這是我們的自定義控件,用View繼承。然後重寫兩個構造方法和onDraw方法。

10608194-b7fb8c3ff7abfb04.png

我們的PeachView類中需要這幾個屬性。首先第一個畫筆是必須要的。第二個參數就是我們要用來存儲桃心的座標點的一個數組。第三個參數是我們等會要定義的桃心類,裏面有a和b兩個參數,至於ab是什麼,看我們的參數方程。最後一個參數就是我們的動畫,不多說了。

10608194-d224d96680487536.png

然後我們來看這幾個初始化的方法,首先是兩個構造方法,這個pass。initPaint方法是我們初始化畫筆的方法,setPeach是我們給獲取當前桃心的座標的方法,我們獲取桃心周圍的500個點。

10608194-0e920b318970368c.png

然後我們看一下繪製的過程:首先將canvas座標移動到中心,然後逆時針旋轉90°(因爲桃心的心方向是朝着x負半軸。)

然後我們通過Path連點成線,把我們剛纔拿到的500個座標一次連城一條線,然後繪製。

10608194-f89aa401e5e9db7c.png

jumpPeach方法是開始動畫,具體的邏輯應該不用多說了,跟我們之前小球動畫的邏輯一模一樣。

isRunning方法是判斷當前動畫是否在進行中。

2.Peach的Bean類:

10608194-dfdca0f12acd1fdf.png

東西看着就很簡單了。只是一個構造方法和對應的獲取字段值的方法。

3.估值器類:

10608194-e99edc5da1f4140e.png

這個估值器類也是很簡單的,只是把新獲取到的ab值給放到新的對象,然後返回。


好了,以上是我們的全部代碼,最後看一下我們Activity的使用流程:

10608194-c18fdce27de31c07.png

這個是有點亂哈,筆者只是用最快最簡單的方法寫出來了,大家可以去優化邏輯結構。我們來看一下它的過程:

首先獲取桃心控件,然後獲取按鈕控件之後,設置監聽器:

首先讓桃心跳動起來,然後創建一個子線程,在裏面判斷跳動是否結束,如果結束了就彈出對話框(其實這個子線程用Handler代替更好,,更簡便哈哈)


好了,現在爲止我們的心跳錶白就徹底完成了。當然跟Dream老師的雪花表白特效相比是Low多了-。+。

/*剛給小仙女看一一下,居然說還行,看來那就能過關哈哈,畢竟心意在那裏擺着呢/*

不過就算很Low很直男也無所謂,畢竟咱們是爲了提升自己技術嘛對吧,所以各位要慎重優化,千萬別在女神面前丟了臉哈哈!!

發佈了85 篇原創文章 · 獲贊 98 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章