我們都知道在中,常見的動畫模式有兩種:一種是幀動畫 (Frame ) ,一種是補間動畫( Tween )。幀動畫是提供了一種逐幀播放圖片的動畫方式,播放事先做好的圖像,與gif圖片原理類似,就像是在放電影一樣。補間動畫可以實現View組件的移動、放大、縮小以及漸變等效果。
今天我們主要來模仿一下美團中加載數據時小人奔跑動畫的對話框效果,取個有趣的名字就是 Man,奔跑吧,兄弟!話不多少,先上效果圖,讓各位大俠看看是不是你想要實現的效果,然后再決定是否往下閱讀,因為做為程序員我們的時間都很寶貴,畢竟還沒有女朋友呢?
(ps:因為技術原因,提供的動態圖效果不是很明顯,但在手機上運行是非常好的,有興趣的朋友可以下載源碼看看。)
下面講講實現的原理,首先我們在項目的res目錄下新建一下anim文件夾,然后新建一個xml文件ps制作加載進度條gif,添加如下代碼:
1.
2. 3. android:oneshot="false" >
4.
5.- 6. android:drawable="@drawable/app_loading0"
7. android:duration="150"/>
8.- 9. android:drawable="@drawable/app_loading1"
10. android:duration="150"/>
11.
12.
-list 是動畫列表,中間放很多的item 也就是組成幀動畫的圖片,
:[]//加載對象
:[long]//每一幀動畫的持續時間(單位ms)
:[]//動畫是否只運行一次,true運行一次,false重復運行
寫好之后我們來看自定義一個對話框,來實現打開對話框時,自動加載奔跑的動畫。見代碼:
1. /**
2. * @Description:自定義對話框
3. * @author
4. */
5. public class CustomProgressDialog extends ProgressDialog {
6.
7. private AnimationDrawable mAnimation;
8. private Context mContext;
9. private ImageView mImageView;
10. private String mLoadingTip;
11. private TextView mLoadingTv;
12. private int count = 0;
13. private String oldLoadingTip;
14. private int mResid;
15.
16. public CustomProgressDialog(Context context, String content, int id) {
17. super(context);
18. this.mContext = context;
19. this.mLoadingTip = content;
20. this.mResid = id;
21. true);
22. }
23.
24. @Override
25. protected void onCreate(Bundle savedInstanceState) {
26. super.onCreate(savedInstanceState);
27. initView();
28. initData();
29. }
30.
31. private void initData() {
32.
33. mImageView.setBackgroundResource(mResid);
34. // 通過ImageView對象拿到背景顯示的AnimationDrawable
35. mAnimation = (AnimationDrawable) mImageView.getBackground();
36. // 為了防止在onCreate方法中只顯示第一幀的解決方案之一
37. new Runnable() {
38. @Override
39. public void run() {
40. mAnimation.start();
41.
42. }
43. });
44. mLoadingTv.setText(mLoadingTip);
45.
46. }
47.
48. public void setContent(String str) {
49. mLoadingTv.setText(str);
50. }
51.
52. private void initView() {
53. setContentView(R.layout.progress_dialog);
54. mLoadingTv = (TextView) findViewById(R.id.loadingTv);
55. mImageView = (ImageView) findViewById(R.id.loadingIv);
56. }
57.
58. }
可以看到在代碼中,我們使用到一個.post( r)方法,因為幀動畫需要不斷的重畫,所以必須在線程中運行,否則只能看到第一幀的效果ps制作加載進度條gif,這和我們做游戲的原理是一樣的,一個人物的走動,是有線程在控制圖片的不斷重畫。
當然還有另外一個方法也能實現:
1. @Override
2. public void onWindowFocusChanged(boolean hasFocus) {
3. // TODO Auto-generated method stub
4. mAnimation.start();
5. super.onWindowFocusChanged(hasFocus);
6. }
最后就是在中調用了,詳情:
1. CustomProgressDialog dialog =new CustomProgressDialog(this, "正在加載中",R.anim.frame);
2. dialog.show();
對于這個自定義對話框類是封裝的比較好的,調用起來十分方便,你可以快速的替換成你想要的效果,只需更改圖片就可以了。
最后附上源代碼,還不夠理解的朋友可以下載看看,希望對你有所幫助;