Android扫描动画实现

文章目录

• • • 效果：
    • 实现：
    • • 需求来源：
      • 具体实现：
      • • 1、编写布局文件
        • 2、编写动画效果文件
        • 3、启动动画

效果：

实现： 需求来源：

最近接到一个实现扫描动画的需求，具体要求如下：

1. 扫描框以正方形显示。
2. 扫描框的大小为屏幕高度的30%。
3. 扫描框的位置在屏幕高度1/4的位置。
4. 设计师的要求总是辣么变态😒。

具体实现：

这里的实现方式使用了ConstraintLayout布局和View动画（简单高效😎），并没有使用自定义View的方式实现（其实就是不会😂），废话辣么多，看代码。

1、编写布局文件

以下是在主界面上显示的布局文件

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.25" />

    <View
        android:id="@+id/animView"
        android:layout_width="0dp"
        android:layout_height="3dp"
        android:background="#f00"
        app:layout_constraintEnd_toEndOf="@id/imageView"
        app:layout_constraintStart_toStartOf="@id/imageView"
        app:layout_constraintTop_toTopOf="@id/imageView" />

androidx.constraintlayout.widget.ConstraintLayout>

扫盲时刻：

1. 这里使用ImageView模拟扫描框，使用View模拟扫描线。
2. ImageView控件中的几个属性：

app:layout_constraintHeight_percent="0.3"表示ImageView控件的高度为屏幕高度的30%。
app:layout_constraintVertical_bias="0.25"表示ImageView的位置在屏幕1/4的位置。
app:layout_constraintDimensionRatio="h,1:1"表示ImageView的宽高比为1:1。

具体效果如下：

2、编写动画效果文件

布局文件写好之后开始编写动画文件，动画主要使用了View动画中的平移动画(translate)，让View扫描线从自身所在的位置开始向下移动，移动距离为屏幕高度的30%（因为扫描框的大小就是屏幕高度的30%呀），动画无限循环，每一次动画执行完毕后都重新开始执行该动画，不是执行结束后反向执行哟。

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="false"
    android:fromYDelta="0%p"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:toYDelta="30%p" />

扫盲时刻：

android:repeatCount="infinite"表示动画无线循环
android:repeatMode="restart"表示动画执行完毕后重新开始执行该动画

这里说明一下：当前View所在的位置就是0%的位置，他是一个相对位置，所以这里的android:fromYDelta="0%p"并不是指Y轴方向上屏幕的顶部哈。

3、启动动画

写好了布局文件和动画文件后就可以在代码中给指定控件设置动画效果，并启动动画了。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        View scanView = findViewById(R.id.animView);
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scan_anim);
        scanView.startAnimation(animation);
    }
}

搞 腚(啊呸) 定