目錄

前言

Android TV開發與手機開發最大的不同點就是焦點，TV常用的操作方式是遙控器，所以給用戶一個醒目美觀的焦點是至關重要的。很多產品經理在設計焦點的時候都會選擇掃光的效果，比如小牧電視的控件選中效果。今天就給大家介紹一款自定義的掃光效果控件。

效果展示

1、海報掃光效果

2、帶圓角的控件掃光效果，光效不會超過圓角的位置

3、掃光容器，可以在掃光容器中放子控件，目前僅實現了LinearLayout

4、圖片掃光效果，光效與圖片中不透明內容交融的一種效果

實現思路

這一組控件的實現思路，其實很簡單，就是光效bitmap的移動，可以是移動畫布，也可以是移動bitmap，兩種思路都可以實現。當然其中在實現圓角掃光、光效與圖片內容交融等效果時，用到一個比較重要的知識點，就是PorterDuffXfermode。具體介紹Xfermode或者PorterDuffXfermode的文章可以去網上搜一下，有很多。簡單講PorterDuffXfermode是一個非常強大的轉換模式，使用它，可以使用圖像合成的16條Porter-Duff規則的任意一條來控制Paint如何與已有的Canvas圖像進行交互。

PorterDuffXfermode的風格就是上面的16中，我們可以簡單的理解為一個SRC圖形與DST圖形的交集，并集類似的效果，在我們這組控件中，主要用到了DST_ATOP、DST_IN。詳細使用方法可參考控件源碼。

使用方法

首先需要引入library：

implementation 'com.beauney.scanning:scanning-view:1.0.1'

1、海報斜向的掃光效果控件使用

xml中使用控件：

java代碼中調用start()、stop()方法：

RelativeLayout container = findViewById(R.id.container);

for (int i = 0; i < container.getChildCount(); i++) {

container.getChildAt(i).setOnFocusChangeListener(new View.OnFocusChangeListener() {

@Override

public void onFocusChange(View view, boolean b) {

ScanningView scanningView = view.findViewWithTag("scanning_view");

if (b) {

AnimatorUtil.scaleBigAnimator(view);

scanningView.start();

} else {

AnimatorUtil.scaleSmallAnimator(view);

scanningView.stop();

}

}

});

}

該控件提供了自定義屬性lightImage，可以自定義更換光效圖片：

圖片制作參考默認掃光圖片

2、帶圓角的豎向掃光效果控件使用

xml中使用控件：

java代碼中調用start()、stop()方法：

mScanningRoundView.start();

mScanningRoundView.stop();

該控件提供了兩個自定義屬性，用于修改光效圖片和圓角角度，參考如下代碼：

圖片制作參考默認掃光圖片，這里沒有采用9patch的圖片，所以控件高度要和光效圖片的高度一致。

3、帶圓角的掃光容器使用

xml中使用控件：

java代碼中調用start()、stop()方法：

mScanningLayout.start();

mScanningLayout.stop();

同樣提供了兩個自定義屬性，用于修改光效圖片和圓角角度，參考如下代碼：

圖片制作參考默認掃光圖片，這里沒有采用9patch的圖片，所以控件高度要和光效圖片的高度一致。

4、圖片掃光效果控件使用

xml中使用控件：

java代碼中調用相關方法

public void startScanning(View view) {

//啟動控件動效之前需要將原始的圖片傳入

if (mScanningImageView.getSrcBitmap() == null) {

mScanningImageView.setSrcBitmap(ScreenCapture.captureWidget(mIconImg));

}

mScanningImageView.start();

}

public void stopScanning(View view) {

mScanningImageView.stop();

}

該控件提供了一個自定義屬性，用于修改光效顏色，參考如下代碼:

完成的源碼和demo

總結

以上是生活随笔為你收集整理的Android控件扫光动画,完美起航-AndroidTV控件获得焦点的扫光效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。