自定义视图-圆形动画的使用

首先今天我们要使用三个圆形动画

1，圆形加载进度条。2，三个圆形并列的加载动画。3，两个圆形替换变大的加载动画

首先我们来理一下思路：

圆形加速进度条的话我们首先要画一个圆形（我画的是一个灰色的圆形），然后我们再画一个红色的圆形盖在灰色的圆形上面，

最后我们再画一个比较小的白色圆形放在红色的圆形中间，这样红色的圆形看起来就觉得中间是空的，就只剩一个红色的圆弧在外面了，

你们可以看效果图11.jpg

现在我们来看看代码：

1.先自定义一个试图RingView extends View

2.在构造函数中获得屏幕的宽和高，到时候我们用宽和高的一半来设置我们要画的圆的圆形

public RingView(Context context, AttributeSet attrs) {super(context, attrs);//获取屏幕的宽，高  WindowManager wm=(WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE);width = wm.getDefaultDisplay().getWidth();heigh = wm.getDefaultDisplay().getHeight();}

3，重新View的onDraw()方法，开始画圆

@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//1.画一个灰色的圆形int circleWid=width/2;int circleHgt=heigh/2;Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);paint.setColor(Color.rgb(220,220,220));canvas.drawCircle(circleWid, circleHgt, 100, paint);//2.画一个红色的圆放在灰色的圆上面paint.setColor(Color.RED);RectF f=new RectF(circleWid-100,circleHgt-100,circleWid+100,circleHgt+100);canvas.drawArc(f, -90,process, true, paint);//3.在画一个圆来并且放在红色圆的中间，设置为白色。这样看起来红色就是一个进度条了paint.setColor(Color.WHITE);canvas.drawCircle(circleWid, circleHgt, 80, paint);paint.setColor(Color.RED);paint.setTextSize(28);//计算出数字的长度int textWid=(int) paint.measureText(String.valueOf(process));canvas.drawText(String.valueOf(process), circleWid-textWid/2, circleHgt, paint);}

</pre>4,接下来我们要来设置根据进度来加载我们的圆了<p></p><p>在MainActivity中我们获取到我们的自定义视图，然后new Thread(new CircleThread()).start();</p><p></p><pre name="code" class="java">private class CircleThread implements Runnable {@Overridepublic void run() {while (begin) {SystemClock.sleep(1000);/*** 在新的线程中，发送消息给View，更新界面数据 通过m++实现加速度方式的不断加速绘制弧形* i代表要绘制扇形的角度大小，默认下290度*/m++;Message msg = new Message();if (process < 290) {process += m;} else {process = 290;begin = false;}msg.what = 1;msg.obj = process;System.out.println("process1:" + process);mhHandler.sendMessage(msg);}}}

最后我们在handler中

private Handler mhHandler = new Handler(new Callback() {@Overridepublic boolean handleMessage(Message msg) {switch (msg.what) {case 1:int value = (int) msg.obj;ring.setProcess(value);ring.invalidate();break;default:break;}return true;}});

再在我们的自定义视图中根据获取到的值，来加载我们的圆了，详细请见圆形加载动画源码

好，接下来我们来将圆形的加载动画了，也就是22.jpg,和33.jpg的效果

ps:为什么我图片传上来了。却看不到呢？

方法其实和扇面的方法是很像的：在ondraw方法中

protected void onDraw(Canvas canvas) {Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);// paint.setColor(Color.rgb(220,220, 220));//// canvas.drawCircle(midWid, midHei, 10, paint);// paint.setColor(Color.parseColor("#50DAF1"));// canvas.drawCircle(midWid, midHei, 20, paint);if (Uiutil.circleColor == Color.BLUE) {paint.setColor(Color.BLUE);} else {paint.setColor(Color.rgb(220, 220, 220));// canvas.drawCircle(midWid, midHei, 10, paint);}paint.setAntiAlias(true);paint.setStyle(Style.FILL);canvas.drawCircle(4, 4, 4.0f, paint); // 注意圆心的位置super.onDraw(canvas);}

在外面我们设置一个全局的变量，要来判断是否变色

public class Uiutil {public static int circleColor=Color.BLUE;
}

我们来看看主页的xml文件的布局

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"android:orientation="horizontal" ><com.example.circlescale2.CircleScaleViewandroid:id="@+id/cirScale1"android:layout_width="8dip"android:layout_height="15dip"android:layout_gravity="center"android:layout_marginTop="6dip"android:layout_marginRight="10dp"android:gravity="center"android:padding="4dip" /><com.example.circlescale2.CircleScaleViewandroid:id="@+id/cirScale2"android:layout_width="8dip"android:layout_height="15dip"android:layout_gravity="center"android:layout_marginTop="6dip"android:layout_marginRight="10dp"android:gravity="center"android:padding="4dip" /><com.example.circlescale2.CircleScaleViewandroid:id="@+id/cirScale3"android:layout_width="8dip"android:layout_height="15dip"android:layout_gravity="center"android:layout_marginTop="6dip"android:gravity="center"android:padding="4dip" /></LinearLayout>

再看看MainActivity中的代码实现：

private class CircleColor implements Runnable{@Overridepublic void run() {while(true){count++;if(count%3==0){SystemClock.sleep(100);Uiutil.circleColor=Color.BLUE;circleScaleView1.postInvalidate();SystemClock.sleep(100);Uiutil.circleColor=Color.GRAY;circleScaleView2.postInvalidate();SystemClock.sleep(100);Uiutil.circleColor=Color.GRAY;circleScaleView3.postInvalidate();}else if(count%3==1){SystemClock.sleep(100);Uiutil.circleColor=Color.GRAY;circleScaleView1.postInvalidate();SystemClock.sleep(100);Uiutil.circleColor=Color.BLUE;circleScaleView2.postInvalidate();SystemClock.sleep(100);Uiutil.circleColor=Color.GRAY;circleScaleView3.postInvalidate();}else{SystemClock.sleep(100);Uiutil.circleColor=Color.GRAY;circleScaleView1.postInvalidate();SystemClock.sleep(100);Uiutil.circleColor=Color.GRAY;circleScaleView2.postInvalidate();SystemClock.sleep(100);Uiutil.circleColor=Color.BLUE;circleScaleView3.postInvalidate();}} }}

详细请看源码：圆形动画2

http://download.csdn.net/detail/iblue007/9120817

接下来我们来看看左后一个圆形动画：也叫仿Uc加载动画

实际上和上面的功能类似。换个思路就可以想到了。主要代码是：

@Overrideprotected void onDraw(Canvas canvas) {int midWid = width / 2;int midHei = heigh / 2;Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);paint.setAntiAlias(true);paint.setStyle(Style.FILL);if (Uiutil.circleColor == Color.BLUE) {Uiutil.circleColor = Color.rgb(220, 220, 220);paint.setColor(Color.BLUE);canvas.drawCircle(midWid-10, midHei, 6, paint);paint.setColor(Color.rgb(220, 220, 220));canvas.drawCircle(midWid+10, midHei, 5, paint);} else {Uiutil.circleColor = Color.BLUE;paint.setColor(Color.rgb(220, 220, 220));canvas.drawCircle(midWid-10, midHei, 5, paint);paint.setColor(Color.BLUE);canvas.drawCircle(midWid+10, midHei, 6, paint); }super.onDraw(canvas);}

