android自定义波浪加载动画的实现代码

本文实例为大家分享了android自定义波浪加载动画的具体代码,供大家参考,具体内容如下

效果图

1.自定义控件 WaveView

package com.example.wh.myapplication;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;

import java.text.DecimalFormat;
public class WaveView extends View {

 /**
 * 默认波浪1长度
 */
 private final int WAVE_LENGTH1 = 600;

 /**
 * 默认波浪1高度
 */
 private final int WAVE_HEIGHT1 = 30;

 /**
 * 波浪1高度
 */
 private int mWaveHeight1 = WAVE_HEIGHT1;

 /**
 * 波浪1长度
 */
 private int mWaveLenght1 = WAVE_LENGTH1;

 /**
 * 默认波浪1颜色
 */
 private final int WAVE_COLOR1 = Color.parseColor("#0000ff");

 /**
 * 默认边框颜色
 */
 private final int BORDER_COLOR = Color.parseColor("#800000ff");

 /**
 * 默认文字颜色
 */
 private final int DEFAULT_TEXT_COLOR = Color.parseColor("#ff0000");
 /**
 * 默认文字大小
 */
 private final int DEFAULT_TEXT_SIZE = 30;

 /**
 * 文字颜色
 */
 private int mTextColor = DEFAULT_TEXT_COLOR;
 /**
 * 文字大小
 */
 private int mTextSize = DEFAULT_TEXT_SIZE;

 /**
 * 波浪1颜色
 */
 private int mWaveColor1 = WAVE_COLOR1;

 /**
 * 默认每一次重绘时波峰1的移动的距离,实现移动效果
 */
 private final int WAVE_OFFSET1 = 8;

 /**
 * 每一次重绘时波峰1的移动的距离,实现移动效果
 */
 private int mOffset1 = WAVE_OFFSET1;

 /**
 * 默认边框宽度
 */
 private final int BORDER_WIDTH = 2;

 /**
 * 边框颜色
 */
 private int mBorderColor = BORDER_COLOR;

 /**
 * 边框宽度
 */
 private int mBorderWidth = BORDER_WIDTH;

 /**
 * 绘制的高度,百分比。0表示内有高度,1表示全部高度
 */
 private float mPrecent = 0.5f;

 /**
 * 形状枚举,暂时只支持矩形和圆形,可扩展
 */
 public enum ShowShape {
 RECT
 }

 /**
 * 形状默认矩形
 */
 private ShowShape mShape = ShowShape.RECT;

 /**
 * 默认两次重绘之间间隔的时间,5毫秒
 */
 private final int DEFAULT_TIME = 5;

 /**
 * 两次重绘之间间隔的时间,毫秒。
 */
 private int mTime = DEFAULT_TIME;

 /**
 * 设置两次重绘之间的间隔时间,毫秒
 *
 * @param time
 * @return
 */
 public WaveView setTime(int time) {
 this.mTime = time;
 return this;
 }

 /**
 * 波浪1画笔
 */
 private Paint mWavePaint1;

 /**
 * 边框画笔
 */
 private Paint mBorderPaint;
 /**
 * 文字画笔
 */
 private Paint mTextPaint;

 /**
 * 波浪1路径
 */
 private Path mWavePath1;

 /**
 * 定义数字格式转行类
 */
 private DecimalFormat mFormat;

 /**
 * 控件的宽度
 */
 private int mWidth;
 /**
 * 控件的高度
 */
 private int mHeight;

 /**
 * 水位上升时不断变化的 y 坐标
 */
 private float mChangeY;

 /**
 * 水位最终的高度,通过控件的高度和百分比计算出来
 */
 private float mFinalY;

 /**
 * 波峰的个数
 */
 private int mWaveCount = 8;

 /**
 * 重置标记,开始为重置状态
 */
 private boolean isReset = true;

 /**
 * 当前百分比
 */
 private float mCurrentPrecent = 0.0f;

 /**
 * 重绘值波峰移动距离的和
 */
 private int mMoveSum1;

 /**
 * 能够绘制标记位,开始不能绘制
 */
 private boolean invalidateFlag = false;

 /**
 * 百分比改变监听
 */
 private PrecentChangeListener mPrecentChangeListener;

 /**
 * 百分比改变监听接口
 */
 public interface PrecentChangeListener {
 /**
  * 百分比发生改变时调用的方法
  *
  * @param precent 当前的百分比,格式 0.00 范围 [0.00 , 1.00]
  */
 void precentChange(double precent);
 }

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

