如何在Android Studio中实现类似小米安全扫描应用的智能动画效果

你参考的扫描效果如下图：

动画核心组成拆解 #

这类扫描页的动画通常由4个独立模块组合实现，你已经掌握的基础位移动画可以直接复用在部分模块里：

• 页面入场动画：Activity跳转时的转场动画，直接用系统过渡动画或者自定义补间动画即可实现
• 背景波纹扩散：无限循环的缩放+透明度渐变组合动画
• 中心扫描动效：雷达式扇形旋转动画，或者逐行扫描的位移动画
• 扫描项弹出：识别到内容时的上移+渐入动画，就是你已经熟悉的基础位移动画组合

具体实现步骤 #

2.1 页面入场转场配置 #

在启动扫描Activity的代码处，调用overridePendingTransition配置入场效果，示例为从下往上滑入效果：

// 启动扫描页
val intent = Intent(this, ScanActivity::class.java)
startActivity(intent)
// 两个参数分别对应新页面入场、旧页面退场的动画资源ID
overridePendingTransition(R.anim.slide_in_bottom, R.anim.fade_out)

对应的anim资源直接用你熟悉的补间动画规则定义即可。

2.2 背景波纹扩散实现 #

在扫描页布局最底层放置多个半透明圆形View，给每个设置不同的启动延迟，循环播放缩放+透明度动画即可形成连续扩散效果：

<!-- 布局中的波纹View示例，层数根据你需要的波纹密度调整 -->
<View
    android:id="@+id/wave1"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/shape_wave_circle"
    android:layout_centerInParent="true"/>

shape_wave_circle为半透明圆形shape文件：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#1A62B8FF"/>
</shape>

给每个波纹View绑定动画：

// 单组波纹动画配置
fun getWaveAnim(view: View): AnimatorSet {
    val scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1f, 2.5f)
    val scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1f, 2.5f)
    val alpha = ObjectAnimator.ofFloat(view, "alpha", 0.6f, 0f)
    return AnimatorSet().apply {
        playTogether(scaleX, scaleY, alpha)
        duration = 2000
        repeatCount = ValueAnimator.INFINITE
        repeatMode = ValueAnimator.RESTART
    }
}
// 给不同波纹设置启动差，形成连续扩散效果
val wave1Anim = getWaveAnim(wave1).apply { startDelay = 0 }
val wave2Anim = getWaveAnim(wave2).apply { startDelay = 600 }
val wave3Anim = getWaveAnim(wave3).apply { startDelay = 1200 }
// 依次启动动画
wave1Anim.start()
wave2Anim.start()
wave3Anim.start()

2.3 中心扫描动画实现 #

如果要做雷达式旋转扫描，自定义一个扇形Drawable作为扫描层，给它设置无限匀速旋转动画即可：

val scanRotateAnim = ObjectAnimator.ofFloat(scanFanView, "rotation", 0f, 360f).apply {
    duration = 3000
    repeatCount = ValueAnimator.INFINITE
    interpolator = LinearInterpolator() // 保持匀速旋转
}
scanRotateAnim.start()

如果是逐行上下扫描的效果，直接用你熟悉的位移动画，让扫描线View在扫描区域内循环上下移动即可。

2.4 扫描项弹出动画 #

扫描到内容时动态添加图标/文本到布局，给每个新增View设置上移+渐入动画即可：

val translateAnim = ObjectAnimator.ofFloat(itemView, "translationY", 50f, 0f)
val alphaAnim = ObjectAnimator.ofFloat(itemView, "alpha", 0f, 1f)
AnimatorSet().apply {
    playTogether(translateAnim, alphaAnim)
    duration = 300
    start()
}

优化建议 #

如果同时播放的动效较多，优先使用属性动画而非传统补间动画，性能更好，也更容易控制多个动画的同步和组合。

内容的提问来源于stack exchange，提问作者Security Coding