在TextView上重复上浮动画

Question

I have a Button that can be pressed an infinite number of times. When pressed, I show a +1 above the Button and then use an Animation to Float the TextView up and disappear. This all works good. My problem happens when a user repeatedly taps the Button . If the Animation is still in progress and floating up, the TextView 's position will reset and the Animation will restart.

How can I continuously allow the Animation to finish while starting another Animation on the same TextView ? I guess my best example of what I want would be a game where you collect coins and each time one is collected you see a +1 float up above a character.

float_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1500"
        android:fromYDelta="90%"
        android:toYDelta="0" />

    <alpha
        android:duration="1500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

MainActivity.Class

public class MainActivity extends AppCompatActivity  {

private long voteMultiplier = 1;
private TextView txtNoNumber;
private Animation fadeInAnimation;
private Button buttonNo;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.float_up);

    buttonNo = (Button) findViewById(R.id.button_no);

    buttonNo.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            voteNo();

        }
    });
}

private void voteNo() {
    txtNoNumber.setText(String.format("%s%s", "+ ", voteMultiplier));
    txtNoNumber.setTextColor(getResources().getColor(R.color.text_color_add));
    txtNoNumber.startAnimation(fadeInAnimation);

 }
}

My Button and TextView are defined in my activity_main.xml . There is nothing special about them.

Thank you.

Answer 1

This following works but I can't say that it is really the best way. I think the Canvas and SurfaceView suggestion would be more robust.

The issue that you are having is that the animation occurs on the view and there is only one view that is moved during animation. That is why it resets and you can only see one rising number at a time. The following solution creates a stack of gone views that sit on top of the underlying view that shows. The IDs for these views are kept in an array that is cycled through. When the button is clicked, the next gone view is made visible and animated. At the end of the animation, the view is made gone again.

Here is a little video of the effect:

Demo video

I have exaggerated the movement to show better in the video.

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private long voteMultiplier = 1;
    private int[] txtNoNumber = new int[5];
    private Button buttonNo;
    private int animIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        buttonNo = (Button) findViewById(R.id.button_no);
        txtNoNumber[0] = R.id.txtNoNumber1;
        txtNoNumber[1] = R.id.txtNoNumber2;
        txtNoNumber[2] = R.id.txtNoNumber3;
        txtNoNumber[3] = R.id.txtNoNumber4;
        txtNoNumber[4] = R.id.txtNoNumber5;

        buttonNo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                voteNo();

            }
        });
    }

    private void voteNo() {
        TextView tv;
        Animation fadeInAnimation;

        if (animIndex >= txtNoNumber.length) {
            animIndex = 0;
        }
        tv = (TextView) findViewById(txtNoNumber[animIndex]);
        tv.setVisibility(View.VISIBLE);
        tv.setText(String.format("%s%s", "+ ", voteMultiplier++));
//        txtNoNumber.setTextColor(getResources().getColor(R.color.text_color_add));
        fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.float_up);
        fadeInAnimation.setAnimationListener(new MyAnimationListener(tv));
        tv.startAnimation(fadeInAnimation);
        animIndex++;
    }

    private class MyAnimationListener implements Animation.AnimationListener {
        View mView;

        MyAnimationListener(View view) {
            mView = view;
        }

        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            mView.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.floatanimation.MainActivity">

    <TextView
        android:id="@+id/txtNoNumber1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.319" />

    <TextView
        android:id="@+id/txtNoNumber2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.319" />

    <TextView
        android:id="@+id/txtNoNumber3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.319" />

    <TextView
        android:id="@+id/txtNoNumber4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.319" />

    <TextView
        android:id="@+id/txtNoNumber5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.319" />

    <Button
        android:id="@+id/button_no"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

</android.support.constraint.ConstraintLayout>

Answer 2

1. Add AnimationListener to your animation fadeInAnimation .

2. Add an extra variable voteCount to count the button click.

3. In onClick() method, call voteNo() method only for first time to start animation and for others handle it from onAnimationEnd() method.

3. Inside onAnimationEnd() method, check the value of voteCount . If value is greater than 0 then call voteNo() method to start animation again.

Here is the working code:

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements Animation.AnimationListener{

    private long voteMultiplier = 1;
    private TextView txtNoNumber;
    private Animation fadeInAnimation;
    private Button buttonNo;

    int voteCount  = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.float_up);
        fadeInAnimation.setAnimationListener(this);

        txtNoNumber = (TextView) findViewById(R.id.text_no_number);
        buttonNo = (Button) findViewById(R.id.button_no);

        buttonNo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                voteCount++;

                if (voteCount == 1)
                    voteNo();
            }
        });
    }

    private void voteNo() {
        txtNoNumber.setText(String.format("%s%s", "+ ", voteMultiplier));
        txtNoNumber.setTextColor(Color.GREEN);
        txtNoNumber.startAnimation(fadeInAnimation);
    }

    @Override
    public void onAnimationStart(Animation animation) {

    }

    @Override
    public void onAnimationEnd(Animation animation) {

        if (animation == fadeInAnimation) {
            voteCount--;

            if (voteCount > 0)
                voteNo();
        }
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
}

Hope this will help~