 public WaveView(Context context, @Nullable AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);

 initAttrs(context, attrs); // 获取布局文件中dingy9i的属性
 init();
 }

 //获取布局中的初始属性
 private void initAttrs(Context context, AttributeSet attrs) {
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveView);
 mWaveLenght1 = typedArray.getInteger(R.styleable.WaveView_wave1Length, WAVE_LENGTH1);
 mWaveHeight1 = typedArray.getInteger(R.styleable.WaveView_wave1Height, WAVE_HEIGHT1);
 mWaveColor1 = typedArray.getColor(R.styleable.WaveView_wave1Color, WAVE_COLOR1);
 mOffset1 = typedArray.getInteger(R.styleable.WaveView_wave1Offset, WAVE_OFFSET1);

 mBorderWidth = typedArray.getDimensionPixelSize(R.styleable.WaveView_borderWidth, BORDER_WIDTH);
 mBorderColor = typedArray.getColor(R.styleable.WaveView_borderColor, BORDER_COLOR);

 mTime = typedArray.getInteger(R.styleable.WaveView_intervalTime, DEFAULT_TIME);
 mPrecent = typedArray.getFloat(R.styleable.WaveView_precent, 0.5f);
 /**
  * 绘制的高度,百分比。0表示内有高度,1表示全部高度
  */
 int shapeValue = typedArray.getInteger(R.styleable.WaveView_showShape, 0);

 mShape = ShowShape.RECT;
 typedArray.recycle();
 }

 private void init() {
 mWavePaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
 mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

 mWavePath1 = new Path();

 mWavePaint1.setColor(mWaveColor1);
 mWavePaint1.setStyle(Paint.Style.FILL);

 mBorderPaint.setColor(mBorderColor);
 mBorderPaint.setStrokeWidth(mBorderWidth);
 mBorderPaint.setStyle(Paint.Style.STROKE);

 mTextPaint.setColor(mTextColor);
 mTextPaint.setTextSize(mTextSize);

 // 定义数字显示个格式
 mFormat = new DecimalFormat("###,###,##0.00");
 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 super.onSizeChanged(w, h, oldw, oldh);
 mWidth = w;
 mHeight = h;

 mChangeY = mHeight;
 // 计算波峰个数,为了实现移动效果,保证至少绘制两个波峰
 mFinalY = (1 - mPrecent) * mHeight; // 计算水位最终高度
 }

 @Override
 protected void onDraw(Canvas canvas) {
 mWavePath1.reset();

 if (mBorderWidth > 0) {
  // 边框大于0,表示需要绘制边框
  if(mShape == ShowShape.RECT) {
  canvas.drawRect(0, 0, mWidth, mHeight, mBorderPaint);
  }
 }

 mWavePath1.moveTo(-mWaveLenght1, mChangeY);

 if (!isReset) { // 判断重置标记
  // 利用贝塞尔曲线绘制波浪
  for (int i = 0; i < mWaveCount; i++) {
  // 绘制波浪1的曲线
  mWavePath1.quadTo((-mWaveLenght1 * 3 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY + mWaveHeight1, (-mWaveLenght1 / 2) + (i * mWaveLenght1) + mMoveSum1, mChangeY);
  mWavePath1.quadTo((-mWaveLenght1 * 1 / 4) + (i * mWaveLenght1) + mMoveSum1, mChangeY - mWaveHeight1, (i * mWaveLenght1) + mMoveSum1, mChangeY);

  }

  // 不断改变高度,实现逐渐水位逐渐上涨效果
  mChangeY -= 1;
  if (mChangeY < mFinalY) mChangeY = mFinalY;

  // 波峰1往右移动,波峰2往左移动
  mMoveSum1 += mOffset1;
  if (mMoveSum1 >= mWaveLenght1) mMoveSum1 = 0;

  // 填充矩形,让上涨之后的水位下面填充颜色
  mWavePath1.lineTo(mWidth, mHeight);
  mWavePath1.lineTo(0, mHeight);
  mWavePath1.close();

  canvas.drawPath(mWavePath1, mWavePaint1);
 } else {
  // 是重置
  canvas.drawColor(Color.TRANSPARENT);
 }

 // 计算当前的百分比
 mCurrentPrecent = 1 - mChangeY / mHeight;
 // 格式化数字格式
 String format1 = mFormat.format(mCurrentPrecent);
 // 绘制文字,将百分比绘制到界面。此处用的是 "50%" 的形式,可以根据需求改变格式
 double parseDouble = Double.parseDouble(format1);
 canvas.drawText((int) (parseDouble * 100) + " %", (mWidth - mTextPaint.measureText(format1)) / 2, mHeight / 5, mTextPaint);
 // 监听对象不为null并且没有达到设置高度时,调用监听方法
 if (mPrecentChangeListener != null && mChangeY != mFinalY) {
  mPrecentChangeListener.precentChange(parseDouble);
 }

 //高度到达设置高度
 if (mChangeY == mFinalY){
  canvas.drawColor(ContextCompat.getColor(getContext(), R.color.bowencolor));
 }

 // 判断绘制标记
 if (invalidateFlag) postInvalidateDelayed(mTime);
 }

 /**
 * 设置边框宽度
 *
 * @param borderWidth
 * @return
 */
 public WaveView setBorderWidth(int borderWidth) {
 this.mBorderWidth = borderWidth;
 return this;
 }

 /**
 * 设置波浪1颜色
 *
 * @param waveColor1
 * @return
 */
 public WaveView setWaveColor1(int waveColor1) {
 this.mWaveColor1 = waveColor1;
 return this;
 }

 /**
 * 设置边框颜色
 *
 * @param borderColor
 * @return
 */
 public WaveView setBorderColor(int borderColor) {
 this.mBorderColor = borderColor;
 return this;
 }

 /**
 * 设置文字颜色
 *
 * @param textColor
 * @return
 */
 public WaveView setTextColor(int textColor) {
 this.mTextColor = textColor;
 return this;
 }

 /**
 * 设置百分比
 *
 * @param precent
 * @return
 */
 public WaveView setPrecent(float precent) {
 this.mPrecent = precent;
 return this;
 }

 /**
 * 设置文字大小
 *
 * @param textSize
 * @return
 */
 public WaveView setTextSize(int textSize) {
 this.mTextSize = textSize;
 return this;
 }

 /**
 * 设置当前显示形状
 *
 * @param shape
 * @return
 */
 public WaveView setShape(ShowShape shape) {
 this.mShape = shape;
 return this;
 }

 /**
 * 开始
 */
 public void start() {
 invalidateFlag = true;
 isReset = false;
 postInvalidateDelayed(mTime);
 }

 /**
 * 暂停
 */
 public void stop() {
 invalidateFlag = false;
 isReset = false;
 }

 /**
 * 重置
 */
 public void reset() {
 invalidateFlag = false;
 isReset = true;
 mChangeY = mHeight;
 postInvalidate();
 }
}

