使用动画 onClick 在 ListView 中放大 ImageView

Question

我正在尝试像在 WhatsApp 中一样实现放大动画。我有一个 ListView，其中每个 ListView 项目的左侧都有一个 ImageView。单击 ImageView 应该会放大图像并将其显示在中间（几乎全屏宽度）。

我试过 the Android developer guide suggestion 但它对我不起作用。所以我用谷歌搜索了一下，但找不到 "the perfect answer"。这是我到目前为止得到的。

private void enlargeProfilePicture(View view, Drawable drawable, View convertView) {
    fullScreenImageView.setImageDrawable(drawable);
    Animation scale = new ScaleAnimation(
            0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    scale.setDuration(1000);

    final Rect startBounds = new Rect();
    final Rect finalBounds = new Rect();
    final Point globalOffset = new Point();

    convertView.getGlobalVisibleRect(startBounds);
    rootView.getGlobalVisibleRect(finalBounds, globalOffset);
    finalBounds.offset(-globalOffset.x, -globalOffset.y);

    Animation translate
            = new TranslateAnimation(startBounds.left,
            finalBounds.left,
            startBounds.top,
            finalBounds.top);
    translate.setInterpolator(new AnticipateInterpolator());
    translate.setDuration(1000);
    // Animation set to join both scaling and moving
    AnimationSet animSet = new AnimationSet(true);
    animSet.setFillEnabled(true);
    animSet.addAnimation(scale);
    animSet.addAnimation(translate);
    // Launching animation set
    animSet.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
            fullScreenImageView.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }
    });
    fullScreenImageView.startAnimation(animSet);
}

所以 root 是定义我的 ListView 的容器，fullScreenImageView 是以放大方式显示 Drawable 的 ImageView，convertView 是 ListView 内部的视图（ListView 项目本身），view 是单击的 ImageView上。

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

<ListView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<ImageView
    android:id="@+id/full_size_profile_picture"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="invisible"/>
</RelativeLayout>

基本上问题出在翻译上。如何找到翻译的正确起点和终点坐标？缩放动画效果很好。

Answer 1

我会使用 Animator 而不是 Animation。

Animator scaleX = ObjectAnimator.ofFloat(view, View.SCALE_X, 2f);
Animator scaleY = ObjectAnimator.ofFloat(view, View.SCALE_Y, 2f);
AnimatorSet animSet = new AnimatorSet();
animSet.setDuration(300).setInterpolator(new AccelerateDecelerateInterpolator());
animSet.playTogether(scaleX, scaleY);
animSet.start();

Animator优于Animation，因为它修改了视图的属性。 Animation 只修改外观，不修改视图本身。

如果您应用的 minSdk 高于或等于 14，请使用该代码。如果您的应用至少需要 sdk 11，请使用这个：

Animator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 2f);
Animator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 2f);

Answer 2

好的，我解决了这个问题。问题在于我如何使用动画构造函数。我不知道我从哪里得到代码，但我只是从其他地方使用它，它显然可以工作，但不适用于我的情况。这是一个工作示例。

private void enlargeProfilePicture(View view, Drawable drawable) {
    // view is the ImageView holding the image inside one ListView item
    fullScreenImageView.setImageDrawable(drawable);
    Animation scale = new ScaleAnimation(0f, 1f, 0f, 1f);
    scale.setDuration(1000);
    scale.setInterpolator(new LinearInterpolator());

    final Rect startBounds = new Rect();
    final Rect finalBounds = new Rect();
    final Point globalOffset = new Point();

    view.getGlobalVisibleRect(startBounds);
    rootView.getGlobalVisibleRect(finalBounds, globalOffset);
    finalBounds.offset(-globalOffset.x, -globalOffset.y);

    Animation translate
            = new TranslateAnimation(Animation.ABSOLUTE, startBounds.left + view.getWidth()/2,
            Animation.ABSOLUTE, finalBounds.left,
            Animation.ABSOLUTE, startBounds.top - view.getHeight()/2,
            Animation.ABSOLUTE, finalBounds.top);
    translate.setInterpolator(new LinearInterpolator());
    translate.setDuration(1000);
    // Animation set to join both scaling and moving
    AnimationSet animSet = new AnimationSet(true);
    animSet.setFillEnabled(true);
    animSet.addAnimation(scale);
    animSet.addAnimation(translate);
    // Launching animation set
    animSet.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
            fullScreenImageView.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }
    });
    fullScreenImageView.startAnimation(animSet);
}

使用动画 onClick 在 ListView 中放大 ImageView

Enlarge ImageView within ListView with animation onClick

animation

android

listview

imageview