自定義波紋動畫
接手了個專案發現有一個自定義的波紋動畫很有意思,很適合初學者,可以看看。
首先寫一個類繼承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
相關文章
- [Android]多層波紋擴散動畫——自定義View繪製Android動畫View
- iOS動畫-擴散波紋效果iOS動畫
- 屬性動畫-波紋擴散WaveView動畫View
- Android 點選波紋擴散動畫Android動畫
- Flutter動畫之自定義動畫元件-FlutterLayoutFlutter動畫元件
- 搞定動畫之 JQuery 中的自定義動畫動畫jQuery
- TransitionAnimation自定義轉場動畫NaN動畫
- Java 給PPT新增動畫效果(預設動畫/自定義動畫)Java動畫
- Android自定義View播放Gif動畫AndroidView動畫
- Android 自定義View之下雨動畫AndroidView動畫
- Flutter自定義CupertinoPageRoute進入動畫Flutter動畫
- 一款可定製的波紋進度(waveProgress)動畫動畫
- 萬彩動畫大師教程 | 自定義動畫函式動畫函式
- Qt自定義動畫插值函式QT動畫函式
- Flutter 建立自定義路由過渡動畫Flutter路由動畫
- Android 自定義View:屬性動畫(六)AndroidView動畫
- 動畫函式的繪製及自定義動畫函式動畫函式
- 【動畫消消樂】HTML+CSS 自定義載入動畫 065動畫HTMLCSS
- 【動畫消消樂】HTML+CSS 自定義載入動畫 062動畫HTMLCSS
- 【動畫消消樂】HTML+CSS 自定義載入動畫 061動畫HTMLCSS
- 萬彩動畫大師教程 | 移動動畫自定義加速度動畫
- android 自定義酷炫進度條動畫Android動畫
- 【Android】自定義ProgressView-進度條動畫AndroidView動畫
- Android 自定義帶動畫的柱狀圖Android動畫
- 「HTML+CSS」--自定義載入動畫【005】HTMLCSS動畫
- 「HTML+CSS」--自定義載入動畫【006】HTMLCSS動畫
- 「HTML+CSS」--自定義載入動畫【016】HTMLCSS動畫
- 「HTML+CSS」--自定義載入動畫【015】HTMLCSS動畫
- 「HTML+CSS」--自定義載入動畫【026】HTMLCSS動畫
- 「HTML+CSS」--自定義載入動畫【011】HTMLCSS動畫
- 「HTML+CSS」--自定義載入動畫【010】HTMLCSS動畫
- 「HTML+CSS」--自定義載入動畫【008】HTMLCSS動畫
- 「HTML+CSS」--自定義載入動畫【007】HTMLCSS動畫
- 「HTML+CSS」--自定義載入動畫【009】HTMLCSS動畫
- 【動畫消消樂】HTML+CSS 自定義載入動畫:怦然心跳 066動畫HTMLCSS
- 自定義TabBar動畫效果 - 頁面轉場(Swift)tabBar動畫Swift
- XamarinAndroid元件教程RecylerView自定義介面卡動畫NaNAndroid元件View動畫
- android 自定義帶動畫的統計餅圖Android動畫
- Android SeekBar 自定義thumb,thumb旋轉動畫效果Android動畫