2.attrs

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <!--自定义水波纹效果属性-->
 <declare-styleable name="WaveView">
 <!--波浪1的长度、高度、颜色和每次重绘的偏移量-->
 <attr name="wave1Length" format="integer" />
 <attr name="wave1Height" format="integer" />
 <attr name="wave1Color" format="color" />
 <attr name="wave1Offset" format="integer" />

 <!--边框的宽度和颜色-->
 <attr name="borderWidth" format="dimension" />
 <attr name="borderColor" format="color" />
 <!--文字的大小和颜色-->
 <attr name="textColor" format="color" />
 <attr name="textSize" format="dimension" />
 <!--水位高度的百分比-->
 <attr name="precent" format="float" />
 <!--两次重绘的间隔时间-->
 <attr name="intervalTime" format="integer" />
 <!--控件的显示形状,rect矩形、circle圆形-->
 <attr name="showShape" format="enum">
  <enum name="rect" value="0" />
  <enum name="circle" value="1" />
 </attr>
 </declare-styleable>
</resources>

3.布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context="com.example.wh.myapplication.MainActivity">

 <com.example.wh.myapplication.WaveView
 android:id="@+id/waveview1"
 android:layout_width="200dp"
 android:layout_height="200dp" />

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:orientation="horizontal">

 <Button
  android:id="@+id/bt_start"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="开始"/>

 <Button
  android:id="@+id/bt_stop"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="暂停"/>

 <Button
  android:id="@+id/bt_reset"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="重置"/>
 </LinearLayout>
</LinearLayout>

4.MainActivity

