快捷導(dǎo)航

Android自定義view利用Xfermode實(shí)現(xiàn)動(dòng)態(tài)文字加載動(dòng)畫(huà)

更新時(shí)間：2021年08月24日 10:06:51 作者：WangRain1

這篇文章主要介紹了Android自定義view利用Xfermode實(shí)現(xiàn)動(dòng)態(tài)文字加載動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

對(duì)于Xfermode 可能很多人看了一些就放棄了，今天我就個(gè)人理解，舉簡(jiǎn)單的我們生活中的例子，讓大家更容易理解這是個(gè)什么東西。其實(shí)并不是你們想象的那么難，你只要懂三步就夠了。先來(lái)看一看這次的效果圖，這個(gè)gif大家湊合看。

不要把Xfermode 想的這么難，我把Xfermode 理解成中學(xué)時(shí) 學(xué)的“集合” ，我們知道“集合”是處理數(shù)據(jù)的。例如：
集合 A={1,2,3,4}，集合B={3,4,5,6}。這兩個(gè)集合有三個(gè)屬性，交集，并集，補(bǔ)集。
那么 Xfermode 我個(gè)人理解就是圖形集合，就是圖形A，圖形B 之間可以取，交集，并集，補(bǔ)集。當(dāng)然這個(gè) A和 B 之間取那種類型，形成什么樣的效果，其實(shí)就是我們選取的 Xformode 的屬性類型。
這個(gè)就引出了我們今天的第一步，雖然是三步，但是前提是你要對(duì)自定義view 有一定的了解比如你要知道 ondraw（），onmesure（），Paint 畫(huà)筆，canvars畫(huà)布這些內(nèi)容你要了解，對(duì)自定義不是很清楚的朋友可以去看我的同類文章，文章從入門(mén)一步一步帶大家進(jìn)入自定義view：

第一步：我們要熟悉一下這個(gè)圖

16個(gè)圖形結(jié)果，其實(shí)現(xiàn)在有18中。這個(gè)圖我們也不用記，只要在用的時(shí)候選擇對(duì)應(yīng)得我們的目標(biāo)圖形就行了。具體怎么使用我們要引出我們今天主要的類 PorterDuffXfermode 這個(gè)類就是我們的Xformode 的類了，他還有另外被廢棄的兩兄弟，被廢棄了就不談了。既然是各類我們要使用就要?jiǎng)?chuàng)建對(duì)象，如下：

PorterDuffXfermode xfermode = new 
PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

這里就是我們的對(duì)象，在這里他的構(gòu)造參數(shù)中就是我們上圖選擇的類型，最終圖形是兩個(gè)圖形的交集部分。當(dāng)然你可以根據(jù)你的目標(biāo)圖形的效果自己選擇，兩個(gè)圖片的混排類型。
這就是第一步，我們只要了解一下圖片的意義，和 PorterDuffXfermode 這個(gè)類的用法就夠了。我這里提到的所有圖不只是圖片，還有我們繪制出來(lái)的圓，矩形等繪制的圖。

第二步：

我們了解了圖形混排的模式，所以第二步我們要有兩個(gè)圖，不然怎么混排，從圖中我們可以看出這兩個(gè)圖，分別是 Src ，Dst。接下來(lái)我會(huì)介紹這兩個(gè)名字對(duì)應(yīng)我們手機(jī)上那個(gè)圖形。因?yàn)槲覀円?huà)圖所以我們就要來(lái)到 ondraw（）方法了，這個(gè)方法有個(gè)類叫canvas 圖層，所以這就到了我們第二步的關(guān)鍵點(diǎn)：那就是設(shè)置圖層，調(diào)用方法

canvas.saveLayer( left, top, right, bottom, paint, saveFlags)

首先前四個(gè)方法比較簡(jiǎn)單，就是我們要設(shè)置這個(gè)圖層的大小，第5個(gè)方法就是我們的畫(huà)筆，第6個(gè)方法我們使用：Canvas.ALL_SAVE_FLAG ，這是一個(gè)flag。

注意：我們?cè)诶L制圖形之前必須調(diào)用上面的方法，不然沒(méi)有效果。

下面是這個(gè)繪制的先后順序：

/**
 * 設(shè)置圖層
 */
int layer = canvas.saveLayer(0,0,w,h,paint,Canvas.ALL_SAVE_FLAG);
//繪制背景圖片
canvas.drawBitmap(bitmap,0,0,paint);
//設(shè)置 xformode 模式
paint.setXfermode(xfermode);
//繪制矩形
paint.setColor(Color.RED);
RectF rectF = new RectF(0,y,bitmap.getWidth(),bitmap.getHeight());
canvas.drawRect(rectF,paint);
//最后設(shè)置為空
paint.setXfermode(null);
canvas.restoreToCount(layer);

