Android实现创意LoadingView动画效果

Android上的热火锅煮萝卜蔬菜的Loading动画效果。 这是一个锅煮萝卜的Loading动画,效果仿照自之前IOS上看到的一个效果,觉得挺有意思,就移植过来了,在此完成了Dialog的样式,方便使用者作为LoadingView去使用。
关键性代码:

package yellow5a5.demo.boilingloadingview.View;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.drawable.ClipDrawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import java.util.Timer;
import java.util.TimerTask;

import yellow5a5.demo.boilingloadingview.R;

/**
 * Created by Weiwu on 16/1/2.
 */
public class BoilingPanView extends RelativeLayout {

  private View mView;
  private ClipDrawable mWaterDrawable;

  private WaterView mWaterView;
  private FlameView mFlameView;

  private View mPea1;
  private View mPea2;
  private ImageView mPotato;
  private ImageView mCarrot;
  private ImageView mCoverView;

  private Animation mLeftInAnim;
  private Animation mRightInAnim;

  private boolean isRightRotate = true;
  private ValueAnimator mCoverAnim;

  private BoilingAnimListener mBoilingAnimListener;

  public interface BoilingAnimListener {
    //初始动画结束监听
    void onFirstAnimEnd();
  }

  public void setBoilingAnimListener(BoilingAnimListener l) {
    this.mBoilingAnimListener = l;
  }

  private Handler mHandle = new Handler(new Handler.Callback() {
    @Override
    public boolean handleMessage(Message msg) {
      if (msg.what == 0X0000) {
        mWaterDrawable.setLevel(mWaterDrawable.getLevel() + 800);
      }
      return false;
    }
  });

  public BoilingPanView(Context context) {
    this(context, null);
  }

  public BoilingPanView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public BoilingPanView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mView = LayoutInflater.from(context).inflate(R.layout.boiling_pan, this, true);
    initView();
    initStartAnim();
    initCoverAnim();
  }

  private void initView() {
    mWaterView = (WaterView) mView.findViewById(R.id.img_water);
    mFlameView = (FlameView) mView.findViewById(R.id.flame);
    mCoverView = (ImageView) mView.findViewById(R.id.img_cover);
    mPea1 = mView.findViewById(R.id.img_pea1);
    mPea2 = mView.findViewById(R.id.img_pea2);
    mPotato = (ImageView) mView.findViewById(R.id.img_potato);
    mCarrot = (ImageView) mView.findViewById(R.id.img_carrot);
    mWaterDrawable = (ClipDrawable) mWaterView.getDrawable();
  }

  private void initStartAnim() {
    mLeftInAnim = AnimationUtils.loadAnimation(getContext(), R.anim.left_in_anim);
    mRightInAnim = AnimationUtils.loadAnimation(getContext(), R.anim.right_in_anim);
  }

  /*
  抖动的盖子
   */
  private void initCoverAnim() {
    mCoverAnim = ValueAnimator.ofFloat(0f, 1f, 0f).setDuration(800);
    mCoverAnim.setRepeatMode(Animation.REVERSE);
    mCoverAnim.setRepeatCount(-1);
    mCoverAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        float value = (float) animation.getAnimatedValue();
        if (isRightRotate) {
          mCoverView.setRotation(value * 5);
        } else {
          mCoverView.setRotation(-value * 5);
        }
        mCoverView.setTranslationY(-value * TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics()));
      }
    });
    mCoverAnim.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationRepeat(Animator animation) {
        super.onAnimationRepeat(animation);
        isRightRotate = !isRightRotate;
      }
    });
  }

  /*
  开始启动的动画
   */
  public void beginFirstInAnim() {
    mPea1.setVisibility(VISIBLE);
    mPea2.setVisibility(VISIBLE);
    mPotato.setVisibility(VISIBLE);
    mCarrot.setVisibility(VISIBLE);
    mCoverView.setVisibility(VISIBLE);
    mPea1.startAnimation(mLeftInAnim);
    mPea2.startAnimation(mLeftInAnim);
    mPotato.startAnimation(mLeftInAnim);
    mCarrot.startAnimation(mRightInAnim);
    mCoverView.startAnimation(mRightInAnim);
    mRightInAnim.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {

      }

      @Override
      public void onAnimationEnd(Animation animation) {
        if (mBoilingAnimListener != null) {
          //这里是为了给外部留有操作的空间
          mBoilingAnimListener.onFirstAnimEnd();
        } else {
          beginBoilingAnim();
        }
      }

      @Override
      public void onAnimationRepeat(Animation animation) {

      }
    });
  }

  /*
  开始加水燃火动画
   */
  public void beginBoilingAnim() {
    final Timer timer = new Timer();
    timer.schedule(new TimerTask() {
      @Override
      public void run() {
        mHandle.sendEmptyMessage(0X0000);
        if (mWaterDrawable.getLevel() >= 10000) {
          timer.cancel();
        }
      }
    }, 0, 50);
    mFlameView.startFlaming();
    mCoverAnim.start();
  }

  /*
  重置动画
   */
  public void resetAnim() {
    mWaterDrawable.setLevel(0);
    mWaterView.resetBubbleAnim();
    mFlameView.stopFlaming();
    mPea1.setVisibility(INVISIBLE);
    mPea2.setVisibility(INVISIBLE);
    mPotato.setVisibility(INVISIBLE);
    mCarrot.setVisibility(INVISIBLE);
    mCoverView.setVisibility(INVISIBLE);

  }
}