大家有兴趣的话可以去下源码看看，很简单的，仿Uc加载动画

好。就到这里。希望对你有帮助

自定义视图-圆形动画的使用相关推荐

android view 渐变动画,Android自定义view渐变圆形动画
本文实例为大家分享了Android自定义view渐变圆形动画的具体代码,供大家参考,具体内容如下直接上效果图自定义属性 attrs.xml文件创建一个类 ProgressRing继承自 view ...
android刷新时的圆形动画_Android自定义view渐变圆形动画
本文实例为大家分享了Android自定义view渐变圆形动画的具体代码,供大家参考,具体内容如下直接上效果图自定义属性 attrs.xml文件创建一个类 ProgressRing继承自 view ...
Android官方开发文档Training系列课程中文版：动画视图之创建自定义转场动画
原文地址:http://android.xsoftlab.net/training/transitions/custom-transitions.html 自定义转场可以创建自定义动画.比如,可以定义 ...
自定义视图，重绘多张图片形成动画
注意事项: 1.如需将自定义视图添加到XML,必须实现 public Game(Context context, AttributeSet attrs)构造方法 2.图片缩放 Matrix matri ...
iOS 自定义转场动画浅谈
代码地址如下: http://www.demodashi.com/demo/11612.html 路漫漫其修远兮,吾将上下而求索前记想研究自定义转场动画很久了,时间就像海绵,挤一挤还是有的,花了差 ...
android 自定义绘画,【整理】Android 自定义视图之画图
Android 自定义视图之画图首先简单的一个画矩形的例子 public class DrawView extends View { public DrawView(Context context) ...
iOS 自定义转场动画实现小红书的push效果思路以及下雪碎屏等动画的实现
感觉好久没写会动的Demo了,前几天写了很久的Block源码分析,分析了几天整个人都不好了,都不知道block是什么了......,有需要的同学可以去看看,简直不要太简单Block是什么鬼毕竟也是做电 ...
Android中自定义视图View
标签: 前言好长时间没写blog了,心里感觉有点空荡荡的,今天有时间就来写一个关于自定义视图的的blog吧.关于这篇blog,网上已经有很多案例了,其实没什么难度的.但是我们在开发的过程中有时候会用 ...
Android中自定义视图View之---前奏篇
前言好长时间没写blog了,心里感觉有点空荡荡的,今天有时间就来写一个关于自定义视图的的blog吧.关于这篇blog,网上已经有很多案例了,其实没什么难度的.但是我们在开发的过程中有时候会用到一些自 ...

自定义视图-圆形动画的使用

自定义视图-圆形动画的使用相关推荐

最新文章

热门文章