然後就是怎麼實現了,其實這個控制項的實現很簡單,就從動畫的形式來說吧 第
一、條形是呈水平排列的,第一想法肯定是繼承viewgroup然後擁有多個子view(我選擇的是繼承linearlayout,這樣的話就省去了onmeasure和onlayout啦 0.0) 第
二、每乙個單獨的條形譜都在豎直方向上上下縮放,我想到的使用屬性動畫就可以很容易的實現了。
既然思路也有了 , show the code
首先我們先定義一些這個控制項的attrs屬性吧
<?xml version="1.0" encoding="utf-8"?>
解釋一下每個屬性對應的控制項表現,color 是條的顏色(當然條形的顏色也可以是彩色的),barwidth是條的寬度,barheight是條的高度,barcount是條的數目,duration是動畫時間,peakcount是在條形上下縮放的時候產生的波峰。那定義乙個這樣的控制項的時候就是這樣的
然後呢然後呢,就是我們的view具體**了
先是基本的那些變數和屬性balabala
private view views;
private context context;
private float barwidth; //條形寬度
private float barheight; //條形高度
private int barcolor; //條形背景色
private int barcount; //條形數目
private int duration; //動畫時間
private int peakcount; //波峰個數
this.context = context;
//從xml中獲取各個屬性值
typedarray a = context.obtainstyledattributes(attrs, r.styleable.lodingview);
barwidth = a.getdimension(r.styleable.lodingview_barwidth, 20);
barheight = a.getdimension(r.styleable.lodingview_barheight, 20);
barcolor = a.getcolor(r.styleable.lodingview_color, 0xffff11ff);
barcount = a.getint(r.styleable.lodingview_barcount, 4);
duration = a.getint(r.styleable.lodingview_duration, 800);
peakcount = a.getint(r.styleable.lodingview_peakcount, 2);
a.recycle();
init();
然後就是我們的主要的init()方法了,
private void init() else
views[i] = view;
objectanimator customanim = objectanimator.offloat(view,"scaley",1.0f,0.2f);
customanim.setstartdelay(delaytime);
customanim.setrepeatmode(valueanimator.reverse);
customanim.setrepeatcount(1000);
customanim.setduration(duration);
customanim.start();
addview(view);}}
**還是比較少的,邏輯也很簡單,首先根據barcount建立相應的view,我們可以看到上面的動態,每個條形的來回時間其實是一樣的,要想達到波浪的效果,我們就需要它們在前後有一定時間差下先後執行動畫。首先我們先把每個不同的部分分開,就像下圖
在紅線的左邊就是乙個峰,對應的條數也就是m ,每乙個峰囊括的部分動畫應該是一樣的,
然後就是在左邊部分又用綠線分成了兩部分,左邊的條,第一條和最後一條,先後動畫的時間差就是我們的duration,所以每一條的時間差就是這裡的time 。綠線左邊執行的時間是慢慢增加的,右邊的線是慢慢減少的,基本就是對稱的。然後就是給每個view新增動畫了
objectanimator customanim = objectanimator.offloat(view,"scaley",1.0f,0.2f);
customanim.setstartdelay(delaytime);
customanim.setrepeatmode(valueanimator.reverse);
customanim.setrepeatcount(1000);
customanim.setduration(duration);
customanim.start();
這樣我們想要的效果就達到了。
這樣的乙個view在動畫上面還可以有很多的拓展。改進之後同樣在github可以看到。
loading動畫 十 Flutter載入動畫
目錄 一 效果展示 二 roundpainter 三 roundprogress 四 旋轉起來 五 停止旋轉 一 效果展示 二 roundpainter 同上篇文章 九 flutter水波動畫 畫水波原理是一樣的,都是通過畫筆呈現不規則圖形。this.offsetlist是儲存載入的動畫裡面的實心圓...
CoreThink開發(十三)增加頁面載入動畫
效果 載入動畫是由jquery和fakeloader這個js庫實現的。其實這個也可以做成乙個外掛程式,用資料庫記錄是否開啟,選擇動畫的樣式,那樣擴充套件性會更好.這個獨立性很好,除了引入css檔案和js檔案,其餘的操作就是在頁面加乙個div層一步就ok了.1.把資源檔案放入corethink庫目錄中...
React 寫乙個 spinner 圓形載入動畫
不支援ie和firefox,支援webkit瀏覽器。注意,在現代瀏覽器中需要使用 webkit 字首。geometry values clip path inset 100px 50px clip path circle 50px at 0 100px clip path polygon 50 0 ...