希望本文所述对大家学习Android软件编程有所帮助。

(0)

相关推荐

  • Android项目实战手把手教你画圆形水波纹loadingview

    本文实例讲解的是如何画一个满满圆形水波纹loadingview,这类效果应用场景很多,比如内存占用百分比之类的,分享给大家供大家参考,具体内容如下 效果图如下: 预备的知识: 1.贝塞尔曲线    如果你不了解,可以来这里进行基础知识储备:神奇的贝塞尔曲线 2.Paint.setXfermode()  以及PorterDuffXfermode 千万不要被这个b的名字吓到,不熟悉看到可能会认为很难记,其实 只要站在巨人的丁丁上 还是很简单的. 好了 废话不多说 ,跟我一步步来做一个炫酷的view吧

  • Android环形进度条(安卓默认形式)实例代码

    Android开发中,有很多的功能在实际应用中都起了很大的作用,比如android进度条的实现方式,下面给大家介绍Android环形进度条(安卓默认形式),具体内容如下所示: .xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_widt

  • Android自定义环形LoadingView效果

    最近项目有要用到环形的进度条,Github上有一个类似的DashedCircularProgress控件,但是他画的进度是通过设置画笔的虚线效果来实现间隔的:progressPaint.setPathEffect(new DashPathEffect(new float[]{dashWith, dashSpace}, dashSpace));如果内层还有一层圆环,在动态设置时,内层和外层有细微的偏差.于是我在原有基础上改了一个,实现了我要的效果(设置进度时可以选择加动画或者不加动画): 控件实现

  • Android 自定义通用的loadingview实现代码

    功能 1.显示加载视图,加载失败的时候显示加载失败视图,数据为空时显示数据为空视图,支持为失败视图设置点击事件重新加载数据. 2.支持个性化设置,自定义设置 加载.失败.空数据视图. 先放一张效果图压压惊 实现 实现思路其实就是一个FrameLayout里添加三个布局做处理显示隐藏,自定义视图其实就是替换里面的view ,代码比较简单,如果直接看过我的自定义view系列文章,或者对自定义view有所了解,都很容易看懂,所有直接上代码了. 具体代码 Java 代码 public class Com

  • Android中制作进度框和环形进度条的简单实例分享

    进度框 import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; import java.util.Random; public class ObliqueProgressbar ext

  • Android实现环形进度条代码

    本文参考借鉴:http://www.jb51.net/article/102983.htm 先上效果图: 自定义控件:AttendanceProgressBar 代码如下: public class AttendanceProgressBar extends View { // 画圆环底部的画笔 private Paint mCirclePaint; // 画圆环的画笔 private Paint mRingPaint; // 画字体的画笔 private Paint mTextPaint; /

  • Android实现计步进度的环形Progress

    项目中需要实现一个计步进度的环形Progress,当未达到设定目标时,绘制特定弧度((已实现步数/目标步数)*360°)的圆弧.当已实现步数大于等于目标步数时绘制整个360°圆环. 效果图: 代码实现: 设置已完成步数和目标步数: public void setStep(int stepDone, int stepGoal) { this.stepDone = stepDone; this.stepGoal = stepGoal; int progess = (stepDone * 100) /

  • Android应用中炫酷的横向和环形进度条的实例分享

    一.概述 最近需要用进度条,秉着不重复造轮子的原则,上github上搜索了一番,看了几个觉得比较好看的ProgressBar,比如:daimajia的等.简单看了下代码,基本都是继承自View,彻彻底底的自定义了一个进度条.盯着那绚丽滚动条,忽然觉得,为什么要通过View去写一个滚动条,系统已经提供了ProgressBar以及属于它的特性,我们没必要重新去构建一个,但是系统的又比较丑,不同版本变现还不一定一样.那么得出我们的目标:改变系统ProgressBar的样子. 对没错,我们没有必要去从0

  • Android实现环形进度条的实例

    Android实现环形进度条的效果图如下: 自定义控件:AttendanceProgressBar 代码如下: public class AttendanceProgressBar extends View { // 画圆环底部的画笔 private Paint mCirclePaint; // 画圆环的画笔 private Paint mRingPaint; // 画字体的画笔 private Paint mTextPaint; // 圆形颜色 private int mCircleColor

  • Android自定义View实现环形进度条的思路与实例

    前言 前段时间看到了豆瓣FM的音乐播放界面,有一个环形的进度条,非常的好看,于是想了想,为什么不自己做一个呢,于是就开始了自定义的过程 豆瓣FM的播放界面如下图: 功能分析 虽然功能比较简单,但是仍然需要仔细分析 1.图标外还有一圈圆圈,可以设置宽度 2.圆形进度条和进度条底部,可以设置宽度,颜色等 3.内部有一个圆形图片,可旋转 实现思路分析 1.可以设置宽度的圆圈 这个比较容易,直接在onDraw方法中使用canvas绘制即可,当然,在间距和半径的处理上需要仔细,控件本体其实还是一个长方形,

随机推荐