如何使用Material动画实现顶部图片隐藏动画效果

你已经掌握基础的位移、旋转属性动画操作的话，实现这个效果非常简单，Material体系下有两种最常用的实现路径，完全不需要写复杂的自定义动画逻辑：

方案1：使用官方AppBarLayout实现规范联动隐藏（推荐） #

这是最贴合Material设计规范的方案，自带标准缓动曲线，不需要手动处理动画插值、滚动冲突：

• 根布局使用CoordinatorLayout作为容器，顶部区域用AppBarLayout包裹需要隐藏的顶部图片，下方放置可滚动内容（RecyclerView、NestedScrollView等）
• 给需要滚动隐藏的ImageView加上滚动标记属性，基础配置示例：

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/top_header"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:scaleType="centerCrop"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
        />

</com.google.android.material.appbar.AppBarLayout>

<!-- 下方可滚动内容必须加这个behavior才能触发联动 -->
<androidx.recyclerview.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

几个scrollFlag的作用：

• scroll：标记该View会跟随滚动事件做位移动画
• exitUntilCollapsed：向上滚动时优先把顶部图片完全滑出屏幕，再开始滚动列表内容
• snap：滚动停止时自动吸附，不会出现图片半露的中间状态

如果需要做折叠后固定标题栏的效果，只需要在AppBarLayout里加Toolbar，给Toolbar配置app:layout_scrollFlags="scroll|enterAlways"即可自动实现过渡。

方案2：自定义组合属性动画，适配非滚动触发场景 #

如果你需要手动控制隐藏触发时机（比如点击按钮触发、页面加载完成自动隐藏），直接组合基础属性动画即可：

• 核心动画逻辑：Y轴向上平移+透明度渐变，可选搭配缩放效果让动效更自然
• 动画时长用Material规范推荐的300ms，插值器统一用FastOutSlowInInterpolator，不要用线性插值器，动效节奏会更自然
• 代码示例（Kotlin）：

// 隐藏顶部图片
fun hideHeaderImg() {
    val headerImg = findViewById<ImageView>(R.id.top_header)
    headerImg.animate()
        .translationY(-headerImg.height.toFloat()) // 向上平移刚好完全移出屏幕
        .alpha(0f) // 同步渐变透明
        .setDuration(300)
        .setInterpolator(FastOutSlowInInterpolator())
        .withEndAction { 
            // 动画结束后如果需要释放布局空间，可以再设置GONE
            headerImg.visibility = View.GONE
        }
        .start()
}

// 显示顶部图片，反向执行动画即可
fun showHeaderImg() {
    val headerImg = findViewById<ImageView>(R.id.top_header)
    headerImg.visibility = View.VISIBLE
    headerImg.animate()
        .translationY(0f)
        .alpha(1f)
        .setDuration(300)
        .setInterpolator(FastOutSlowInInterpolator())
        .start()
}

不要直接通过visibility=GONE/VISIBLE切换显示状态，没有过渡动画会非常生硬。

优化注意点 #

• 如果是和列表滚动联动的场景，不要自己手动监听RecyclerView滚动距离计算偏移量，直接用AppBarLayout提供的OnOffsetChangedListener拿官方计算好的偏移值做自定义动效同步，不会出现滚动冲突、掉帧问题
• 如果需要做视差效果，可以给图片加app:layout_collapseMode="parallax"属性，自带滚动视差，不需要自己实现

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