在 Android 中使用動畫將 ImageView 移動到不同的位置

Question

我在 RelativeLayout 中有幾個 ImageView。

當用戶點擊任何 ImageView 時，我希望使用微妙的動畫將 ImageView 移動到指定位置。

例如; 我最初將與ImageView關聯的LayoutParams的邊距設置為layoutparams1.setMargins(90,70,0,0); 然后我將它添加到布局中。

當 ImageView 被點擊時，我希望它的新位置是200,200 ，完成動畫。

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

請注意，我以編程方式創建了 RelativeLayout 及其所有子 ImageView。

而且我是 Android 開發的新手，所以希望得到詳盡的答案。

Answer 1

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

imageView.startAnimation(animation);

更新：問題是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) {
    }

}

所以onClickEvent將在它的新位置再次被觸發。 動畫現在會將其向下移動得更多，因此您可能希望將x和y保存在變量中，以便在onAnimationEnd()其移動到固定位置。

Answer 2

最好使用ObjectAnimator ，它實際上將 ImageView 移動到新位置。
例如：

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;
}

Answer 3

你可以使用這個代碼

imageView.animate().x(80).y(212).setDuration(300);

要么

對於軟動畫，你可以使用這個庫

https://github.com/wirecube/android_additive_animations

Answer 4

在下面的代碼中，我在框架布局的中心動態添加了一個圖像視圖。 添加后我增加縮放比例並設置 alpha 以提供縮放效果，完成動畫后我只是將我的圖像視圖從一個位置轉換到另一個位置。

在框架布局上添加圖像視圖

    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);

在圖像視圖上添加動畫

       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();

Answer 5

你可以使用這段代碼:)

 private void animeView(View imageView){

        Handler handler = new Handler();
        final int[] deltaX = {50};
        final int[] deltaRotation = {45};
        handler.postDelayed(new Runnable() {
             @Override
             public void run() {
                 imageView.animate().translationX(deltaX[0])
                                    .rotation(deltaRotation[0]).setDuration(1000) ;
                 deltaX[0] *=-1 ;
                 deltaRotation[0] *=-1 ;
                 handler.postDelayed(this , 1000);
             }
         },1000);

    }