自定义进度条动画(背景跟随变化)

原创 2016年05月30日 16:25:53

公司有一个这样的需求:


需求描述如下:长按右面的接受按钮,左侧的进度向右增加,进度条覆盖的地方跟没覆盖前的颜色是不一样的,比如进度条覆盖前的文字是黑色,覆盖后的文字是白色。释放按钮进度条会回滚。

一开始想用属性动画来解决,不料没成功,我是用属性动画做不出来,有高手希望指点一下。

我这里是用自定义view来实现,主要思路如下:

1:在draw方法画两份除了颜色都一样的视图,一份是覆盖进度条的,一份是没覆盖进度条的

2:根据进度条的位置,通过切割画布来决定画布的哪一部分显示有进度条的视图,另一部分显示没有进度条的部分。

这边没有美工,实现简单的效果如下:


看懂思路后具体的代码很简单(有兴趣的可以在上面的基础改一下,文子间距,背景什么的弄好看点):

package com.example.chttest;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;

/**
 * @author haitao
 */
public class MyProgressBoard extends View {
	
	private Thread thread; 
	private Context mContext;
	private Paint mPaint;
	private Paint mTextPaint;
	private Paint mCiclePaint;
	private Path path;
	private int progress = 10;//進度
	private boolean isOver=false;
	private Bitmap bitmap;
	private volatile boolean isDown = false;  //是否按下右边按钮
	private int imageWidth; //图片的宽度
	private int imageHeight; //图片的高度
	private int leftPadding = 20;
	private int textTopPadding = 30;
	private String titleStr = "免费卷";
	private String sencondStr = "免费得到超级乐视电视价值$3888元";
	private String thirdStr = "有效期:2016.1.2-2016.2.5";
	
	private String buttonStr = "按下";
	private int radio = 60;//圆的半径

	public MyProgressBoard(Context context) {
		super(context);
	}

	public MyProgressBoard(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
	}

	public MyProgressBoard(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext = context;

		setBackgroundColor(Color.WHITE);
		mPaint = new Paint();
		mPaint.setColor(Color.GREEN);
		mPaint.setStyle(Style.STROKE);
		mPaint.setStrokeWidth(10);
		path = new Path();

		mTextPaint = new Paint();
		mTextPaint.setTextSize(20);
		mTextPaint.setColor(Color.BLACK);
		mTextPaint.setStyle(Style.FILL);
		
		mCiclePaint = new Paint();
		mCiclePaint.setColor(Color.RED);
		mCiclePaint.setTextSize(20);
		mCiclePaint.setStyle(Style.STROKE);
		if(thread==null){
			thread = new Thread(runbale);
			thread.start();
		}
		
	}
	
	private Runnable runbale = new Runnable() {
		
		@Override
		public void run() {
			while(true){
				if(isDown && progress<=getWidth()){
					progress++;
					try {
						Thread.sleep(4);
						
						postInvalidate();
						
						if(progress>getWidth()){
							isDown = false;
							break;//退出while循环
						}
					} catch (Exception e) {
						e.printStackTrace();
					}
				}else{
					if(progress>0){
						progress--;
					}
					try {
						Thread.sleep(2);
						
						postInvalidate();
						
						if(progress==0){
							continue;//不退出while循环
						}
					} catch (Exception e) {
						e.printStackTrace();
					}
				}
			}
		}
	};

	private Runnable mLongClick = new Runnable() {
		
		@Override
		public void run() {
			isDown = true;
		}
	};
	
	@Override
	protected void onDraw(final Canvas cv) {
		super.onDraw(cv);
	    /** 红色区域**/
		Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmap);
		Bitmap bitmapmap = toGrayscale(BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher));
		imageWidth = bitmapmap.getWidth();
		imageHeight = bitmapmap.getHeight();
		canvas.drawRGB(255, 0, 0);
		canvas.drawBitmap(bitmapmap, DensityUtil.dip2px(mContext, leftPadding), getHeight()/2-imageHeight/2, mTextPaint);
		mTextPaint.setColor(Color.WHITE);
		canvas.drawText(titleStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, textTopPadding), mTextPaint);
		canvas.drawText(sencondStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, 2*textTopPadding), mTextPaint);
		canvas.drawText(thirdStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, 3*textTopPadding), mTextPaint);
		mCiclePaint.setColor(Color.WHITE);
		float textWidth = mCiclePaint.measureText(buttonStr);   //测量字体宽度,我们需要根据字体的宽度设置在圆环中间  
		canvas.drawCircle(getWidth()-radio, getHeight()/2, radio, mCiclePaint);
		canvas.drawText(buttonStr, getWidth()-radio - textWidth / 2, getHeight()/2 + 20/2, mCiclePaint); //画出进度百分比  
		 
		cv.save();
		cv.clipRect(0, 0, progress,getHeight());
		cv.drawBitmap(bitmap, getLeft(), getTop(), mPaint);
		cv.restore();
		
		
		 /** 白色区域**/
		Bitmap bitmap1 = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
		Bitmap bitmapmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
		Canvas canvas1 = new Canvas(bitmap1);
