转载

仿慕课网下拉加载动画

最近在做动画的项目,在eoe看了篇帖子,然就试着做了一下仿慕课网的下来加载动画。

毕竟我看到的那篇帖子里,没有附上源码。于是自己用ps了下图标;实现了之后其实也挺简单,就是AnimationDrawable类进行 Animation-list中item的循环遍历图片,类似于flash里的帧帧动画

接下来就先附上源码,相信大家都容易看的懂:

这里为了 让这个动画效果可被复用,于是就继承了 ImageView 去实现某些方法

 1 package com.example.loading_drawable;  2   3 import android.content.Context;  4 import android.graphics.drawable.AnimationDrawable;  5 import android.util.AttributeSet;  6 import android.util.Log;  7 import android.view.View;  8 import android.view.animation.Animation;  9 import android.widget.ImageView; 10  11 public class MyImgView extends ImageView { 12     // 动画图层类 13     private AnimationDrawable bg_anim; 14  15     public MyImgView(Context context) { 16         super(context, null); 17         initView(); 18     } 19  20     public MyImgView(Context context, AttributeSet attrs) { 21         super(context, attrs, 0); 22     } 23  24     public MyImgView(Context context, AttributeSet attrs, int defStyle) { 25         super(context, attrs, defStyle); 26  27     } 28   //初始化 29     private void initView() { 30         setBackgroundResource(R.drawable.flash_anim); 31         bg_anim = (AnimationDrawable) getBackground(); 32         Log.i("AAA", "iniView"); 33     } 34  35     /** 36      * 开启动画效果 37      */ 38     public void startAnim() { 39         if (bg_anim != null) { 40             bg_anim.start(); 41         } 42     } 43  44     /** 45      * 停止动画效果 46      */ 47     public void stopAnim() { 48         if (bg_anim != null && bg_anim.isRunning()) { 49             bg_anim.stop(); 50         } 51     } 52  53     /* 54      * (non-Javadoc) 55      *  56      * @see android.widget.ImageView#setVisibility(int) 当控件被显示时就调用 开启动画效果,反之 57      */ 58     @Override 59     public void setVisibility(int visibility) { 60         super.setVisibility(visibility); 61         if (visibility == View.VISIBLE) { 62             startAnim(); 63         } else { 64             stopAnim(); 65         } 66     } 67  68 }

接下来就是:在res文件夹下新建 drawable文件夹,再此文件夹下新建 flash_anim.xml文件,具体如下:

 1 <?xml version="1.0" encoding="utf-8"?>  2 <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  3     android:oneshot="false">  4     <item android:drawable="@drawable/a01_02" android:duration="50"/>  5       <item android:drawable="@drawable/a01_04" android:duration="50"/>  6       <item android:drawable="@drawable/a01_06" android:duration="50"/>  7       <item android:drawable="@drawable/a01_08" android:duration="50"/>  8       <item android:drawable="@drawable/a01_10" android:duration="50"/>  9       <item android:drawable="@drawable/a01_12" android:duration="50"/> 10       <item android:drawable="@drawable/a01_14" android:duration="50"/> 11       <item android:drawable="@drawable/a01_16" android:duration="50"/> 12       <item android:drawable="@drawable/a01_25" android:duration="50"/> 13       <item android:drawable="@drawable/a01_26" android:duration="50"/> 14       <item android:drawable="@drawable/a01_27" android:duration="50"/> 15       <item android:drawable="@drawable/a01_28" android:duration="50"/> 16       <item android:drawable="@drawable/a01_30" android:duration="50"/> 17       <item android:drawable="@drawable/a01_31" android:duration="50"/> 18       <item android:drawable="@drawable/a01_32" android:duration="50"/> 19       <item android:drawable="@drawable/a01_41" android:duration="50"/> 20       <item android:drawable="@drawable/a01_42" android:duration="50"/> 21       <item android:drawable="@drawable/a01_43" android:duration="50"/> 22       <item android:drawable="@drawable/a01_44" android:duration="50"/> 23       <item android:drawable="@drawable/a01_45" android:duration="50"/> 24       <item android:drawable="@drawable/a01_46" android:duration="50"/> 25       <item android:drawable="@drawable/a01_47" android:duration="50"/> 26       <item android:drawable="@drawable/a01_48" android:duration="50"/> 27       <item android:drawable="@drawable/a01_57" android:duration="50"/> 28       <item android:drawable="@drawable/a01_58" android:duration="50"/> 29       <item android:drawable="@drawable/a01_59" android:duration="50"/> 30       <item android:drawable="@drawable/a01_60" android:duration="50"/> 31       <item android:drawable="@drawable/a01_61" android:duration="50"/> 32       <item android:drawable="@drawable/a01_62" android:duration="50"/> 33       <item android:drawable="@drawable/a01_63" android:duration="50"/> 34       <item android:drawable="@drawable/a01_64" android:duration="50"/> 35 </animation-list>

这样就基本搞定了,接下来就要在main中调用自定义的main就可以;如下:

 1 package com.example.loading_drawable;  2   3 import android.app.Activity;  4 import android.os.Bundle;  5 import android.view.Gravity;  6 import android.view.View;  7 import android.view.View.OnClickListener;  8 import android.widget.Button;  9 import android.widget.LinearLayout; 10 import android.widget.LinearLayout.LayoutParams; 11  12 /** 13  * @author Administrator 慕课网下拉刷新进度显示控件 14  *  15  */ 16 public class MainActivity extends Activity { 17     @Override 18     protected void onCreate(Bundle savedInstanceState) { 19         super.onCreate(savedInstanceState); 20         LinearLayout rootLayout = new LinearLayout(this); 21         rootLayout.setOrientation(LinearLayout.VERTICAL); 22         rootLayout.setLayoutParams(new LinearLayout.LayoutParams( 23                 LinearLayout.LayoutParams.MATCH_PARENT, 24                 LinearLayout.LayoutParams.MATCH_PARENT)); 25         rootLayout.setGravity(Gravity.CENTER); 26  27         Button btn = new Button(this); 28         btn.setText("展现动画"); 29  30         final MyImgView imgView = new MyImgView(MainActivity.this); 31         imgView.setLayoutParams(new LinearLayout.LayoutParams( 32                 LinearLayout.LayoutParams.WRAP_CONTENT, 33                 LinearLayout.LayoutParams.WRAP_CONTENT)); 34         imgView.setVisibility(View.GONE); 35  36         rootLayout.addView(btn); 37         rootLayout.addView(imgView); 38  39         setContentView(rootLayout); 40  41         btn.setOnClickListener(new OnClickListener() { 42  43             @Override 44             public void onClick(View arg0) { 45                 imgView.setVisibility(View.VISIBLE); 46             } 47         }); 48     } 49 }

这里都是用 自定义代码布局文件,这个个人爱好,也是项目需求。应该也可以看懂的,自定义代码布局可方便 插件代码的 整合;

如上所述,这个动画就完成 了,只在需要的地方设置imgview为显示,动画就会开启,隐藏动画就会被关闭。

为了大家方便演示,就附上代码加图标,不过图标做的不好,呵呵。

正文到此结束
Loading...