自定義波紋動畫

a521314963發表於2017-07-06

接手了個專案發現有一個自定義的波紋動畫很有意思,很適合初學者,可以看看。

首先寫一個類繼承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檔案======================================//

不知道為什麼不能複製了說以截圖



//====================================================================//

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();

}

}

然後就可以使用了

demo

http://download.csdn.net/detail/a521314963/9890720

相關文章