How to implement Custom listview text animation

问题

I am creating shopping application in android. In my app, I show list of items from custom list view.

If customer select an item, Selected item text moves from listview into shopping cart image. Like below image,

This type of animation is my requirement.

But my animated view stopped at end of custom row.. like this image.

My animation.xml code,

<?xml version="1.0" encoding="utf-8"?>
 <set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true"
>

<translate
    android:fromYDelta="0%p"
    android:toYDelta="100%p"
    android:fromXDelta="0%p"
    android:toXDelta="100%p"
    android:duration="1000"

    />

<alpha
    android:duration="500"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="0.0" />

   <scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3500"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="0.0"
    android:toYScale="0.2" >
</scale>

</set>

Note: If anybody want more code I post later.. because already this qtn take more length..

My question,

My animated textview cannot exceeds bound of custom row.

so How to move custom row textview into end of the image(Shopping cart image)?

回答1:

The goal is to animate the view from one location to another location so first we need to get the two points. You can do the following:

int[] screenLocation = new int[2];
textView.getLocationOnScreen(screenLocation);
int startX = screenLocation[0];
int startY = screenLocation[1];

int[] screenLocationB = new int[2];
cartView.getLocationOnScreen(screenLocationB);
int endX = screenLocationB[0];
int endY = screenLocationB[1];

Once you have both the starting location of the textview and the location you want it to end at (location of the cartview), we need to animate from one point two the next. We can do this by placing a NEW textview on either the window layer or a framelayout above your listview.

Here we add to the window layer:

WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
layoutParams.width = view.getMeasuredWidth();
layoutParams.height = view.getMeasuredHeight();
activity.addContentView(newTextView, layoutParams);

Next we set the starting position.

 newTextView.setTranslationX(startX);
 newTextView.setTranslationY(startY);

Finally we animate.

 newTextView.animate().setDuration(300)
       .translationX(endX).translationY(endX).start()

回答2:

Set android:clipChildren="false" on the TextView's parent view as well as any grandparent view that covers the range you want to animate inside.

回答3:

I believe this is what you are looking after. You can use something called View Overlay. What you require is similar to the first animation where the button is falling from its frame to bottom of the screen.

The summary is as below

    final Button button = (Button) findViewById(R.id.button);

    button.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // Our button is added to the parent of its parent, the most top-level layout
            final ViewGroup container = (ViewGroup) button.getParent().getParent();
            container.getOverlay().add(button);

            ObjectAnimator anim = ObjectAnimator.ofFloat(button, "translationY", container.getHeight());

           //You dont need rotation
            ObjectAnimator rotate = ObjectAnimator.ofFloat(button, "rotation", 0, 360);
            rotate.setRepeatCount(Animation.INFINITE);
            rotate.setRepeatMode(Animation.REVERSE);
            rotate.setDuration(350);

            /*
             * Button needs to be removed after animation ending
             * When we have added the view to the ViewOverlay, 
             * it was removed from its original parent.
             */
            anim.addListener(new AnimatorListener() {

                @Override
                public void onAnimationStart(Animator arg0) {
                }

                @Override
                public void onAnimationRepeat(Animator arg0) {
                }

                @Override
                public void onAnimationEnd(Animator arg0) {
                    container.getOverlay().remove(button);
                }

                @Override
                public void onAnimationCancel(Animator arg0) {
                    container.getOverlay().remove(button);
                }
            });

            anim.setDuration(2000);

            AnimatorSet set = new AnimatorSet();
            set.playTogether(anim, rotate);
            set.start();
        }
    });

In your case you need to identify the container properly. It should be the root view of activity. Also the button in the example is view you will be animating (Song name). Finally do the translation according to your requirement.

来源：https://stackoverflow.com/questions/28002961/how-to-implement-custom-listview-text-animation