15

I have a TextView and some text in it. I need to create an animation with 30 seconds duration, and it will slowly change the color of text from green to red. Any ideas?

2

4 Answers 4

26

1) 30s is a really, really long time, hardly any users would wait to see the end of it.

2) See Animating with ObjectAnimator. Something like ObjectAnimator.ofInt(textView, "textColor", Color.GREEN, Color.RED) should do what you want. Note, however, that the transition will be linear and will go through a lot of intermediary colors. until it hits #FF0000. You can of course specify the points in the middle but in general linear color transitions (in RGB) are not pretty.

1
  • 2
    Use anim.setEvaluator(new ArgbEvaluator()) to avoid the blinking.
    – Adrian
    Feb 5, 2016 at 12:13
3

Delyan's solution works, but as he pointed out, the color transition is not smooth. The following code should give you a smooth color transition:

    public static void changeTextColor(final TextView textView, int startColor, int endColor,
                                   final long animDuration, final long animUnit){
    if (textView == null) return;

    final int startRed = Color.red(startColor);
    final int startBlue = Color.blue(startColor);
    final int startGreen = Color.green(startColor);

    final int endRed = Color.red(endColor);
    final int endBlue = Color.blue(endColor);
    final int endGreen = Color.green(endColor);

    new CountDownTimer(animDuration, animUnit){
        //animDuration is the time in ms over which to run the animation
        //animUnit is the time unit in ms, update color after each animUnit

        @Override
        public void onTick(long l) {
            int red = (int) (endRed + (l * (startRed - endRed) / animDuration));
            int blue = (int) (endBlue + (l * (startBlue - endBlue) / animDuration));
            int green = (int) (endGreen + (l * (startGreen - endGreen) / animDuration));

            Log.d("Changing color", "Changing color to RGB" + red + ", " + green + ", " + blue);
            textView.setTextColor(Color.rgb(red, green, blue));
        }

        @Override
        public void onFinish() {
            textView.setTextColor(Color.rgb(endRed, endGreen, endBlue));
        }
    }.start();
}
2

As metioned above, use

setEvaluator(new ArgbEvaluator());

to eliminate the blinking. The following will fade the textview "tv" from green to red every 30,000 ms without any nervous blinking:

public void animateIt(){
    ObjectAnimator a = ObjectAnimator.ofInt(tv, "textColor", Color.GREEN, Color.RED);
    a.setInterpolator(new LinearInterpolator());
    a.setDuration(30000);
    a.setRepeatCount(ValueAnimator.INFINITE);
    a.setRepeatMode(ValueAnimator.REVERSE);
    a.setEvaluator(new ArgbEvaluator());
    AnimatorSet t = new AnimatorSet();
    t.play(a);
    t.start();
}
0

Maybe I can build on pollaris' answer. Instead of using

ObjectAnimator a = ObjectAnimator.ofInt(...)

You can instead use,

ObjectAnimator a = ObjectAnimator.ofArgb(...)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.