//			canvas1.translate(getWidth() / 2, getHeight() / 2);
		mPaint.setColor(Color.GREEN);
		mTextPaint.setColor(Color.BLACK);
		canvas1.drawBitmap(bitmapmap1, DensityUtil.dip2px(mContext, leftPadding), getHeight()/2-imageHeight/2, mTextPaint);
		
		canvas1.drawText(titleStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, textTopPadding), mTextPaint);
		canvas1.drawText(sencondStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, 2*textTopPadding), mTextPaint);
		canvas1.drawText(thirdStr, imageWidth+DensityUtil.dip2px(mContext, leftPadding*3/2), DensityUtil.dip2px(mContext, 3*textTopPadding), mTextPaint);
		
		
		mCiclePaint.setColor(Color.BLACK);
		canvas1.drawCircle(getWidth()-radio, getHeight()/2, radio, mCiclePaint);
        canvas1.drawText(buttonStr, getWidth()-radio - textWidth / 2, getHeight()/2 + 20/2, mCiclePaint); //画出进度百分比  
		
		cv.save();
		cv.clipRect(progress, 0, getWidth(), getHeight());
		cv.drawBitmap(bitmap1, getLeft(), getTop(), mPaint);
		cv.restore();

	}
	
	
	/***//**
     * 图片去色,返回灰度图片
     * @param bmpOriginal 传入的图片
     * @return 去色后的图片
     */
    public static Bitmap toGrayscale(Bitmap bmpOriginal) {
        int width, height;
        height = bmpOriginal.getHeight();
        width = bmpOriginal.getWidth();    

        Bitmap bmpGrayscale = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
        Canvas c = new Canvas(bmpGrayscale);
        Paint paint = new Paint();
        ColorMatrix cm = new ColorMatrix();
        cm.setSaturation(0);
        ColorMatrixColorFilter f = new ColorMatrixColorFilter(cm);
        paint.setColorFilter(f);
        c.drawBitmap(bmpOriginal, 0, 0, paint);
        return bmpGrayscale;
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
    	int x = 0;
		int y = 0;
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			 x = (int)event.getX();
			 y = (int)event.getY();
			if(x<getWidth() && x>getWidth()-radio*2
					&& y>getHeight()/2-radio && y<getHeight()/2+radio){
//				isDown = true;
				postDelayed(mLongClick, 500);
				return true;
			}
			break;
		case MotionEvent.ACTION_MOVE:
			
			if (Math.abs(event.getX()- x) > 350  
                    || Math.abs(event.getY() - y) > 350) {  
                // 移动超过阈值,则表示移动了  
//				isDown = false;
//				removeCallbacks(mLongClick);
            }  
			break;
		case MotionEvent.ACTION_UP:
			isDown = false;
			removeCallbacks(mLongClick);
			break;
		default:
			break;
		}
		
    	return super.dispatchTouchEvent(event);
    }

}





html5 Audio音乐播放器(canvas圆形音乐播放进度条)(一)

html5 Audio音乐播放器(canvas圆形音乐播放进度条)主要用到的是 audio 和canvas,我们下来介绍下着来年哥哥标签以及它们的api: audio 属性 属性值 注释 ...
  • gongstrong123
  • gongstrong123
  • 2015年12月17日 11:25
  • 10819

利用属性动画实现进度条动画

利用属性动画实现进度条动画
  • weiweijia90
  • weiweijia90
  • 2016年09月27日 18:00
  • 424

Android自定义View动画(进度条)

转载请标明出处:http://blog.csdn.net/u013598111/article/details/50071647,本文出自:【JunTao_sun】 效果图: 天好冷,好想吃面...
  • u013598111
  • u013598111
  • 2015年11月27日 19:29
  • 912

自定义进度条&amp;自定义弧形进度条(附带动画效果)

  • 2017年03月13日 14:12
  • 800KB
  • 下载

android 自定义view+属性动画实现充电进度条

近期项目中需要使用到一种类似手机电池充电进度的动画效果,以前没学属性动画的时候,是用图片+定时器的方式来完成的,最近一直在学习动画这一块,再加上复习一下自定义view的相关知识点,所以打算用属性动画和...
  • lj188266
  • lj188266
  • 2016年12月07日 16:16
  • 2987

自定义进度条动画(背景跟随变化)

公司有一个这样的需求: 需求描述如下:长按右面的接受按钮,左侧的进度向右增加,进度条覆盖的地方跟没覆盖前的颜色是不一样的,比如进度条覆盖前的文字是黑色,覆盖后的文字是白色。释放按钮进度条会回滚。 ...
  • haitao111313
  • haitao111313
  • 2016年05月30日 16:25
  • 543

android自定义控件之圆形进度条(带动画)

首先贴上图片: 额,感觉还行吧,就是进度条的颜色丑了点,不过咱是程序员,不是美工,配色这种问题当然不在考虑范围之内了 下面说重点,如何来写一个这样的自定义控件。 首先,需要有一个灰色的底图,来...
  • anonymousProgrammer
  • anonymousProgrammer
  • 2017年03月24日 17:55
  • 385

js实现鼠标滑动背景跟随

js实现鼠标滑动背景跟随 body{ background: black; } img{ po...
  • u011019141
  • u011019141
  • 2017年08月21日 14:59
  • 191

跟随鼠标一起流动的粒子动画 JS 原生代码

粒子效果演示 html, body { text-align: center; margin:0; padding:0; background: #000000; color: #6666...
  • Jensen_Yao
  • Jensen_Yao
  • 2017年03月22日 19:47
  • 1244

android开发过程中自定义动画加载进度条实现过程

开发过程中需要自定义开发一个加载进度条显示,这里记录下来方便以后查找。 首先:定义一个anim文件夹下的animation.xml配置文件: ...
  • JourneyDeveloper
  • JourneyDeveloper
  • 2015年06月30日 14:47
  • 1086
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义进度条动画(背景跟随变化)
举报原因:
原因补充:

(最多只允许输入30个字)