赞
踩
App现在二维码扫描、人脸扫描的场景越来越多,扫描的动画效果实则就是平移动画:TranslateAnimation
使用TranslateAnimation实现一个人脸扫描的效果,上下来回滑动(二维码只要替换一下BG即可):
(PS:超过5M的gif上传不了,所以只录了一个轮回的,3M多,看着貌似是卡顿,其实是帧数太少,具体应用到代码中Run起来看效果)
1.效果图:
2.Activity:
- import android.support.v7.app.AppCompatActivity;
- import android.os.Bundle;
- import android.view.animation.Animation;
- import android.view.animation.LinearInterpolator;
- import android.view.animation.TranslateAnimation;
- import android.widget.ImageView;
-
- public class MainActivity extends AppCompatActivity {
- private ImageView mIvScan;
- /**
- * 0:从上往下 1:从下往上
- */
- Animation mTop2Bottom, mBottom2Top;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- mIvScan = findViewById(R.id.scan_line);
-
- mTop2Bottom = new TranslateAnimation(TranslateAnimation.ABSOLUTE, 0f,
- TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.RELATIVE_TO_PARENT, 0f,
- TranslateAnimation.RELATIVE_TO_PARENT, 0.7f);
-
- mBottom2Top = new TranslateAnimation(TranslateAnimation.ABSOLUTE, 0f,
- TranslateAnimation.ABSOLUTE, 0f, TranslateAnimation.RELATIVE_TO_PARENT, 0.7f,
- TranslateAnimation.RELATIVE_TO_PARENT, 0f);
-
- mBottom2Top.setRepeatMode(Animation.RESTART);
- mBottom2Top.setInterpolator(new LinearInterpolator());
- mBottom2Top.setDuration(1500);
- mBottom2Top.setFillEnabled(true);//使其可以填充效果从而不回到原地
- mBottom2Top.setFillAfter(true);//不回到起始位置
- //如果不添加setFillEnabled和setFillAfter则动画执行结束后会自动回到远点
- mBottom2Top.setAnimationListener(new Animation.AnimationListener() {
- @Override
- public void onAnimationStart(Animation animation) {
-
- }
-
- @Override
- public void onAnimationEnd(Animation animation) {
- mIvScan.startAnimation(mTop2Bottom);
- }
-
- @Override
- public void onAnimationRepeat(Animation animation) {
-
- }
- });
-
- mTop2Bottom.setRepeatMode(Animation.RESTART);
- mTop2Bottom.setInterpolator(new LinearInterpolator());
- mTop2Bottom.setDuration(1500);
- mTop2Bottom.setFillEnabled(true);
- mTop2Bottom.setFillAfter(true);
- mTop2Bottom.setAnimationListener(new Animation.AnimationListener() {
- @Override
- public void onAnimationStart(Animation animation) {
-
- }
-
- @Override
- public void onAnimationEnd(Animation animation) {
- mIvScan.startAnimation(mBottom2Top);
- }
-
- @Override
- public void onAnimationRepeat(Animation animation) {
-
- }
- });
- mIvScan.startAnimation(mTop2Bottom);
- }
- }
3.XML
主要2个控件,背景图和实现动画效果的目标ImageView:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:context=".MainActivity">
-
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="Hello World!"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintLeft_toLeftOf="parent"
- app:layout_constraintRight_toRightOf="parent"
- app:layout_constraintTop_toTopOf="parent" />
-
- <ImageView
- android:id="@+id/scan_line"
- android:layout_width="250dp"
- android:layout_height="94dp"
- android:layout_centerHorizontal="true"
- android:scaleType="centerCrop"
- android:src="@mipmap/icon_scan_line" />
-
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerHorizontal="true"
- android:scaleType="centerCrop"
- android:src="@mipmap/bg_frame_face" />
- </RelativeLayout>
xml预览:
Run一下,看效果。
(有更多的建议和方式,欢迎评论,一起交流学习~^_^)
Demo下载地址:https://download.csdn.net/download/u010231454/10847735
转载请注明出处,谢谢~ ^_^:Android 实现人脸识别检测时的扫描动画效果(二维码扫描动画效果同理)_android 扫描动画效果_碧水逍遥的博客-CSDN博客
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。