zoukankan      html  css  js  c++  java
  • 仿慕课网下拉加载动画

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

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

  • 相关阅读:
    JS和Jquery获取this
    写SQL经验积累2
    转载学习
    java开发3个月总结
    学习规划
    Spring Boot详解
    webSocketDemo
    spring boot中 redis配置类(4.0)
    c语言操作字符串
    聊聊面试常问的HashMap中红黑树
  • 原文地址:https://www.cnblogs.com/taofudemo/p/4670183.html
Copyright © 2011-2022 走看看