類似小紅書標簽效果(補間動畫)


    昨天老大給布置個任務,為我們的app做下調研,app中有標簽的存在,類似小紅書和nice的添加標簽模式,於是我就試着做出那個一閃一閃的標注點~

    仔細看了看小紅書的閃閃的標簽,得出一個結論: 它是個動畫

    好吧,這簡直是廢話。

        其實一開始我的思路是拿來主義,去網上找了找類似的“小紅書標簽效果”等等,然后我發現他們用自定義控件完成了一個這樣的動畫。。就這樣,我華麗麗的跑偏了呃呃呃。。

    自定義控件我不熟啊!!

        學。

        花了半個下午研究自定義控件,好不容易寫出了動畫效果。

   這個效果的原理是這個樣子滴:

         用畫筆畫出一個圓,利用線程控制圓的半徑和view的透明度。

    哇,好高興哦~我做出來了,呵呵噠。

         興奮的把這個自定義控件使用到我的app中,很遺憾,第一次加載出這個view的時候它並不顯示,控件所在window焦點狀態改變一次時才會顯示,心塞啊!!怎么辦呢?

   問了前輩,說是view繪制時的問題,應該是線程的問題。

         沒辦法,換個思路吧。

         Android中不是有動畫嗎?試試?

         於是,今天開始研究Android中的動畫。

    我用的是補間動畫,控制一個image的縮放和透明度。

          很快就達到了我想要的效果,棒棒噠,閃閃的標記點上陣,感覺整個app頁面都活起來了呢!!

         其實特別簡單噠:

      動畫代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:repeatCount="infinite">   // android:repeatCount="infinite" 設置動畫重復次數(infinite 表示重復無數次)
     <scale  //縮放
        android:fromXScale="1.0"    //fromXScalefromYScale 動畫開始時view大小(1.0表示原大小)
        android:fromYScale="1.0"  
        android:toXScale="4.0"     //toXScaletoYScale view放大倍數
        android:toYScale="4.0"  
        android:pivotX="50%"    //pivotX、pivotY 動畫開始時基准(都設置為50%時在正中開始
        android:pivotY="50%"  
        android:repeatCount="infinite"
        android:duration="1000"/>   //duration  動畫持續時間
    <alpha  //透明度
        android:fromAlpha="1.0"  
        android:toAlpha="0.0"  
         android:repeatCount="infinite"
        android:duration="1000"/>  

</set>

然后,給白色圓點(imageview)設置上這個動畫就可以出現圓從小變大,逐漸透明的效果,就像疊加一樣地在它上面添加一個不變的白點就是一個閃閃的標簽啦~

 

是不是很簡單~

ps: 昨天腦子被驢踢了才用自定義控件。。。

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM