你的位置:首页 > 操作系统

[操作系统]仿慕课网下拉加载动画


最近在做动画的项目,在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   @Override59   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.

 1 <? 2 <animation-list  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   @Override18   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       @Override44       public void onClick(View arg0) {45         imgView.setVisibility(View.VISIBLE);46       }47     });48   }49 }

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

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

 

 

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