Android动画教程：实现View缩放效果

施刚爽

于 2025-06-04 09:02:19 发布

阅读量325

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_00064/article/details/148415600

Android动画教程：实现View缩放效果

本文基于Android动画教程项目中的缩放动画章节，将详细介绍如何实现点击缩略图后平滑放大至全屏的动画效果。这种动画在相册类应用中非常常见，能够为用户提供良好的视觉体验。

一、动画效果预览

缩放动画的核心效果是：当用户点击缩略图时，图片会从原始位置平滑放大至全屏显示；当用户点击放大后的图片时，又会平滑缩小回原始位置。整个过程流畅自然，给用户直观的视觉反馈。

二、实现步骤详解

1. 布局设计

首先需要在布局文件中准备两个视图：

缩略图视图（通常是ImageButton）
全屏视图（ImageView，初始状态为隐藏）

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 缩略图部分 -->
    <ImageButton
        android:id="@+id/thumb_button_1"
        android:layout_width="100dp"
        android:layout_height="75dp"
        android:src="@drawable/thumb1"
        android:scaleType="centerCrop"/>

    <!-- 全屏视图，初始隐藏 -->
    <ImageView
        android:id="@+id/expanded_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible"/>
</FrameLayout>

2. 动画实现原理

缩放动画的实现基于以下关键技术点：

视图边界计算：需要准确计算缩略图的起始边界和全屏视图的目标边界
动画同步：需要同时控制视图的位置(X,Y)和大小(SCALE_X,SCALE_Y)属性
动画反转：放大和缩小实际上是同一动画的正向和反向过程

3. 核心代码实现

以下是实现缩放动画的核心方法：

private void zoomImageFromThumb(final View thumbView, int imageResId) {
    // 1. 取消正在进行的动画
    if (mCurrentAnimator != null) {
        mCurrentAnimator.cancel();
    }

    // 2. 加载高清图片到全屏视图
    final ImageView expandedImageView = findViewById(R.id.expanded_image);
    expandedImageView.setImageResource(imageResId);

    // 3. 计算起始和结束边界
    final Rect startBounds = new Rect();
    final Rect finalBounds = new Rect();
    thumbView.getGlobalVisibleRect(startBounds);
    findViewById(R.id.container).getGlobalVisibleRect(finalBounds);

    // 4. 调整边界保持宽高比
    float startScale;
    if ((float) finalBounds.width() / finalBounds.height()
            > (float) startBounds.width() / startBounds.height()) {
        // 水平扩展
        startScale = (float) startBounds.height() / finalBounds.height();
        float startWidth = startScale * finalBounds.width();
        float deltaWidth = (startWidth - startBounds.width()) / 2;
        startBounds.left -= deltaWidth;
        startBounds.right += deltaWidth;
    } else {
        // 垂直扩展
        startScale = (float) startBounds.width() / finalBounds.width();
        float startHeight = startScale * finalBounds.height();
        float deltaHeight = (startHeight - startBounds.height()) / 2;
        startBounds.top -= deltaHeight;
        startBounds.bottom += deltaHeight;
    }

    // 5. 设置动画初始状态
    thumbView.setAlpha(0f);
    expandedImageView.setVisibility(View.VISIBLE);
    expandedImageView.setPivotX(0f);
    expandedImageView.setPivotY(0f);

    // 6. 创建并执行动画集
    AnimatorSet set = new AnimatorSet();
    set.playTogether(
        ObjectAnimator.ofFloat(expandedImageView, View.X, startBounds.left, finalBounds.left),
        ObjectAnimator.ofFloat(expandedImageView, View.Y, startBounds.top, finalBounds.top),
        ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X, startScale, 1f),
        ObjectAnimator.ofFloat(expandedImageView, View.SCALE_Y, startScale, 1f)
    );
    set.setDuration(mShortAnimationDuration);
    set.setInterpolator(new DecelerateInterpolator());
    set.start();
    mCurrentAnimator = set;

    // 7. 设置点击返回动画
    expandedImageView.setOnClickListener(v -> {
        // 执行反向动画
        AnimatorSet reverseSet = new AnimatorSet();
        reverseSet.playTogether(
            /* 反向动画属性设置 */
        );
        reverseSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                thumbView.setAlpha(1f);
                expandedImageView.setVisibility(View.GONE);
            }
        });
        reverseSet.start();
    });
}

三、技术要点解析

边界计算：通过getGlobalVisibleRect()获取视图在屏幕上的绝对位置，这是动画起始和结束位置的关键。
宽高比保持：在计算起始边界时，需要根据最终视图的宽高比进行调整，防止动画过程中出现变形。
动画同步：使用AnimatorSet同步执行位置和大小变化，确保动画效果自然流畅。
性能优化：
- 使用系统预定义的短动画时间(config_shortAnimTime)
- 使用DecelerateInterpolator使动画结束时有减速效果，更符合物理规律
- 在动画开始前取消正在进行的动画，避免冲突
用户体验：
- 缩略图在放大时淡出，全屏视图淡入
- 全屏视图可点击返回
- 动画中断时能正确处理状态恢复