当前位置:   article > 正文

Android 实现人脸识别检测时的扫描动画效果(二维码扫描动画效果同理)_二维码扫描动画 android

二维码扫描动画 android

使用场景和说明:

App现在二维码扫描、人脸扫描的场景越来越多,扫描的动画效果实则就是平移动画:TranslateAnimation

简单的实现方式:

使用TranslateAnimation实现一个人脸扫描的效果,上下来回滑动(二维码只要替换一下BG即可):
(PS:超过5M的gif上传不了,所以只录了一个轮回的,3M多,看着貌似是卡顿,其实是帧数太少,具体应用到代码中Run起来看效果)

1.效果图:

2.Activity:

  1. import android.support.v7.app.AppCompatActivity;
  2. import android.os.Bundle;
  3. import android.view.animation.Animation;
  4. import android.view.animation.LinearInterpolator;
  5. import android.view.animation.TranslateAnimation;
  6. import android.widget.ImageView;
  7. public class MainActivity extends AppCompatActivity {
  8. private ImageView mIvScan;
  9. /**
  10. * 0:从上往下 1:从下往上
  11. */
  12. Animation mTop2Bottom, mBottom2Top;
  13. @Override
  14. protected void onCreate(Bundle savedInstanceState) {
  15. super.onCreate(savedInstanceState);
  16. setContentView(R.layout.activity_main);
  17. mIvScan = findViewById(R.id.scan_line);
  18. mTop2Bottom = new TranslateAnimation(TranslateAnimation.ABSOLUTE, 0f,
  19. TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.RELATIVE_TO_PARENT, 0f,
  20. TranslateAnimation.RELATIVE_TO_PARENT, 0.7f);
  21. mBottom2Top = new TranslateAnimation(TranslateAnimation.ABSOLUTE, 0f,
  22. TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.RELATIVE_TO_PARENT, 0.7f,
  23. TranslateAnimation.RELATIVE_TO_PARENT, 0f);
  24. mBottom2Top.setRepeatMode(Animation.RESTART);
  25. mBottom2Top.setInterpolator(new LinearInterpolator());
  26. mBottom2Top.setDuration(1500);
  27. mBottom2Top.setFillEnabled(true);//使其可以填充效果从而不回到原地
  28. mBottom2Top.setFillAfter(true);//不回到起始位置
  29. //如果不添加setFillEnabled和setFillAfter则动画执行结束后会自动回到远点
  30. mBottom2Top.setAnimationListener(new Animation.AnimationListener() {
  31. @Override
  32. public void onAnimationStart(Animation animation) {
  33. }
  34. @Override
  35. public void onAnimationEnd(Animation animation) {
  36. mIvScan.startAnimation(mTop2Bottom);
  37. }
  38. @Override
  39. public void onAnimationRepeat(Animation animation) {
  40. }
  41. });
  42. mTop2Bottom.setRepeatMode(Animation.RESTART);
  43. mTop2Bottom.setInterpolator(new LinearInterpolator());
  44. mTop2Bottom.setDuration(1500);
  45. mTop2Bottom.setFillEnabled(true);
  46. mTop2Bottom.setFillAfter(true);
  47. mTop2Bottom.setAnimationListener(new Animation.AnimationListener() {
  48. @Override
  49. public void onAnimationStart(Animation animation) {
  50. }
  51. @Override
  52. public void onAnimationEnd(Animation animation) {
  53. mIvScan.startAnimation(mBottom2Top);
  54. }
  55. @Override
  56. public void onAnimationRepeat(Animation animation) {
  57. }
  58. });
  59. mIvScan.startAnimation(mTop2Bottom);
  60. }
  61. }

3.XML

主要2个控件,背景图和实现动画效果的目标ImageView

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. tools:context=".MainActivity">
  8. <TextView
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:text="Hello World!"
  12. app:layout_constraintBottom_toBottomOf="parent"
  13. app:layout_constraintLeft_toLeftOf="parent"
  14. app:layout_constraintRight_toRightOf="parent"
  15. app:layout_constraintTop_toTopOf="parent" />
  16. <ImageView
  17. android:id="@+id/scan_line"
  18. android:layout_width="250dp"
  19. android:layout_height="94dp"
  20. android:layout_centerHorizontal="true"
  21. android:scaleType="centerCrop"
  22. android:src="@mipmap/icon_scan_line" />
  23. <ImageView
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:layout_centerHorizontal="true"
  27. android:scaleType="centerCrop"
  28. android:src="@mipmap/bg_frame_face" />
  29. </RelativeLayout>

xml预览:

Run一下,看效果。

(有更多的建议和方式,欢迎评论,一起交流学习~^_^)

Demo下载地址:https://download.csdn.net/download/u010231454/10847735
转载请注明出处,谢谢~ ^_^:Android 实现人脸识别检测时的扫描动画效果(二维码扫描动画效果同理)_android 扫描动画效果_碧水逍遥的博客-CSDN博客

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/290407
推荐阅读
相关标签
  

闽ICP备14008679号