在Android中以动画方式将ImageView移动到不同的位置

Move an ImageView to different position in Animated way in Android

提问by Kushal

I have several ImageViews in a RelativeLayout. now, when user taps any of the ImageView, I want it to be moved to a specified location with subtle animation.

我ImageView在 a 中有几个s RelativeLayout。现在，当用户点击任何 ImageView 时，我希望它以微妙的动画移动到指定的位置。

Eg; I have initially set margins for LayoutParamsassociated with an ImageViewas layoutparams1.setMargins(90,70,0,0);and then have it added to the layout.

例如; 我最初设置了LayoutParams与ImageViewas关联的边距layoutparams1.setMargins(90,70,0,0);，然后将其添加到布局中。

and when imageview is tapped, I'd like its new location to be 200,200, with animation.

当点击 imageview 时，我希望它的新位置是200,200，带有动画。

So, is it possible? if yes, then how?

那么，有可能吗？如果是，那么如何？

Note that I have both RelativeLayoutand all of its child ImageViews created programmatically.

请注意，我以编程方式创建RelativeLayout了它的所有子项ImageView。

And I'm new to android development so an elaborative answer is expected.

而且我是 android 开发的新手，因此预计会有详细的答案。

回答by D-32

TranslateAnimation animation = new TranslateAnimation(0, 50, 0, 100);
animation.setDuration(1000);
animation.setFillAfter(false);
animation.setAnimationListener(new MyAnimationListener());

imageView.startAnimation(animation);

UPDATE :The problem is that the Viewis actually still in it's old position. So we have to move it when the animation is finished. To detect when the animation is finished we have to create our own animationListener(inside our activityclass):

更新：问题是View实际上仍然处于旧位置。所以我们必须在动画完成时移动它。要检测动画何时完成，我们必须创建自己的animationListener（在我们的activity类中）：

private class MyAnimationListener implements AnimationListener{

    @Override
    public void onAnimationEnd(Animation animation) {
        imageView.clearAnimation();
        LayoutParams lp = new LayoutParams(imageView.getWidth(), imageView.getHeight());
        lp.setMargins(50, 100, 0, 0);
        imageView.setLayoutParams(lp);
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
    }

    @Override
    public void onAnimationStart(Animation animation) {
    }

}

So the onClickEventwill get fired again at it's new place. The animation will now move it even more down, so you might want to save the xand yin a variable, so that in the onAnimationEnd()you move it not to a fix location.

所以它onClickEvent会在它的新地方再次被解雇。动画现在会将其向下移动得更多，因此您可能希望将x和保存y在变量中，以便在 中onAnimationEnd()不将其移动到固定位置。

回答by ArMo 372

also is better that use ObjectAnimator. this move view in new position. for example :

也更好用ObjectAnimator。此移动视图处于新位置。例如 ：

ImageView splash ;
@Override
public boolean onTouchEvent(MotionEvent event) {
    float tx = event.getX();
    float ty = event.getY();

    int action = event.getAction();
    switch(action) {
        case MotionEvent.ACTION_DOWN:
            tx = event.getX();
            ty = event.getY();

            //       findViewById(R.id.character).setX(tx-45);
            //      findViewById(R.id.character).setY(ty-134);

            ObjectAnimator animX = ObjectAnimator.ofFloat(splash, "x", tx-45);
            ObjectAnimator animY = ObjectAnimator.ofFloat(splash, "y", ty-134);
            AnimatorSet animSetXY = new AnimatorSet();
            animSetXY.playTogether(animX, animY);
            animSetXY.start();

            break;
        default:
    }
    return true;
}

回答by duggu

In below code I am adding a image view in center on frame layout dynamically. After add I am increase scaling and set alpha to give zoom effect and after complete animation I am just translate my image view one position to another position.

在下面的代码中，我在框架布局的中心动态添加了一个图像视图。添加后，我增加缩放比例并设置 alpha 以提供缩放效果，完成动画后，我只是将图像视图从一个位置转换到另一个位置。

Add image view on framelayout

在框架布局上添加图像视图

    imgHeart = new ImageView(getBaseContext());
    imgHeart.setId(R.id.heartImage);
    imgHeart.setImageResource(R.drawable.material_heart_fill_icon);
    imgHeart.setLayoutParams(new FrameLayout.LayoutParams(50, 50, Gravity.CENTER));
    mainFrameLaout.addView(imgHeart);

Add animation on image view

在图像视图上添加动画

       imgHeart.animate()
            .scaleXBy(6)
            .scaleYBy(6)
            .setDuration(700)
            .alpha(2)
            .setListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    imgHeart.animate()
                            .scaleXBy(-6f).scaleYBy(-6f)
                            .alpha(.1f)
                            .translationX((heigthAndWidth[0] / 2) - minusWidth)
                            .translationY(-((heigthAndWidth[1] / 2) - minusHeight))
                            .setDuration(1000)
                            .setListener(new Animator.AnimatorListener() {
                                @Override
                                public void onAnimationStart(Animator animation) {
                                }

                                @Override
                                public void onAnimationEnd(Animator animation) {
                                // remove image view from framlayout
                                }
                                @Override
                                public void onAnimationCancel(Animator animation) {
                                }

                                @Override
                                public void onAnimationRepeat(Animator animation) {
                                }
                            }).start();
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            }).start();