在动画结束时,缩略图视图(动画视图)向上移动并保持其原始位置的左侧。怎么避免这个?

时间:2015-07-03 06:11:50

标签: android zoom android-animation

我正在关注developer.android.com的this培训文章,以缩放Android中的视图。在本文中有两个ImageViews,一个是ImageView,它是一个缩略图(要缩放)和&另一个也是ImageView,它是一个覆盖整个屏幕的缩放视图。使用ImageViews缩略图时,应用程序行为与预期一致。放大视图。但是,当我使用GestureImageView代替第二个放大了ImageView的ImageView时,当单击GestureImageView(缩放视图)以在完成单击循环后隐藏缩放视图以显示缩放视图时,缩略图向左移动。单击以隐藏缩放视图,如下所示:

Shifted thumbnail after zoomed view clicked to hide itself

以下是我正在使用的代码:

private void zoomImageFromThumb(final View thumbView, Drawable imageResBitmap) {
    // If there's an animation in progress, cancel it
    // immediately and proceed with this one.
    if (currentAnimator != null) {
        currentAnimator.cancel();
    }

    // Load the high-resolution "zoomed-in" image.
    final ImageView expandedImageView = (ImageView) findViewById(R.id.expanded_image);
    expandedImageView.setImageDrawable(imageResBitmap);

    // Calculate the starting and ending bounds for the zoomed-in image.
    // This step involves lots of math. Yay, math.
    final Rect startBounds = new Rect();
    final Rect finalBounds = new Rect();
    final Point globalOffset = new Point();

    // The start bounds are the global visible rectangle of the thumbnail,
    // and the final bounds are the global visible rectangle of the container
    // view. Also set the container view's offset as the origin for the
    // bounds, since that's the origin for the positioning animation
    // properties (X, Y).
    thumbView.getGlobalVisibleRect(startBounds);
    findViewById(R.id.container).getGlobalVisibleRect(finalBounds, globalOffset);
    startBounds.offset(-globalOffset.x, -globalOffset.y);
    finalBounds.offset(-globalOffset.x, -globalOffset.y);
    //Log.i("-globalOffset.x, -globalOffset.y", -globalOffset.x + "" + -globalOffset.y);

    // Adjust the start bounds to be the same aspect ratio as the final
    // bounds using the "center crop" technique. This prevents undesirable
    // stretching during the animation. Also calculate the start scaling
    // factor (the end scaling factor is always 1.0).
    float startScale;
    //Log.i("(float) finalBounds.width() / finalBounds.height()", (float) finalBounds.width() / finalBounds.height() + "");
    //Log.i("(float) startBounds.width() / startBounds.height()", (float) startBounds.width() / startBounds.height() + "");
    if ((float) finalBounds.width() / finalBounds.height()
            > (float) startBounds.width() / startBounds.height()) {
        // Extend start bounds horizontally
        startScale = (float) startBounds.height() / finalBounds.height();
        //Log.i("startScale", startScale + "");
        float startWidth = startScale * finalBounds.width();
        //Log.i("startWidth", startWidth + "");
        float deltaWidth = (startWidth - startBounds.width()) / 2;
        //Log.i("deltaWidth", deltaWidth + "");
        startBounds.left -= deltaWidth;
        startBounds.right += deltaWidth;
    } else {
        // Extend start bounds vertically
        startScale = (float) startBounds.width() / finalBounds.width();
        //Log.i("startScale", startScale + "");
        float startHeight = startScale * finalBounds.height();
        //Log.i("startHeight", startHeight + "");
        float deltaHeight = (startHeight - startBounds.height()) / 2;
        //Log.i("deltaHeight", deltaHeight + "");
        startBounds.top -= deltaHeight;
        startBounds.bottom += deltaHeight;
    }

    // Hide the thumbnail and show the zoomed-in view. When the animation
    // begins, it will position the zoomed-in view in the place of the
    // thumbnail.
    thumbView.setAlpha(0f);
    expandedImageView.setVisibility(View.VISIBLE);

    // Set the pivot point for SCALE_X and SCALE_Y transformations
    // to the top-left corner of the zoomed-in view (the default
    // is the center of the view).
    expandedImageView.setPivotX(0f);
    expandedImageView.setPivotY(0f);

    // Construct and run the parallel animation of the four translation and
    // scale properties (X, Y, SCALE_X, and SCALE_Y).
    AnimatorSet set = new AnimatorSet();
    set
            .play(ObjectAnimator.ofFloat(expandedImageView, View.X,
                    startBounds.left, finalBounds.left))
            .with(ObjectAnimator.ofFloat(expandedImageView, View.Y,
                    startBounds.top, finalBounds.top))
            .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X,
            startScale, 1f)).with(ObjectAnimator.ofFloat(expandedImageView,
                    View.SCALE_Y, startScale, 1f));
    set.setDuration(mShortAnimationDuration);
    set.setInterpolator(new DecelerateInterpolator());
    set.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            currentAnimator = null;
        }

        @Override
        public void onAnimationCancel(Animator animation) {
            currentAnimator = null;
        }
    });
    set.start();
    currentAnimator = set;

    // Upon clicking the zoomed-in image, it should zoom back down
    // to the original bounds and show the thumbnail instead of
    // the expanded image.
    final float startScaleFinal = startScale;
    expandedImageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (currentAnimator != null) {
                currentAnimator.cancel();
            }

            // Animate the four positioning/sizing properties in parallel,
            // back to their original values.
            AnimatorSet set = new AnimatorSet();
            //Log.i("startBounds.left, startBounds.top", startBounds.left + ", " + startBounds.top);
            set.play(ObjectAnimator
                        .ofFloat(expandedImageView, View.X, startBounds.left))
                        .with(ObjectAnimator
                                .ofFloat(expandedImageView, 
                                        View.Y,startBounds.top))
                        .with(ObjectAnimator
                                .ofFloat(expandedImageView, 
                                        View.SCALE_X, startScaleFinal))
                        .with(ObjectAnimator
                                .ofFloat(expandedImageView, 
                                        View.SCALE_Y, startScaleFinal));
            set.setDuration(mShortAnimationDuration);
            set.setInterpolator(new DecelerateInterpolator());
            set.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    thumbView.setAlpha(1f);
                    expandedImageView.setVisibility(View.GONE);
                    currentAnimator = null;
                }

                @Override
                public void onAnimationCancel(Animator animation) {
                    thumbView.setAlpha(1f);
                    expandedImageView.setVisibility(View.GONE);
                    currentAnimator = null;
                }
            });
            set.start();
            currentAnimator = set;
        }
    });
}

在我的xml中:

<com.polites.android.GestureImageView
    android:id="@+id/expanded_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone"
    gesture-image:max-scale="10.0"
    gesture-image:min-scale="0.1"
    gesture-image:strict="false" />

我尝试使用上面的java代码,但它没有按预期工作,即当单击缩放视图隐藏自身时,缩略图仍然会向左移动。

当点击GestureImageView(缩放视图)隐藏自己时,我希望缩略图保留在原始位置。 在动画结束时,缩略图向上和向左移动。如何避免这种情况?

1 个答案:

答案 0 :(得分:0)

我最终也使用GestureImageView进行缩略图视图,所以我使用了2个GestureImageViews来缩略图和其他用于缩放视图。这会阻止缩略图视图在单击缩放视图以隐藏自身时移动。