package com.example.wh.myapplication;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

 private WaveView waveview1;
 private Button btStart;
 private Button btStop;
 private Button btReset;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 waveview1 = (WaveView) findViewById(R.id.waveview1);

 btStart = (Button) findViewById(R.id.bt_start);
 btStop = (Button) findViewById(R.id.bt_stop);
 btReset = (Button) findViewById(R.id.bt_reset);

 // 代码设置相关属性
 waveview1.setBorderWidth(2)
  .setWaveColor1(Color.RED)
  .setBorderColor(Color.GREEN)
  .setTextColor(Color.BLUE)
  .setShape(WaveView.ShowShape.RECT)
  .setTextSize(36)
  .setPrecent(1f)//设置水波纹的百分比
  .setTime(2);

 btStart.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  waveview1.start();
  }
 });

 btStop.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  waveview1.stop();
  }
 });

 btReset.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  waveview1.reset();
  }
 });
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义View实现loading动画加载效果

    项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. 先自定义一个View,继承自LinearLayout,在Layout中,添加布局控件 /** * Created by xiedong on 2017/3/7. */ public class Loading_view extends LinearLayout { private Context m

  • Android仿支付宝笑脸刷新加载动画的实现代码

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

  • Android加载Gif动画实现代码

    Android加载Gif动画如何实现?相信大家都很好奇,本文就为大家揭晓,内容如下 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_he

  • Android自定义view实现阻尼效果的加载动画

    效果: 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又称减幅振动.衰减振动.[1] 不论是弹簧振子还是单摆由于外界的摩擦和介质阻力总是存在,在振动过程中要不断克服外界阻力做功,消耗能量,振幅就会逐渐减小,经过一段时间,振动就会完全停下来.这种振幅随时间减小的振动称为阻尼振动.因为振幅与振动的能量有关,阻尼振动也就是能量不断减少的振动.阻尼振动是非简谐运

  • Android使用glide加载gif动画设置播放次数

    在使用glide加载gif动画,有时需要设置播放的次数,然后播放玩一次或者几次之后,需要在播放完做一些其他的操作,直接看代码: Glide.with(this) .load(R.drawable.xiaoguo) .diskCacheStrategy(DiskCacheStrategy.SOURCE) .listener(new RequestListener<Integer, GlideDrawable>() { @Override public boolean onException(Ex

  • Android Glide图片加载(加载监听、加载动画)

    本文实例为大家分享了Android Glide图片加载的具体代码,供大家参考,具体内容如下 1.普通用法 Glide.with(context) .load(url) .into(view); with中可以放context.activity.fragment..:当放activity.fragment时glide会根据生命周期来加载图片.推荐使用activity. 2.设置加载中和加载失败的图片 Glide.with(context) .load(url) .placeholder(R.dra

  • Android自定义加载loading view动画组件

    在github上找的一个有点酷炫的loading动画https://github.com/Fichardu/CircleProgress 我写写使用步骤 自定义view(CircleProgress )的代码 package com.hysmarthotel.view; import com.hysmarthotel.roomcontrol.R; import com.hysmarthotel.util.EaseInOutCubicInterpolator; import android.ani

  • Android实现跳动的小球加载动画效果

    先来看看效果图 跳动的小球做这个动画,需掌握: 1.属性动画 2.Path类.Canvas类 3.贝塞尔曲线 4.SurfaceView用法 5.自定义attr属性 6 .架构: 状态模式,控制器 7 .自由落体,抛物线等概念 不多说了,直接上码 1.DancingView.java public class DancingView extends SurfaceView implements SurfaceHolder.Callback { public static final int ST

  • Android自定义加载控件实现数据加载动画

    本文实例为大家分享了Android自定义加载控件,第一次小人跑动的加载效果眼前一亮,相比传统的PrograssBar高大上不止一点,于是走起,自定义了控件LoadingView去实现动态效果,可直接在xml中使用,具体实现如下 package com.*****.*****.widget; import android.content.Context; import android.graphics.drawable.AnimationDrawable; import android.util.

  • Android实现仿慕课网下拉加载动画

    具体实现方法就不多介绍了先附上源码,相信大家都容易看的懂: 这里为了让这个动画效果可被复用,于是就继承了ImageView 去实现某些方法 package com.example.loading_drawable; import android.content.Context; import android.graphics.drawable.AnimationDrawable; import android.util.AttributeSet; import android.util.Log;

随机推荐