LinearGradient Center Animation

Question

Ich möchte das Zentrum eines linearen Farbverlaufs animieren, so dass am Anfang das gesamte Zeichenfeld color1 und am Ende das gesamte Zeichenfeld color2 und dazwischen das Zentrum des Farbverlaufs von links nach rechts verschoben wird.

Das Problem ist, dass setGradientCenter keinen Unterschied macht. Nach dieser Antwort https://stackoverflow.com/a/14383974/1395697 gibt es ein Problem mit setGradientCenter(), aber die Lösung in dieser Antwort funktioniert nicht für mich, weil ich den Farbverlauf in onTouch() ändern, wenn der Benutzer seinen Finger über die Ansicht streicht, so muss es wirklich sein schnell.

Gibt es eine Möglichkeit, dies zu tun?

Ich möchte so etwas tun (alle Touch-Zeug funktioniert gut, aber nicht das animierte Gradient):

Answer 1

Was fragen Sie kein reines linearen Gradienten ist - ein linearer Gradient zwischen Zwei Farben auf einer festen Breite haben nur eine mathematische Funktion, die sie definiert. Deshalb können Sie die Mitte nicht ändern. Was ich denke, dass Sie suchen, ist eine feste Farbe Anfang und Ende und eine lineare Farbverlaufsfläche zwischen ihnen.

diese Lösung Versuchen:

sf = new ShapeDrawable.ShaderFactory() { 
    @Override 
    public Shader resize(int width, int height) { 
     LinearGradient lg = new LinearGradient(0, 0, view.getWidth(), 0, new int[] {Color.WHITE, Color.BLACK}, //substitute the correct colors for these 
       new float[] {center - 0.3f, center + 0.3f}, Shader.TileMode.REPEAT); 
     return lg; 
    } 
    }; 
    p = new PaintDrawable(); 
    rectShape = new RectShape(); 
    p.setShape(rectShape); 
    p.setShaderFactory(sf); 
    view.setBackgroundDrawable((Drawable) p); 
    view.setOnTouchListener(new View.OnTouchListener() { 

    @Override 
    public boolean onTouch(View v, MotionEvent event) { 
     center = event.getX()/view.getWidth(); // calculate the center 
     p.setShape(rectShape); // this makes the shader recreate the lineargradient 
     return true; 
    } 
    }); 

Dieser Code schnell genug reagiert scheint zu berühren, aber mehrere Instanzen von LinearGradient schafft.

Answer 2

Sie können so etwas mit einer Suchleiste tun.

Sie müssen ein benutzerdefiniertes progressDrawable-Attribut festlegen und den Positionsmarker (Daumen) in etwa entfernen.

<SeekBar 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:progressDrawable="@drawable/gradient_progress" 
    android:thumb="@null"/> 

gradient_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:id="@android:id/background" 
      android:drawable="@drawable/right_colour" /> 
    <item android:id="@android:id/secondaryProgress"> 
     <scale android:scaleWidth="100%" 
       android:drawable="@drawable/left_colour" /> 
    </item> 
    <item android:id="@android:id/progress"> 
     <scale android:scaleWidth="100%" 
       android:drawable="@drawable/left_colour" /> 
    </item> 
</layer-list> 

wo right_colour eine ziehbare oder Farb Ressource von der rechten Farbe (blau) und der left_colour ist ein 9-Patch drawable der linken Farbe (grün) zu transparent übergehen, so dass nur die linke Kante gedehnt wird. Mine sieht wie folgt aus

(Es ist weiß bis transparent, so hart Verblassen hier zu sehen)

Diese eine Lösung gibt, die schnell und erfordert keine Berührungs Codierung auf Ihrer Seite, aber es hat einen Nachteil , es geht nicht ganz bis zum fernen Ende, so dass der 'linear gradient' Teil des Bildes immer noch sichtbar ist, selbst wenn der Benutzer den ganzen Weg über gegangen ist. Wenn das kein großes Problem ist, dann wird das gut funktionieren.