仿慕课网下拉加载动画

最近在做动画的项目,在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为显示,动画就会开启,隐藏动画就会被关闭。

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

时间: 2024-10-09 09:41:29

仿慕课网下拉加载动画的相关文章

使用MJRefresh自定义下拉刷新,上拉加载动画

有时候我们需要自己设置下拉刷新,上拉加载动画的实现,这里主要是记录下使用MJRefresh自定义下拉刷新,上拉加载动画..... 下拉刷新我们只需要继承MJRefreshGifHeader即可: 实现代码如下: - (void)prepare{ [super prepare]; self.stateLabel.hidden = NO; self.lastUpdatedTimeLabel.hidden = YES; [self setImages:@[[UIImage imageNamed:@"v

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面

仿支付宝笑脸刷新加载动画的实现

看到支付宝的下拉刷新有一个笑脸的动画,因此自己也动手实现一下.效果图如下: 一.总体思路 1.静态部分的笑脸. 这一部分的笑脸就是一个半圆弧,加上两颗眼睛,这部分比较简单,用于一开始的展示. 2.动态笑脸的实现. 2.1.先是从底部有一个圆形在运动,运动在左眼位置时把左眼给绘制,同时圆形继续运动,运动到右眼位置时绘制右眼,圆形继续运动到最右边的位置. 2.2.当上面的圆形运动到最右边时候,开始不断绘制脸,从右向左,脸不断增长,这里脸设置为接近半个圆形的大小. 2.3.当脸画完的时候,开始让脸旋转

【Android自定义View实战】之仿百度加载动画,一种优雅的Loading方式

转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53470872 本文出自[DylanAndroid的博客] Android自定义View实战之仿百度加载动画一种优雅的Loading方式 第一个仿百度加载动画用ObjectAnimator属性动画操作ImageView的属性方法实现 第二个仿百度加载动画第二种实现方式用ValueAnimator原生的ondraw方法实现 第三个扔球动画-水平旋转动画 第四个扔球动画-垂直旋转动

android 下拉刷新上拉加载更多,高仿ios左滑动删除item,解决了众多手势问题

一.前言 老规矩,别的不说,这demo是找了很相关知识集合而成的,可以说对我这种小白来说是绞尽脑汁!程序员讲的是无图无真相!现在大家一睹为快! 二.比较关键的还是scroller这个类的 package com.icq.slideview.view; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; i

自定义(下拉刷新、上拉加载)帧动画

前些天搞了个系统的下拉刷新跟上拉加载,由于效果一般所以才会有了今天这篇博文 对于大多数的码农来说,能弄出些自己感兴趣的好东西还是比较开心的.-- package com.example.administrator.xlistview; import android.content.Context; import android.graphics.drawable.AnimationDrawable; import android.util.AttributeSet; import android

安卓listView实现下拉刷新上拉加载滑动仿QQ的删除功能

大家对这些功能都是看的多了,然后对上拉刷新和下拉加载的原理都是非常清楚的,所以实现这功能其实也就是为了让大家能够从众多的同行们来进行比较学习而已,虽然即使是这样,但是面试的时候面试官还是会问你上拉和下拉是怎么实现的,滑动删除功能是怎么实现,其实要实现这些功能又不是唯一的方法,但是基本上思想都是一致的.然后gitup上的这些例子是非常的多,然后实现的也是大同小异但是也不能不让我们去球童存异.作为天朝的程序员即使是一个伸手党也不必太觉得羞耻,能把别人的东西来改一改或者沿用别人的思想来模仿也是不错的.

上拉加载底部转圈圈动画并文字提示

<block> <view class="listFooterLoading" wx:if="{{loadStatus==1}}"> <!-- 转圈圈 --> <view class="m-load2"> <view class="line"><view></view><view></view><view>&

仿头条新闻app,实现下拉刷新,上拉加载分页

---恢复内容开始--- 环境appcan appcan.ready(function() { page = 1; type = 0; searchDate = getNowTime(); highSearch(type); appcan.frame.setBounce([0,1], function(type) { //$("#pullstatus"+type).html(!type?"开始下拉":"开始上拖"); }, function(ty