Android端的貝塞爾曲線和爆炸效果動畫

轉載 : 猴菇先生 的博客地址:
http://blog.csdn.net/qq_31715429

正文

了解了Android端的貝塞爾曲線,本篇就舉個栗子練習一下像街,仿QQ未讀消息氣泡,是最經典的練習貝塞爾曲線的東東篮幢,效果如下:


大體思路****就是****:
畫兩個圓纳令,一個黏連小球固定在一個點上森枪,一個氣泡小球跟隨手指的滑動改變坐標辽社。隨著兩個圓間距越來越大喘先,黏連小球半徑越來越小。

當間距小于一定值解幽,松開手指氣泡小球會恢復原來位置贴见;

當間距超過一定值之后,黏連小球消失躲株,氣泡小球繼續(xù)跟隨手指移動片部,此時手指松開,氣泡小球消失~

**1. **首先老一套~新建attrs.xml文件霜定,編寫自定義屬性档悠,新建 DragBubbleView 繼承View廊鸥,重寫構造方法,獲取自定義屬性值辖所,初始化Paint惰说、Path等東東,重寫 onMeasure 計算寬高奴烙,這里不再啰嗦~
**2. **在 onSizeChanged 方法中確定黏連小球和氣泡小球的圓心坐標助被,這里我們取寬高的一半:


**3. **經分析氣泡小球有以下幾個狀態(tài):默認剖张、拖拽切诀、移動、消失搔弄,我們這里定義一下幅虑,方便根據(jù)不同的狀態(tài)分析不同情況:

**4. **重寫 onTouchEvent 方法,其中 d 代表兩圓圓心間距顾犹,maxD 代表可拖拽的最大間距:

如果控件外面有嵌套 ListView倒庵、RecyclerView 等攔截焦點的控件,那就在 ACTION_DOWN 中請求父控件不攔截事件:
getParent().requestDisallowInterceptTouchEvent(true);
然后 ACTION_UP 再把事件還回去:
getParent().requestDisallowInterceptTouchEvent(false);
**5. **在 onDraw 方法中畫圓炫刷、畫貝賽爾曲線擎宝、畫消息個數(shù)文本:

其中計算 二階貝塞爾曲線 做需要的起點、終點 和 控制點坐標浑玛,順序是 moveTo A, quadTo B, lineTo C, quadTo D, close绍申。先來張示意圖:

手機可點擊放大查看
再上代碼:

**6. **氣泡復原的動畫,使用估值器計算坐標


**7. **順便來個氣泡狀態(tài)的監(jiān)聽器顾彰,方便外部調用監(jiān)聽其狀態(tài):

**8. **關于氣泡爆炸的動畫极阅,思路就是放幾張圖片到 drawable 里,然后動態(tài)計數(shù)重繪涨享,在 onDraw 中調用 canvas.drawBitmap() 方法筋搏,具體如下:

在構造方法中:

然后在手指抬起的時候使用如下動畫:

最后在 onDraw 中:

**9. 在布局文件中使用該控件,并使用自定義屬性:

其中
android:clipChildren=”false” **這個屬性可以使根布局下的子控件超出本身控件范圍的大小厕隧,加上這個屬性就可以滿屏幕隨意拖拽而不必拘泥于它本身的大小了奔脐,炒雞方便~
還有如果覺得在屬性中設置消息個數(shù)不方便,需要在代碼中動態(tài)獲取數(shù)據(jù)并設置的話吁讨,只要在 DragBubbleView 中添加一個方法即可
public void setText(String text){ mText = text; invalidate();}
**10. **在MainActivity中:

總結

這次既練習了自定義View髓迎,還囊括了貝賽爾曲線,坐標的計算一定要畫圖挡爵,簡單直觀竖般。
項目地址:
https://github.com/MonkeyMushroom/DragBubbleView

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市茶鹃,隨后出現(xiàn)的幾起案子涣雕,更是在濱河造成了極大的恐慌艰亮,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,029評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件挣郭,死亡現(xiàn)場離奇詭異迄埃,居然都是意外死亡,警方通過查閱死者的電腦和手機兑障,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評論 3 385
  • 文/潘曉璐 我一進店門侄非,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人流译,你說我怎么就攤上這事逞怨。” “怎么了福澡?”我有些...
    開封第一講書人閱讀 157,570評論 0 348
  • 文/不壞的土叔 我叫張陵叠赦,是天一觀的道長。 經常有香客問我革砸,道長除秀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,535評論 1 284
  • 正文 為了忘掉前任算利,我火速辦了婚禮册踩,結果婚禮上,老公的妹妹穿的比我還像新娘效拭。我一直安慰自己暂吉,他們只是感情好,可當我...
    茶點故事閱讀 65,650評論 6 386
  • 文/花漫 我一把揭開白布允耿。 她就那樣靜靜地躺著借笙,像睡著了一般。 火紅的嫁衣襯著肌膚如雪较锡。 梳的紋絲不亂的頭發(fā)上业稼,一...
    開封第一講書人閱讀 49,850評論 1 290
  • 那天,我揣著相機與錄音蚂蕴,去河邊找鬼低散。 笑死,一個胖子當著我的面吹牛骡楼,可吹牛的內容都是我干的熔号。 我是一名探鬼主播,決...
    沈念sama閱讀 39,006評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼鸟整,長吁一口氣:“原來是場噩夢啊……” “哼引镊!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,747評論 0 268
  • 序言:老撾萬榮一對情侶失蹤弟头,失蹤者是張志新(化名)和其女友劉穎吩抓,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赴恨,經...
    沈念sama閱讀 44,207評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡疹娶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,536評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了伦连。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片雨饺。...
    茶點故事閱讀 38,683評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖惑淳,靈堂內的尸體忽然破棺而出额港,到底是詐尸還是另有隱情,我是刑警寧澤汛聚,帶...
    沈念sama閱讀 34,342評論 4 330
  • 正文 年R本政府宣布锹安,位于F島的核電站,受9級特大地震影響倚舀,放射性物質發(fā)生泄漏。R本人自食惡果不足惜忍宋,卻給世界環(huán)境...
    茶點故事閱讀 39,964評論 3 315
  • 文/蒙蒙 一痕貌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧糠排,春花似錦舵稠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至乾闰,卻和暖如春落追,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背涯肩。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評論 1 266
  • 我被黑心中介騙來泰國打工轿钠, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人病苗。 一個月前我還...
    沈念sama閱讀 46,401評論 2 360
  • 正文 我出身青樓疗垛,卻偏偏與公主長得像,于是被迫代替她去往敵國和親硫朦。 傳聞我的和親對象是個殘疾皇子贷腕,可洞房花燭夜當晚...
    茶點故事閱讀 43,566評論 2 349

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,799評論 25 707
  • 作者簡介 原創(chuàng)微信公眾號郭霖 WeChat ID: guolin_blog 本篇來自猴菇先生的投稿,分享了一個貝賽...
    木木00閱讀 878評論 0 6
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件泽裳、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,066評論 4 62
  • 決定一個人生活方式的是她自己诡壁,而不是她所處的環(huán)境 大學好友畢業(yè)后回到老家找了一份穩(wěn)定的工作济瓢,過起了朝九晚五的日子。...
    伴儂閱讀 219評論 0 3
  • 2016年的寒假前妹卿,又到了布置寒假作業(yè)的時刻了旺矾,在寫給家長的一封信中,我殷殷囑托夺克,讓家長為孩子創(chuàng)造良好的閱讀環(huán)境箕宙,...
    胡喜平閱讀 274評論 0 0