MetroLoading 載入動畫

2021-07-25 02:25:32 字數 2779 閱讀 6489

然後就是怎麼實現了，其實這個控制項的實現很簡單，就從動畫的形式來說吧 第

一、條形是呈水平排列的，第一想法肯定是繼承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 ...