android 自定义view实现太极图效果
2016-11-08 16:28
441 查看
需求搞完了 下午不想做新需求,中午没事看了下博客,发现别人写了一个太极的效果,我之前有想过,当时发现这个怎么实现,今天突然看到图有感觉了,于是关掉博客,自己想实现下,应该不是很难!分如下步骤
第一步:
画二个半圆一般是黑色 一般是白色,这个应该不难,看代码
效果:
第二步:
先看一张图:
第二步应该是画这个图了,这个怎么画呢?其实也简单,看如下分析图
现在图分析出来了,写代码就简单了!如下:
效果:
第三步:
就是在刚才的分析的图中画二个很小的圆,就是八卦图中的阴阳二级,这个就更没啥难度了,直接写代码
效果图:
最后一步加上一个旋转动画而已,以这个圆的中心点为旋转点就ok了,最后把全部代码贴上来
效果图:
第一步:
画二个半圆一般是黑色 一般是白色,这个应该不难,看代码
package com.load.anim; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.util.AttributeSet; import android.view.View; /** * Created by admin on 2016/11/8. */ public class TaiJiView extends View { private int width = 360; private int height = 360; private int padding = 5; private Paint mPaint; private RectF mRectf; public TaiJiView(Context context) { this(context,null); } public TaiJiView(Context context, AttributeSet attrs) { this(context, attrs,0); } public TaiJiView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPaint(); } /** * 初始化画笔 */ private void initPaint() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStrokeWidth(5); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(width,height); mRectf = new RectF(0,0,width,width); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawCirCle(canvas); } /** * 画一个简单的圆 * @param canvas */ private void drawCirCle(Canvas canvas) { mPaint.setStyle(Paint.Style.FILL); mPaint.setColor(Color.WHITE); canvas.drawArc(mRectf,270,180,true,mPaint); mPaint.setColor(Color.BLACK); canvas.drawArc(mRectf,270,-180,true,mPaint); } }
效果:
第二步:
先看一张图:
第二步应该是画这个图了,这个怎么画呢?其实也简单,看如下分析图
现在图分析出来了,写代码就简单了!如下:
private void drawHalfCirCle(Canvas canvas) { //画上面黑色半圆 mPaint.setStyle(Paint.Style.FILL); mPaint.setColor(Color.BLACK); RectF blackHalfRect = new RectF(width/4,0,width/2+width/4,width/2); canvas.drawArc(blackHalfRect,270,180,true,mPaint); mPaint.setStyle(Paint.Style.FILL); mPaint.setColor(Color.WHITE); RectF whiteHalfRect = new RectF(width/4,width/2,width/2+width/4,width); canvas.drawArc(whiteHalfRect,270,-180,true,mPaint); }
效果:
第三步:
就是在刚才的分析的图中画二个很小的圆,就是八卦图中的阴阳二级,这个就更没啥难度了,直接写代码
/** * 绘制二个小圆点 * @param canvas */ private void drawSmallCircle(Canvas canvas) { mPaint.setColor(Color.WHITE); mPaint.setStyle(Paint.Style.FILL); canvas.drawCircle(width/2,width/4,20,mPaint); mPaint.setColor(Color.BLACK); mPaint.setStyle(Paint.Style.FILL); canvas.drawCircle(width/2,width/4*3,20,mPaint); }
效果图:
最后一步加上一个旋转动画而已,以这个圆的中心点为旋转点就ok了,最后把全部代码贴上来
package com.load.anim;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
/**
* Created by admin on 2016/11/8.
*/
public class TaiJiView extends View implements View.OnClickListener {
private RotateAnimation rotateAnimation;
private int width = 360;
private int height = 360;
private int padding = 5;
private Paint mPaint;
private RectF mRectf;
private RectF blackHalfRect;
private RectF whiteHalfRect;
public TaiJiView(Context context) {
this(context,null);
}
public TaiJiView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public TaiJiView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
initAnim();
setOnClickListener(this);
}
/**
* 初始化画笔
*/
private void initPaint() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(5);
}
private void initAnim() {
//以view的中心点为旋转参考点
rotateAnimation = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setRepeatCount(-1);
rotateAnimation.setFillAfter(false);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(width,height);
mRectf = new RectF(0,0,width,width);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawCirCle(canvas);
drawHalfCirCle(canvas);
drawSmallCircle(canvas);
}
/** * 绘制二个小圆点 * @param canvas */ private void drawSmallCircle(Canvas canvas) { mPaint.setColor(Color.WHITE); mPaint.setStyle(Paint.Style.FILL); canvas.drawCircle(width/2,width/4,20,mPaint); mPaint.setColor(Color.BLACK); mPaint.setStyle(Paint.Style.FILL); canvas.drawCircle(width/2,width/4*3,20,mPaint); }
/**
* 绘制二个半圆 一个黑色 一个白色
* @param canvas
*/
private void drawHalfCirCle(Canvas canvas) {
//画上面黑色半圆
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.BLACK);
blackHalfRect = new RectF(width/4,0,width/2+width/4,width/2);
canvas.drawArc(blackHalfRect,270,180,true,mPaint);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.WHITE);
whiteHalfRect = new RectF(width/4,width/2,width/2+width/4,width);
canvas.drawArc(whiteHalfRect,270,-180,true,mPaint);
}
/**
* 画一个简单的圆
* @param canvas
*/
private void drawCirCle(Canvas canvas) {
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.WHITE);
canvas.drawArc(mRectf,270,180,true,mPaint);
mPaint.setColor(Color.BLACK);
canvas.drawArc(mRectf,270,-180,true,mPaint);
}
@Override
public void onClick(View view) {
rotateAnimation.setDuration(1000);
rotateAnimation.setInterpolator(new LinearInterpolator());//不停顿
startAnimation(rotateAnimation);
}
}
效果图:
相关文章推荐
- Android自定义view实现太极效果实例代码
- Android自定义view实现太极效果
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- Android自定义ViewGroup自动换行实现滑动任意布局及事件处理效果
- Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View---转
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- android自定义view实现progressbar的效果
- Android 自定义RecyclerView 实现真正的Gallery效果
- Android 自定义RecyclerView 实现真正的Gallery效果
- Android自定义View实现HTML图文环绕效果
- 实现自定义view(2):仿Android QQ多屏幕显示ListView的效果
- android自定义view实现progressbar的效果
- 利用Android自定义View实现转盘旋转的效果
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果 .
- android 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
- Android学习备忘020——android自定义ImageView实现缩放,回弹效果
- android自定义view实现progressbar的效果