Android Implementierung von Datenladeeffekten wie Meituan, SF Express

Wir wissen alle, dass es in Android zwei gängige Animationstypen gibt: eine ist die Frame-Animation und die andere die Tween-Animation. Die Frame-Animation bietet eine Methode zum Abspielen von Bildern nach Bildern, das Abspielen vorbereiteter Bilder, ähnlich wie GIF-Bildern, als ob ein Film läuft. Die Tween-Animation kann Bewegungen, Vergrößerungen, Verkleinerungen und Übergänge von View-Komponenten realisieren.

Heute werden wir hauptsächlich die Dialogeffekte der Läuferanimation beim Laden von Daten in der App Meituan nachahmen. Ein interessanter Name wäre Running Man, lauf, Brüder! Reden wir nicht mehr, zeige ich Ihnen zunächst das Ergebnisbild, damit Sie sehen können, ob es das ist, was Sie erreichen möchten, und dann entscheiden Sie, ob Sie weiterlesen möchten, denn als Programmierer ist unser Zeit wertvoll, schließlich haben wir noch keine Freundin?

(ps: Due to technical reasons, the dynamic graphic effect provided is not very obvious, but it runs very well on the phone. Those who are interested can download the source code to take a look.)

Below I will explain the principle of implementation, first we create a new anim folder under the res directory of the project, then create a new xml file and add the following code:

<?xml version="1.0" encoding="utf-8"?> 
<animation-list xmlns:android="http://schemas.android.com/apk/res/android 
 android:oneshot="false" > 
 <item 
  android:drawable="@drawable/app_loading0" 
  android:duration="150"/> 
 <item 
  android:drawable="@drawable/app_loading1" 
  android:duration="150"/> 
</animation-list> 

animation-The list is the animation list, in the middle there are many items, which are the pictures that make up the frame animation,

android:drawable[drawable]//Loading Drawable object

android:duration[long]//The duration of each frame of the animation (in milliseconds)

android:oneshot[boolean]//Whether the animation runs only once, true runs once, false repeats

After writing, let's take a look at how to create a custom dialog to automatically load a running animation when the dialog is opened. See the code below:

/** 
 * @Description: Custom Dialog 
 * @author http://blog.csdn.net/finddreams 
 */ 
public class CustomProgressDialog extends ProgressDialog { 
 private AnimationDrawable mAnimation; 
 private Context mContext; 
 private ImageView mImageView; 
 private String mLoadingTip; 
 private TextView mLoadingTv; 
 private int count = 0; 
 private String oldLoadingTip; 
 private int mResid; 
 public CustomProgressDialog(Context context, String content, int id) { 
  super(context); 
  this.mContext = context; 
  this.mLoadingTip = content; 
  this.mResid = id; 
  setCanceledOnTouchOutside(true); 
 } 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  initView(); 
  initData(); 
 } 
 private void initData() { 
  mImageView.setBackgroundResource(mResid); 
  // Durch das ImageView-Objekt wird die AnimationDrawable, die die Hintergrundanzeige darstellt, erhalten 
  mAnimation = (AnimationDrawable) mImageView.getBackground(); 
  // Um die Lösung zu vermeiden, dass im onCreate-Method nur das erste Frame angezeigt wird 
  mImageView.post(new Runnable() { 
   @Override 
   public void run() { 
    mAnimation.start(); 
   } 
  }); 
  mLoadingTv.setText(mLoadingTip); 
 } 
 public void setContent(String str) { 
  mLoadingTv.setText(str); 
 } 
 private void initView() { 
  setContentView(R.layout.progress_dialog); 
  mLoadingTv = (TextView) findViewById(R.id.loadingTv); 
  mImageView = (ImageView) findViewById(R.id.loadingIv); 
 } 
} 

Man kann sehen, dass wir im Code die Methode imageview.post(Runnable r) verwenden, da die Animation der Frames ständig neu gezeichnet werden muss, daher muss sie auf einem Thread ausgeführt werden, sonst kann man nur das erste Frame sehen, das ist genau das gleiche Prinzip wie bei der Erstellung von Spielen, das Gehen einer Figur wird durch einen Thread kontrolliert, der das ständige Neuzeichnen der Bilder steuert.

Natürlich gibt es auch eine andere Methode, die dies erreichen kann:

@Override 
 public void onWindowFocusChanged(boolean hasFocus) { 
  // TODO Auto-generierter Methodenstempel 
  mAnimation.start(); 
  super.onWindowFocusChanged(hasFocus); 
 } 

Letztendlich wird dies im Activity aufgerufen, Details:

CustomProgressDialog dialog = new CustomProgressDialog(this, "Wird geladen", R.anim.frame); 
  dialog.show();

Für die CustomProgressDialog-Klasse, eine gut verpackte benutzerdefinierte Dialogklasse, ist es sehr einfach zu verwenden. Sie können schnell das gewünschte Effekt ersetzen, indem Sie nur das Bild ändern.

Das ist der gesamte Inhalt dieses Artikels. Wenn Sie nach dem Test noch Unklarheiten haben, können Sie im nachfolgenden Kommentarbereich nachfragen. Vielen Dank für Ihre Unterstützung für das Shouting-Tutorial.

Erklärung: Der Inhalt dieses Artikels stammt aus dem Internet und ist Eigentum der Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine Haftung für rechtliche Fragen. Wenn Sie Inhalte mit涉嫌版权 vermuten, senden Sie bitte eine E-Mail an: notice#oldtoolbag.com (bei der Übermittlung von E-Mails ersetzen Sie bitte # durch @) und geben Sie entsprechende Beweise an. Bei nachgewiesener Infringement werden die betreffenden Inhalte sofort gelöscht.