第三步：

第三步我們還是圍繞著上邊的代碼講，因?yàn)榫瓦@幾行代碼，因?yàn)楹芎?jiǎn)單。設(shè)置好圖層之后，就要繪制圖形了，我們這里用canvas繪制了一個(gè) bitmap 圖片。大家注意了我們此時(shí) 用的 paint 只是普通的畫(huà)筆，到這個(gè)時(shí)候我們的 PorterDuffXfermode 模式還沒(méi)有使用呢！
再往下看我們的畫(huà)筆調(diào)用了：

paint.setXfermode(xfermode);

這個(gè)方法，所以如果我們?cè)倮L制圖形的畫(huà)，再用到的畫(huà)筆就和我們之前繪制的圖形不一樣了。這個(gè)方法可以說(shuō)是一個(gè)分界點(diǎn)，在這個(gè)方法之前繪制的圖形和之后繪制的圖形就分別對(duì)應(yīng)了我們圖中 Src 和 Dst 的圖。這就決定我們最終的目標(biāo)圖形是什么樣的。

最后就是把畫(huà)筆的 xformode 模式設(shè)置為空。再調(diào)用canvas的這個(gè)方法

canvas.restoreToCount(layer);

我們的繪制就結(jié)束了。我這里使用動(dòng)畫(huà)動(dòng)態(tài)的改變了矩形的高度。我把這個(gè) 圖片貼給大家，圖片還是盜別人的。哈哈。

大家可以下載使用。

把代碼也貼出來(lái)，大家參考。以上都是我個(gè)人的理解，包括給大家舉的例子，如果有不妥之處請(qǐng)指出，謝謝。

public class XformodeView extends View {

 Paint paint ;

 //屏幕寬高
 int w;
 int h;
 //定義一個(gè)矩形的高度變化
 float y;

 //xformode 的 類型 選擇
 PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
 //圖片
 Bitmap bitmap;

 public XformodeView(Context context) {
 this(context,null);
 }

 public XformodeView(Context context, @Nullable AttributeSet attrs) {
 this(context,attrs,0);
 }

 public XformodeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);

 //畫(huà)筆
 paint = new Paint();
 paint.setAntiAlias(true);
 paint.setDither(true);

 init(context);
 }

 /**
 * 初始化
 * @param context
 */
 public void init(Context context){
 //獲得屏幕寬高
 WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
 w = wm.getDefaultDisplay().getWidth();
 h = wm.getDefaultDisplay().getHeight();
 //加載bitmap 圖片
 bitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.xxx);
 //開(kāi)始動(dòng)畫(huà)
 animator();
 }

 /**
 * 測(cè)量view
 */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 setMeasuredDimension(bitmap.getWidth(),bitmap.getHeight());
 }

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);

 /**
  * 繪制 圖片 剪切 畫(huà)布 控制圖片顯示
  */
// Path path = new Path();
// path.moveTo(0,y);
//
// path.lineTo(bitmap.getWidth(),y);
// path.lineTo(bitmap.getWidth(),bitmap.getHeight());
// path.lineTo(0,bitmap.getHeight());
// canvas.clipPath(path);

 /**
  * 設(shè)置圖層
  */
 int layer = canvas.saveLayer(0,0,w,h,paint,Canvas.ALL_SAVE_FLAG);
 //繪制背景圖片
 canvas.drawBitmap(bitmap,0,0,paint);
 //設(shè)置 xformode 模式
 paint.setXfermode(xfermode);
 //繪制矩形
 paint.setColor(Color.RED);
 RectF rectF = new RectF(0,y,bitmap.getWidth(),bitmap.getHeight());
 canvas.drawRect(rectF,paint);
 //最后設(shè)置為空
 paint.setXfermode(null);
 canvas.restoreToCount(layer);
 }

 /**
 * 動(dòng)畫(huà)
 */
 public void animator(){

 ValueAnimator animator = ValueAnimator.ofFloat(bitmap.getHeight(),0);
 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  y = (float) animation.getAnimatedValue();
  invalidate();
  }
 });
 animator.setDuration(3000);
 animator.start();
 }
}

你也可以做一些復(fù)雜的效果，比如你不用矩形，你可以用波浪的效果讓他充滿。發(fā)揮想象力去做吧。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: