Android使用动画实现微信扫描线效果

很多App都有扫描二维码功能，扫描的时候会有一个移动的扫描线，看起来很好实现，不过我网上搜了搜很多方法都是实时绘制出来的，计算点的位置然后重绘出来。我的第一感觉是完全没必要，其实这个东西本质上就是一张贴图加一个平移动画效果，所以就自己做了一个小小例子。

首先是扫描线的素材，这个是直接从微信apk里面扒出来的（其实你如果看中某个App的界面中的某个素材，可以直接下载apk，后缀改成zip解压，然后在里面慢慢找，一般都能找到png图片）。

然后贴出布局文件代码：

[java]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:id="@+id/activity_main"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     tools:context="com.example.user.myapplication.MainActivity">  
8.     <View  
9.         android:id="@+id/previewView"  
10.         android:layout_width="300dp"  
11.         android:layout_height="300dp"  
12.         android:layout_centerInParent="true"  
13.         android:background="@color/colorPrimary"/>  
14.   
15.     <ImageView  
16.         android:id="@+id/scanHorizontalLineImageView"  
17.         android:layout_width="300dp"  
18.         android:layout_height="wrap_content"  
19.         android:src="@drawable/horizontal_line" />  
20.   
21.     <ImageView  
22.         android:id="@+id/scanVerticalLineImageView"  
23.         android:layout_width="wrap_content"  
24.         android:layout_height="300dp"  
25.         android:src="@drawable/vertical_line"/>  
26. </RelativeLayout>  

界面很简单，previewView主要是用来模拟拍照的预览图，这个预览图提供了动画定位信息，接下来代码会讲。下面是核心代码：

[java]  view plain  copy

1. public class MainActivity extends AppCompatActivity {  
2.   
3.     private ImageView mScanHorizontalLineImageView;  
4.     private ImageView mScanVerticalLineImageView;  
5.     private View mPreviewView;  
6.   
7.     @Override  
8.     protected void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(R.layout.activity_main);  
11.   
12.         mScanHorizontalLineImageView = (ImageView) findViewById(R.id.scanHorizontalLineImageView);  
13.         mScanVerticalLineImageView = (ImageView) findViewById(R.id.scanVerticalLineImageView);  
14.         mPreviewView = findViewById(R.id.previewView);  
15.     }  
16.   
17.     @Override  
18.     public void onWindowFocusChanged(boolean hasFocus) {  
19.         super.onWindowFocusChanged(hasFocus);  
20.   
21.         int[] location = new int[2];  
22.   
23.         // getLocationInWindow方法要在onWindowFocusChanged方法里面调用  
24.         // 个人理解是onCreate时，View尚未被绘制，因此无法获得具体的坐标点  
25.         mPreviewView.getLocationInWindow(location);  
26.   
27.         // 模拟的mPreviewView的左右上下坐标坐标  
28.         int left = mPreviewView.getLeft();  
29.         int right = mPreviewView.getRight();  
30.         int top = mPreviewView.getTop();  
31.         int bottom = mPreviewView.getBottom();  
32.   
33.         // 从上到下的平移动画  
34.         Animation verticalAnimation = new TranslateAnimation(left, left, top, bottom);  
35.         verticalAnimation.setDuration(3000); // 动画持续时间  
36.         verticalAnimation.setRepeatCount(Animation.INFINITE); // 无限循环  
37.   
38.         // 播放动画  
39.         mScanHorizontalLineImageView.setAnimation(verticalAnimation);  
40.         verticalAnimation.startNow();  
41.   
42.         // 从左到右的平移动画  
43.         Animation horizontalAnimation = new TranslateAnimation(left, right, top, top);  
44.         horizontalAnimation.setDuration(3000); // 动画持续时间  
45.         horizontalAnimation.setRepeatCount(Animation.INFINITE); // 无限循环  
46.   
47.         //播放动画  
48.         mScanVerticalLineImageView.setAnimation(horizontalAnimation);  
49.         horizontalAnimation.startNow();  
50.   
51.     }  
52. }  

最后的效果大概就是这个样子的：

其实扫描识别二维码这个东西，个人理解就是照相机得到的帧不停地塞给图像处理模块，然后等待图像处理模块回调。