Раскраска TextView в течение определенного периода времени Android

Question

Есть ли способ закрасить текст в TextView или что-то еще в Android в течение определенного периода времени. Таким образом, он будет начинаться с полностью белого текста, а затем coloring будет перемещаться слева направо и заполняться им в течение определенного duration.
Так, например, если duration будет 10, тогда вся линия должна быть цветной за 10 секунд, но она также должна двигаться с тем же темпом.

Что бы выглядеть примерно так:

Есть способ сделать это на IOS с CATextLayer, но я еще не нашел способ сделать это на Android.

Answer 1

Вы можете использовать текстовый Spanable и Цвет переднего плана и анимировать по одному символу за раз

Answer 2

Я только что создал самоопределенный TextView в прошлом году, вот мой класс

public class AKChangeColorTextView extends TextView {
    public AKChangeColorTextView(Context context) {
        this(context,null);
    }
    String TAG = "AKChangeColorTextView";
    public AKChangeColorTextView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    RectF mRectF;
    float mX;
    float mY;
    public AKChangeColorTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLUE);
        PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
        mPaint.setXfermode(mode);
        float x = 60;
        float y = 10;
        mY =    0;
        mRectF = new RectF(x, y, x + 50, y + 50);
        mTPaint = getPaint();
        mX = 0;
    }

    Paint mPaint;
    TextPaint mTPaint;
    Bitmap shadowBitmap ;
    Rect bounds = new Rect();
    Canvas textCanvas;

    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        if (shadowBitmap == null) {
            shadowBitmap = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        }
        if (textCanvas == null) {
            textCanvas = new Canvas(shadowBitmap);
        }
        textCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
        if (mTPaint == null) {
            mTPaint = getPaint();
        }
        String content  = getText().toString();
        mTPaint.getTextBounds(content,0,content.length(),bounds);
        textCanvas.drawText(content,0,bounds.height(),mTPaint);
        mRectF.set(colorLeft,mY,colorRight,mY+bounds.height()+10);
        textCanvas.drawRect(mRectF,mPaint);
        canvas.drawBitmap(shadowBitmap,0,0,null);
    }
    float colorLeft;
    float colorRight;
    public void setXOffset(float left,float right){
        colorLeft = left;
        colorRight = right;
        invalidate();
    }

}

мой демонстрационный код:

class MainActivity : AppCompatActivity() {
    val TAG = "MainActivity"
    lateinit var countDownTimer:CountDownTimer
    var currentOffsetx = 0
    var textWidth = 0
    var isIncrease = true
    lateinit var txt:AKChangeColorTextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)
        (findViewById<View>(R.id.tv_hello) as AKChangeColorTextView).apply{
            txt = this
        }

        countDownTimer = object:CountDownTimer(300000,200){
            override fun onFinish() {
            }

            override fun onTick(millisUntilFinished: Long) {
                if (textWidth == 0) {
                    textWidth = txt.width
                }
                if (currentOffsetx <= textWidth) {
                    if (isIncrease) {
                        currentOffsetx += 10
                        currentOffsetx = min(currentOffsetx, textWidth)
                    } else {
                        currentOffsetx -= 10
                        currentOffsetx = max(currentOffsetx, 0)
                    }
                }
                if (currentOffsetx == textWidth) {
                    isIncrease = false
                }else if (currentOffsetx == 0) {
                    isIncrease = true
                }
                txt.setXOffset(0f,currentOffsetx.toFloat())
                Log.w(TAG,"check current tick:$millisUntilFinished,offsetx:$currentOffsetx,txtWidth:$textWidth")
            }
        }
        countDownTimer.start()
    }

}

мой макет xml:

<com.example.administrator.myapplication.AKChangeColorTextView
            android:id="@+id/tv_hello"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="I Found a Love For Aolphn"
            android:textColor="#000000"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

Следующий эффект

Answer 3

Существует способ сделать это оптимизированным, простым, плавным и красивым: Векторные анимационные рисунки (API21 +) .

Есть много учебных пособий (например, это видео), которые показывают, как вы можете создавать красивые анимации. В основном шаги следующие:

• создайте два SVG векторных изображения вашего текста, одно с нормальным цветом, другое с цветные буквы. Вы можете легко сделать это, например, в Adobe Illustrator.

• Импорт обоих в shapehifter.design .

• Создайте анимацию для второго (цветного слоя) по своему вкусу.

• Скопируйте полученный xml-файл в свои чертежи, и все готово!

Удачи!