Android实现仿美团、顺丰快递数据加载效果

Sappiamo tutti che in Android ci sono due tipi di modelli di animazione comuni: uno è l'animazione a frame (Frame Animation), l'altro è l'animazione di transizione (Tween Animation). L'animazione a frame offre un modo per riprodurre animazioni a immagini singole, riproducendo immagini preparate in anticipo, simile al principio di un'immagine GIF, come guardare un film. L'animazione di transizione può realizzare effetti come il movimento, l'ingrandimento, la riduzione e la transizione dei componenti View.

Oggi imiteremo principalmente l'effetto di dialogo dell'animazione di un personaggio che corre caricando dati su Meituan, chiamiamolo Running Man, corri, fratello! Senza dilungarci troppo, ecco l'effetto visivo, fate vedere se è l'effetto che volevate ottenere, poi decidete se leggere oltre, perché come programmatori il nostro tempo è prezioso, dopo tutto, non abbiamo nemmeno una ragazza?

(ps: a causa di problemi tecnici, l'effetto del grafico animato fornito non è molto evidente, ma funziona molto bene sul telefono, chi è interessato può scaricare il codice sorgente per vedere.)

Parliamo del principio di implementazione, prima di tutto creiamo una cartella anim folder nel percorso res del progetto, quindi creiamo un file xml e aggiungiamo il seguente codice:

<?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-list è una lista di animazioni, al suo interno ci sono molti item, ossia le immagini che compongono l'animazione a fotogrammi

android:drawable[drawable]//Oggetto Drawable da caricare

android:duration[long]//Durata di ogni fotogramma dell'animazione (unità ms)

android:oneshot[boolean]//L'animazione viene eseguita una volta sola, true per una sola esecuzione, false per esecuzioni ripetute

Dopo aver completato, guardiamo come creare una finestra di dialogo personalizzata per caricare automaticamente un'animazione di corsa quando si apre la finestra di dialogo. Ecco il codice:

/** 
 * @Description:自定义对话框 
 * @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); 
  // Ottenere l'AnimationDrawable di sfondo dell'ImageView 
  mAnimation = (AnimationDrawable) mImageView.getBackground(); 
  // Una delle soluzioni per evitare di visualizzare solo la prima frame nell'method onCreate 
  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); 
 } 
} 

Si può vedere che nel codice, utilizziamo il metodo imageview.post(Runnable r), perché l'animazione a frame necessita di essere disegnata ripetutamente, quindi deve essere eseguita in un thread, altrimenti si vedrà solo l'effetto della prima frame, che è lo stesso principio che usiamo per fare giochi, il movimento di un personaggio è controllato da un thread che disegna ripetutamente l'immagine.

Certo, c'è anche un altro metodo che può essere implementato:

@Override 
 public void onWindowFocusChanged(boolean hasFocus) { 
  // TODO metodo stub generato automaticamente 
  mAnimation.start(); 
  super.onWindowFocusChanged(hasFocus); 
 } 

Infine, è stato chiamato nell'Activity, dettagli:

CustomProgressDialog dialog = new CustomProgressDialog(this, "In carica", R.anim.frame); 
  dialog.show();

Per il tipo di classe di dialogo personalizzata CustomProgressDialog è ben encapsulato, molto facile da chiamare, puoi sostituire rapidamente con l'effetto desiderato, basta cambiare l'immagine.

Questo è tutto il contenuto dell'articolo. Se hai domande dopo il test, puoi lasciare un commento nella sezione dei commenti sottostante. Grazie per il tuo supporto al manuale di urla.

Dichiarazione: il contenuto di questo articolo è stato fornito dalla rete, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, è possibile inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.