Android 仿愛奇藝Loading效果

2021-07-25 12:38:25 字數 3328 閱讀 7415

這是乙個由基本圖形組成的loading效果圖,從圖上可以看出,整個效果分為兩個部分:1、三角形 2、圓環。當圓環轉動一圈時,三角形並未發生變化,當圓環轉動第二圈時,三角形隨圓環的消失而旋轉。有一定自定義view經驗的朋友一定知道,我們可以用畫筆畫出圓、矩形、扇形等基本圖形,也能通過path(路徑)來繪製三角形等任何圖形。這裡實現的方式有很多,我這裡用了乙個更為簡單易懂的方法來做:

三角形:

使用path路徑繪製乙個等邊三角形,並將三角形繪製在最上層。

三角形旋**

三角形的旋轉我們可以通過旋轉畫布canvas來實現,就不用每次都計算三角形每個點的位置了。

圓環:

使用綠色畫筆繪製乙個外圓,然後使用黑色畫筆繪製乙個內圓,內圓壓在外圓上,並且內圓的半徑略小於外圓的半徑,這樣重疊繪製之後,就能達到乙個圓環的效果。但是,由於我們的動畫是圓環從無到有再從有到無,所以最外層就不能直接繪製成圓形,而是繪製成乙個扇形,我們通過不斷改變扇形的角度,來達到圓環從無到有的動畫。

圓環從有到無:

圓環繪製完一圈之後,最外圈則是綠色的外圓,內圈是黑色的內圓。那麼我們只需要乙個跟綠色外圓同樣半徑的黑色扇形來重疊在外圓上,並且通過增加黑色扇形的角度來逐漸覆蓋外圈,從而實現乙個看似圓環「從有到無」的效果。這時,就應該有三層,從下到上的順序依次為:綠色外圓,黑色扇形,黑色內圓。

在專案中,有三個核心的類:loadingview(自定義控制項的檢視)、circlemodel(繪製圓環的類)、********model(繪製三角形的類)。loadingview主要控制另外兩個類的繪製和動畫的實施。

package com.example.iqyloadingview;

import android.content.context;

import android.graphics.canvas;

import android.graphics.color;

import android.graphics.paint;

import android.graphics.path;

public class ********model

private void initialres()

/** * 繪製三角形並轉動相應角度

* @param canvas

* @param sweepratio 旋轉比例

*/public void draw********(canvas canvas, float sweepratio)

private void countpointanddraw********(canvas canvas)

public void setposition(float centerwidth, float centerheight)

接下來看下圓環的繪製類:

package com.example.iqyloadingview;

import android.content.context;

import android.graphics.canvas;

import android.graphics.color;

import android.graphics.paint;

import android.graphics.rectf;

public class circlemodel

private void initialres()

private float currentsweep;

/** * 畫圓環

* * @param canvas

* @param sweepratio 掃過的百分比 0-1

*/public void drawring(canvas canvas, float sweepratio)

public void setpainttype(int type)else if(transparent_type == type)

}public void setposition(float centerwidth, float centerheight)

/*** 設定內圓的繪製區域

*/public void setinnerradius()

最後則是整體控制類:

package com.example.iqyloadingview;

import android.animation.valueanimator;

import android.content.context;

import android.graphics.canvas;

import android.util.attributeset;

import android.view.view;

import android.view.animation.animation;

import android.view.animation.linearinterpolator;

public class loadingview extends view

public loadingview(context context, attributeset attrs)

public loadingview(context context, attributeset attrs, int defstyleattr)

});}@override

protected void onsizechanged(int w, int h, int oldw, int oldh)

if (h != oldh)

if (circlemodel == null) else

}@override

protected void ondraw(canvas canvas)

if(currentpoint <= 1)else

frontcirclemodel.setinnerradius();

frontcirclemodel.drawring(canvas, 1);

//最後繪製三角形,保證三角形壓在其他圖形之上

********model.draw********(canvas,currentpoint);

}/**

* 開啟動畫

*/public void animationopen()

}

愛奇藝 筆試

題目描述 時間限制 1秒 空間限制 32768k 牛牛養了n只奶牛,牛牛想給每只奶牛編號,這樣就可以輕而易舉地分辨它們了。每個奶牛對於數字都有自己的喜好,第i只奶牛想要乙個1和x i 之間的整數 其中包含1和x i 牛牛需要滿足所有奶牛的喜好,請幫助牛牛計算牛牛有多少種給奶牛編號的方法,輸出符合要求...

愛奇藝程式設計題

1 爐石傳說 時間限制 c c 語言1000ms 其他語言3000ms 記憶體限制 c c 語言65536kb 其他語言589824kb 題目描述 小明喜歡玩一款叫做爐石傳說的卡牌遊戲,遊戲規則如下,玩家擁有n顆水晶和m張卡牌,每張卡牌的使用會消耗a顆水晶並且造成b的傷害值,請你幫小明算一下該如何使...

愛奇藝面試題

求字典序的最大子序 解題思路 例如乙個字串asdfghj,首先需要遍歷一遍字串,找到字典排序最大的s,然後接下來遍歷dfghj,找到最大的j。此時j是最後乙個字元,搜尋結束,字典排序最大的子字串即為sj。public static void main string args maxpos syste...