接手了個項目發現有一個自定義的波紋動畫很有意思,很適合初學者,可以看看。
首先寫一個類繼承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();
}
}
然后就可以使用了