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 ...