Wellenanimation in Android TextView

7

Ich verwende den folgenden Code, um meine TextView in meiner onCreate() Methode zu animieren:

%Vor%

Nun wollte ich fragen, ob es irgendwie möglich ist, diese slide_in_left Animation wie eine Welle hereinzukommen?

Ich habe dieses Beispiel hier gefunden, aber ich weiß nicht, wie ich es in meinem Fall verwenden soll (von links nach rechts und auf TextView nicht auf GridView ): Ссылка

Danke für jede Hilfe

    
user754730 06.01.2014, 20:48
quelle

2 Antworten

9

Ein Weg, um den Effekt zu erzielen, den Sie anstreben (ich bin mir nie sicher, ob ich SO verstanden habe ...), ist die Verwendung von drei nützlichen Android-Elementen:

  1. Eine benutzerdefinierte Ansicht, die onDraw überschreibt
  2. Ein Path wird nach dem Messen oder später erstellt und erzeugt eine wellenartige Form auf dem Bildschirm ( Dokumentation )
  3. Um Canvas drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint) zu verwenden ( docs ) erhöht hOffset bei jedem Zeichenzug, wenn in den Animationsmodus gewechselt wird.

Für zukünftige Leser, die mit benutzerdefinierten Ansichten in Android nicht vertraut sind, ist hier die Entwicklerressource .

Die API für unsere Ansicht könnte Folgendes enthalten:

  1. setText(...) natürlich
  2. resetTextPosition() , um die eingehende Animation zurückzusetzen
  3. animateToRight(double millis duration) zum Starten der Animation und mit einer Zeit.

Es ist auch sehr wichtig, dass unsere Klasse mit LayoutParams wie Pixelhöhe, WRAP_CONTENT und MATCH_PARENT arbeitet. Nun, das ist schwierig, weil es auf eine Art und Weise zu tun ist, die nicht wirklich schlecht ist. Also, (oberer Tipp), wir fahren einfach damit fort, dass Layout Params die gewünschte Breite und Höhe des Textes für den Entwickler angibt, und dann führen wir eine neue Bedeutung für topPadding und bottomPadding von setPadding für die Ansicht ein:

  1. setPadding(int ...) : Die Argumente topPadding und bottomPadding legen den Raum fest, der zusätzlich für die Welle verwendet wird .

Hier ist ein kompilierbarer Code:

%Vor%

Erklärung

  • Wir verwenden enum , um die Ansicht in drei Zustände zu setzen. TRANSITION_STARTING setzt Anfangsvariablen und teilt die Ansicht mit Wechseln Sie in den TRANSITION_RUNNING -Zustand. Dieser Zustand ständig invalidates() (ruft onDraw über die UI-Nachrichtenwarteschlange erneut auf) Der Zustand der Ansicht wird also wieder mit neuen Parametern gezeichnet. Sie werden dieses Muster in der internen Ansicht und der Widget-Code-Basis von Android ständig sehen.

  • pxWLength ist ein veränderbarer Parameter, der die Wellenlänge der Welle darstellt.

  • canvas.drawTextOnPath(getText().toString(), wavePath, leftOffset, (getHeight()-(getPaddingTop()+getPaddingBottom()))/4, getPaint()); Wir müssen den horizontalen Versatz eines Pfades ändern, weil (ein anderer oberer Tipp ) Android Text oberhalb des Pfades zeichnet - andernfalls Text würde in den Trögen deiner Welle zerquetscht werden.

Eine gute Möglichkeit, dies zu nennen, wäre dann:

%Vor%

und dann, um es Höhe WRAP_CONTENT Breite schön und lang zu Ihrer Aktivität hinzufügen (oder verwenden Sie eine XML).

Das wird etwas Feinabstimmung brauchen! Ich hoffe, dass das funktioniert oder zumindest einige der Ideen dich dazu inspirieren, deine eigenen funky Textanimationskurse zu erstellen!

    
Tom 09.01.2014, 14:44
quelle
11

Probieren Sie es mit Tweening -Techniken (wie der zeitnahen App) aus!

Sie sollten benutzerdefinierte Klasse wie folgt machen:

%Vor%

Hinweis: Sie müssen es möglicherweise an eine beliebige Ansicht anpassen (dies können Zahlen, Texte oder eine benutzerdefinierte Ansicht sein), da es sich um eine Numbers-Animation handelt!

  

Die Zahlen stammen nicht direkt von einer Schriftart, die als TextView gezeichnet wurde.   stattdessen als mehrere Segmente konstruiert

Wenn Sie die Android View-Hierarchie vergessen haben:

Danksagungen: Srirramamani , Gist , Git

    
LOG_TAG 15.01.2014 05:37
quelle