Как правильно анимировать вид из одной координаты в другую?

Question

Я бы хотел сделать следующее. У меня есть набор кнопок, на которых есть значки. Когда пользователь нажимает один, я хотел бы ввести новый вид, который начинается с той же координаты, что и значок, который коснулся, и затем этот новый вид переместится в какое-то другое место на экране, и по прибытии он будет удален.

Я знаю, как создать новое представление и добавить / удалить его в родительский RelativeLayout (не должен ли он быть RelativeLayout?) И все такое. Я не совсем понимаю, как получить абсолютные координаты нажатой кнопки (поскольку это только один элемент внутри родительского макета, внутри другого родительского макета), а затем установить его координаты и применить анимацию, а затем что уведомить меня, что он прибыл туда, куда собирался, чтобы я мог его убрать?

Не могу найти пример того, как это сделать, так что надеюсь, что кто-то может указать мне правильное направление.

Answer 1

Итак, получается, что это намного проще, чем я себе представлял.

Я создал полноэкранный RelativeLayout, который я показываю только во время анимации.

Я получаю начальную позицию моей скрытой кнопки, как это (забавно видеть эти механизмы кодирования в стиле C вЯва, они довольно редки в наши дни:

int fromLoc[] = new int[2];
v.getLocationOnScreen(fromLoc);     
float startX = fromLoc[0];
float startY = fromLoc[1];

Итак, теперь у меня есть моя начальная точка.

Моя конечная точка - это абсолютная координата на экране, которую вы можете назначить, однакоВы хотите

Затем я создаю небольшой вспомогательный класс Animations, который позволяет мне передавать все координаты, обратный вызов и продолжительность анимации

    public class Animations {
public Animation fromAtoB(float fromX, float fromY, float toX, float toY, AnimationListener l, int speed){


        Animation fromAtoB = new TranslateAnimation(
                Animation.ABSOLUTE, //from xType
                fromX, 
                Animation.ABSOLUTE, //to xType
                toX, 
                Animation.ABSOLUTE, //from yType 
                fromY, 
                Animation.ABSOLUTE, //to yType 
                toY
                 );

        fromAtoB.setDuration(speed);
        fromAtoB.setInterpolator(new AnticipateOvershootInterpolator(1.0f));


        if(l != null)
            fromAtoB.setAnimationListener(l);               
                return fromAtoB;
    }
}

, и нам нужен слушатель, чтобымы знаем, когда закончится анимация, чтобы очистить ее

 AnimationListener animL = new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {     
        }

        @Override
        public void onAnimationRepeat(Animation animation) {        
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            //this is just a method to delete the ImageView and hide the animation Layout until we need it again.
            clearAnimation();       
        }
    };

И, наконец, мы бросаем все это вместе и нажимаем GO

int fromLoc[] = new int[2];
    v.getLocationOnScreen(fromLoc);     
    float startX = fromLoc[0];
    float startY = fromLoc[1];      
    RelativeLayout rl = ((RelativeLayout)findViewById(R.id.sticker_animation_layout));
    ImageView sticker = new ImageView(this);

    int stickerId = getStickerIdFromButton(v);
    if(stickerId == 0){
        stickerAnimationPlaying = false;
        return;         
    }

    float destX = 200.0f;//arbitrary place on screen
    float destY = 200.0f;//arbitrary place on screen

    sticker.setBackgroundResource(stickerId);
    sticker.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

    rl.addView(sticker);
    Animations anim = new Animations();
    Animation a = anim.fromAtoB(startX, startY, destX, destY, animL,750);
    sticker.setAnimation(a);
    a.startNow();

Answer 2

Я просто добавляю свой вид на центральную позицию на макете кадра и переводю мой вид на оси X и Y Попробуйте следующий код: -

Добавление вида изображения на структуру кадра

    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 3

Вы можете использовать анимацию перехода Android для перемещения вида по макету.Посмотрите на приведенную ниже ссылку, чтобы получить некоторые идеи по анимации видов внутри макета.

https://github.com/lgvalle/Material-Animations