Android - 如何使用Google表單等動畫更改EditText線條顏色？

Question

我試圖實現類似動畫谷歌形式顯示在下面的GIF：

的EditText的底線應該改變顏色與填充動畫從中心開始。 這可能很容易，但我是Android的新手，我沒有找到任何此問題的在線資源。任何人都可以給我一些提示，或者提供一些關於如何做到這一點的教程的鏈接？

Answer 1

請參閱此blog。該博客爲您想要實現的完全相同的動畫實現解決方法。你可以通過你的的EditText的背景設置爲#00000000和使用兩個查看在的FrameLayout實現這一目標（一個在另一個上面，最上面的一個處於第一不可見）的EditText上的底線。當EditText獲得焦點時，您可以使查看（頂部一個）可見，並將比例動畫添加到查看以實現類似的效果。

Answer 2

我做了一件看起來像，我會把它你的TextView下：

package com.example.trist_000.teststack; 

import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.util.AttributeSet; 
import android.view.View; 
import android.view.animation.Animation; 
import android.view.animation.Transformation; 

public class customm extends View { 



private class myanim extends Animation{ 

    public myanim(){ 
     this.setRepeatMode(INFINITE); 
     this.setRepeatCount(INFINITE); 
     this.setDuration(2000); 
    } 

    @Override 
    protected void applyTransformation(float interpolatedTime, Transformation t) { 
     super.applyTransformation(interpolatedTime, t); 

     time =(getWidth()/2)*interpolatedTime; 
     postInvalidate(); 
    } 
} 

public customm(Context context) { 
    super(context); 
} 

public customm(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    myanim anim = new myanim(); 
    this.startAnimation(anim); 

} 

Paint paint = new Paint(); 
float time = 0; 

@Override 
public void onDraw(Canvas canvas){ 

    paint.setStyle(Paint.Style.STROKE); 
    paint.setStrokeWidth(4); 

    paint.setAntiAlias(true); 

    paint.setColor(Color.BLACK); 
    paint.setStrokeWidth(1); 
    canvas.drawLine(0, getHeight()/2, getWidth(), getHeight()/2, paint); 
    paint.setStrokeWidth(2); 
    paint.setColor(Color.RED); 
    canvas.drawLine(getWidth()/2, getHeight()/2, (getWidth()/2)-time, getHeight()/2, paint); 
    canvas.drawLine(getWidth()/2,getHeight()/2, (getWidth()/2) +time, getHeight()/2, paint); 
    super.onDraw(canvas); 
} 
} 

在XML文件中：

<com.example.trist_000.teststack.customm 
    android:layout_width="300dp" 
    android:layout_height="5dp" /> 

你必須提高那麼一點點）。

Answer 3

我認爲谷歌與ViewAnimationUtils.createCircularReveal。

這是我如何實現這種效果（注意它是API 21及以上）

另外請注意，我用的接觸點爲更好的UX

所以我們要如下： selector_line_bellow.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 

    <item android:state_enabled="true" 
      android:state_focused="true"> 
     <layer-list> 
      <item android:bottom="-25dp"> 
       <shape android:shape="line"> 
        <solid android:color="@android:color/transparent"/> 
        <stroke 
         android:width="3dp" 
         android:color="#017ba7"/> 
       </shape> 
      </item> 

     </layer-list> 
    </item> 

    <!-- default--> 
    <item > 
     <layer-list> 
      <item android:bottom="-25dp"> 
       <shape android:shape="line"> 
        <solid android:color="@android:color/transparent"/> 
        <stroke 
         android:width="3dp" 
         android:color="#11017ba7"/> 
       </shape> 
      </item> 
     </layer-list> 

    </item> 
</selector> 

我們EditText將這個樣子

<EditText 
       android:id="@+id/editText" 
       android:layout_width="match_parent" 
       android:background="@drawable/selector_line_bellow" 
       android:layout_margin="@dimen/margin_big" 
       android:paddingTop="10dp" 
       android:paddingBottom="10dp" 
       android:paddingLeft="3dp" 
       android:paddingRight="3dp" 
       android:layout_height="wrap_content"/> 

和最後的接觸是在活動課或其它地方這EditText將用於補充這段代碼

editText.setOnTouchListener(new View.OnTouchListener() { 
     @Override 
     public boolean onTouch(View v, MotionEvent event) { 
      if(event.getAction()==MotionEvent.ACTION_DOWN) { 
       ViewAnimationUtils.createCircularReveal(editText, 
         (int) event.getX(), 
         (int) event.getY(), 
         0, 
         editText.getHeight() * 2).start(); 
      } 
      return false; 
     } 
    });