Using a ValueAnimator to make a TextView blink different colors

30,041

Solution 1

Try this:

private static final int RED = 0xffFF8080;
private static final int BLUE = 0xff8080FF;

ValueAnimator colorAnim = ObjectAnimator.ofInt(myTextView, "backgroundColor", RED, BLUE);
        colorAnim.setDuration(3000);
        colorAnim.setEvaluator(new ArgbEvaluator());
        colorAnim.setRepeatCount(ValueAnimator.INFINITE);
        colorAnim.setRepeatMode(ValueAnimator.REVERSE);
        colorAnim.start();

Or try this untested method via xml: *res/animator/property_animator.xml*

<set >

<objectAnimator
    android:propertyName="backgroundColor"
    android:duration="3000"
    android:valueFrom="#FFFF8080"
    android:valueTo="#FF8080FF"
    android:repeatCount="-1"
    android:repeatMode="reverse" />
</set>

now in Java code:

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
R.anim.property_animator);
set.setTarget(myTextView);
set.start();

Solution 2

Starting from API LEVEL > 21 the same effect can be made with static method ObjectAnimator.ofArgb like this:

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void animateText(TextView text) {
        ObjectAnimator animator = ObjectAnimator.ofArgb(text, "textColor", Color.WHITE, Color.RED);
        animator.setDuration(500);
        animator.setRepeatCount(3);
        animator.setRepeatMode(ValueAnimator.REVERSE);
        animator.start();
    }

Solution 3

The problem that you describe is that the object animator specified in XML is not correctly assigning the ArgbEvaluator for color interpolation.

To resolve the issue, create the object animator XML to tween between the colors as you desire. Then, in the source code, do the following ensuring that the evaluator used by the animator is an ArgbEvaluator:

ObjectAnimator colorAnimator = (ObjectAnimator)AnimatorInflater.loadAnimator(this, R.animator.color_rotation);
colorAnimator.setTarget(objectToFlash);
colorAnimator.setEvaluator(new ArgbEvaluator());
colorAnimator.start();
Share:
30,041
wheels53
Author by

wheels53

Updated on July 09, 2022

Comments

  • wheels53
    wheels53 over 1 year

    I want to use a ValueAnimator to make a TextView's text color blink twice between two different colors but I want to create the Animation in XML. I cannot find any examples. Any help will be appreciated.

    Update

    The code below works perfect. The color changes from black to blue, blue to black, black to blue, and blue to black with 500ms in between each reverse repeat. I'm however trying to get this to work from an animator xml file.

    ValueAnimator colorAnim = ObjectAnimator.OfInt(objectToFlash, "textColor", (int)fromColor, (int)toColor);
    colorAnim.SetDuration(500);
    colorAnim.SetEvaluator(new ArgbEvaluator());
    colorAnim.RepeatCount = 3;
    colorAnim.RepeatMode = ValueAnimatorRepeatMode.Reverse;
    

    xml

    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
            android:propertyName="textColor"        
            android:duration="500"
            android:valueFrom="@color/black"
            android:valueTo="@color/ei_blue"
            android:repeatCount="3"
            android:repeatMode="reverse" /> 
    

    Code

    ValueAnimator anim = (ObjectAnimator)AnimatorInflater.LoadAnimator(Activity, Resource.Animator.blinking_text);
    anim.SetTarget(objectToFlash);
    

    Using xml causes the color of the TextView's text color to change as many times as it can within 500ms.

    Update I think what I need are Keyframes to mimic in xml what the OfInt call is doing programmatically. Trying this now but no luck so far.