接手了个项目发现有一个自定义的波纹动画很有意思，很适合初学者，可以看看。
首先写一个类继承View，重写他的构造方法，他有三个构造，一个参数的是new出来时使用的，两个参数的是在布局中使用的。我们这个波纹控件要在布局中使用所以就实现了两个参数的和一个参数的构造方法。
public MyView(Context context) {
this(context,null);
}
public MyView(Context context,@NullableAttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
因为控件原来没有要自定义，所以也要自定义一些属性，怎么自定义属性呢？要在vlaues文件夹下创建名为atts的xml文件，在文件里设定自定义的属性，
//=========================xml文件======================================//
不知道为什么不能复制了说以截demo图
//====================================================================//
private void init(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RippleViewStyle);//自定义属性
start_radius= typedArray.getDimensionPixelSize(R.styleable.RippleViewStyle_start_radius,226);
start_color= typedArray.getColor(R.styleable.RippleViewStyle_start_color, context.getResources().getColor(R.color.colorAccent));
设置起始半径。初始颜色，半径
radius_width= typedArray.getDimensionPixelSize(R.styleable.RippleViewStyle_radius_width,3);
typedArray.recycle();//回收以便重用
paint=newPaint();//创建画笔
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(radius_width);
paint.setColor(start_color);
startLists=newLinkedList<>();
}
然后重写当view改变后的方法
@Override
protected voidonSizeChanged(intw,inth,intoldw,intoldh) {//该方法会在view发生改变时调用
super.onSizeChanged(w, h, oldw, oldh);
width=getMeasuredWidth();
height=getMeasuredHeight();
max_radius_width=width/2-30; 控制view的大小
radius_spec=(max_radius_width-start_radius)/4; 半径间隔
pre_add_radius= (max_radius_width-start_radius)/140;
startLists.clear();
//4根线初始值
for(inti=0;i<4;i++) { 有几根线
startLists.add(max_radius_width-radius_spec*(i+1));
}
}
最后画出来
@Override
protected voidonDraw(Canvas canvas) {//画出来
super.onDraw(canvas);
synchronized(MyView.class) {//同步画
for(inti=0;i<4;i++) {
intradius=startLists.get(i)+pre_add_radius;
paint.setAlpha((int) (244*(1-((float) radius/max_radius_width))));
canvas.drawCircle(getMeasuredWidth()/2, getMeasuredHeight()/2, radius,paint);
startLists.set(i,newInteger(radius));
}
if(startLists.getFirst()>max_radius_width) {
startLists.removeFirst();
startLists.addLast(start_radius);
}
}
}
不要忘了动画
public voidstart() {//开始动画
animator=ValueAnimator.ofFloat(0,1);
animator.setInterpolator(newAccelerateInterpolator(1.2f));
animator.addUpdateListener(newValueAnimator.AnimatorUpdateListener() {
@Override
public voidonAnimationUpdate(ValueAnimator animation) {
invalidate();
}
});
animator.setDuration(500);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.start();
}
public voidstop() {//停止动画
if(animator!=null) {
animator.cancel();
}
}
然后就可以使用了
网友评论