Android實現(xiàn)水波紋特效
更新時間：2019年01月30日 09:44:14 作者：lou_liang
這篇文章主要為大家詳細介紹了Android實現(xiàn)水波紋特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近需要做個類似于水波紋動畫的效果，思考了一下不需要UI切個動態(tài)圖，Android原生的技術(shù)利用動畫或者自定義控件都可以實現(xiàn)，下面上個圖類似于這樣的效果
下面請看第一種動畫實現(xiàn)，這種方式較為簡單些，就是利用3個ImageView不斷地做縮放和漸變的動畫。
布局文件定義一下
<RelativeLayout
android:id="@+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginBottom="160dp">
<!--中心imageView-->
<ImageView
android:id="@+id/iv_wave"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:background="@drawable/shape_circle" />
<!--中間的imageView-->
<ImageView
android:id="@+id/iv_wave_1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:background="@drawable/shape_circle" />
<!--最外層imageView-->
<ImageView
android:id="@+id/iv_wave_2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:background="@drawable/shape_circle" />
</RelativeLayout>
接下來中間的ImageView保持不變，通過操作另外兩個ImageView達到效果
private void setAnim1() {
AnimationSet as = new AnimationSet(true);
//縮放動畫，以中心從原始放大到1.4倍
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 1.4f, 1.0f, 1.4f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
//漸變動畫
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.5f);
scaleAnimation.setDuration(800);
scaleAnimation.setRepeatCount(Animation.INFINITE);
alphaAnimation.setRepeatCount(Animation.INFINITE);
as.setDuration(800);
as.addAnimation(scaleAnimation);
as.addAnimation(alphaAnimation);
iv1.startAnimation(as);
}
private void setAnim2() {
AnimationSet as = new AnimationSet(true);
//縮放動畫，以中心從1.4倍放大到1.8倍
ScaleAnimation scaleAnimation = new ScaleAnimation(1.4f, 1.8f, 1.4f, 1.8f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
//漸變動畫
AlphaAnimation alphaAnimation = new AlphaAnimation(0.5f, 0.1f);
scaleAnimation.setDuration(800);
scaleAnimation.setRepeatCount(Animation.INFINITE);
alphaAnimation.setRepeatCount(Animation.INFINITE);
as.setDuration(800);
as.addAnimation(scaleAnimation);
as.addAnimation(alphaAnimation);
iv2.startAnimation(as);
}
接下來就是第二種自定義動畫實現(xiàn)
首先定義style文件自定義屬性--在values下創(chuàng)建attrs.xml文件
<declare-styleable name="SpreadView"> <!--中心圓顏色--> <attr name="spread_center_color" format="color" /> <!--中心圓半徑--> <attr name="spread_radius" format="integer" /> <!--擴散圓顏色--> <attr name="spread_spread_color" format="color" /> <!--擴散間距--> <attr name="spread_distance" format="integer" /> <!--擴散最大半徑--> <attr name="spread_max_radius" format="integer" /> <!--擴散延遲間隔--> <attr name="spread_delay_milliseconds" format="integer" /> </declare-styleable>
接下來創(chuàng)建SpreadView繼承view,初始化構(gòu)造方法
public SpreadView(Context context) {
this(context,null,0);
}
public SpreadView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public SpreadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SpreadView, defStyleAttr, 0);
radius = a.getInt(R.styleable.SpreadView_spread_radius, radius);
maxRadius = a.getInt(R.styleable.SpreadView_spread_max_radius, maxRadius);
int centerColor = a.getColor(R.styleable.SpreadView_spread_center_color, ContextCompat.getColor(context, R.color.colorAccent));
int spreadColor = a.getColor(R.styleable.SpreadView_spread_spread_color, ContextCompat.getColor(context, R.color.colorAccent));
distance = a.getInt(R.styleable.SpreadView_spread_distance, distance);
a.recycle();
centerPaint = new Paint();
centerPaint.setColor(centerColor);
centerPaint.setAntiAlias(true);
//最開始不透明且擴散距離為0
alphas.add(255);
spreadRadius.add(0);
spreadPaint = new Paint();
spreadPaint.setAntiAlias(true);
spreadPaint.setAlpha(255);
spreadPaint.setColor(spreadColor);
}
自定義View的繪制：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < spreadRadius.size(); i++) {
int alpha = alphas.get(i);
spreadPaint.setAlpha(alpha);
int width = spreadRadius.get(i);
//繪制擴散的圓
canvas.drawCircle(centerX, centerY, radius + width, spreadPaint);
//每次擴散圓半徑遞增，圓透明度遞減
if (alpha > 0 && width < 300) {
alpha = alpha - distance > 0 ? alpha - distance : 1;
alphas.set(i, alpha);
spreadRadius.set(i, width + distance);
}
}
//當最外層擴散圓半徑達到最大半徑時添加新擴散圓
if (spreadRadius.get(spreadRadius.size() - 1) > maxRadius) {
spreadRadius.add(0);
alphas.add(255);
}
//超過8個擴散圓，刪除最先繪制的圓，即最外層的圓
if (spreadRadius.size() >= 8) {
alphas.remove(0);
spreadRadius.remove(0);
}
//中間的圓
canvas.drawCircle(centerX, centerY, radius, centerPaint);
//延遲更新，達到擴散視覺差效果
postInvalidateDelayed(delayMilliseconds);
}
最后在activity的布局文件中引用自定義屬性：
<com.example.louliang.spread.SpreadView android:layout_width="match_parent" android:layout_height="wrap_content" app:spread_center_color="@color/colorAccent" app:spread_delay_milliseconds="35" app:spread_distance="5" app:spread_max_radius="90" app:spread_radius="150" app:spread_spread_color="@color/colorAccent" />
以上兩種方法就實現(xiàn)了水波紋的效果，下載完整的demo請點擊鏈接，希望對大家有所幫助。
源碼下載：Android實現(xiàn)水波紋特效
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了快速搞懂Android口令加密(一)的相關資料,需要的朋友可以參考下2016-04-04
Android中使用Toast.cancel()方法優(yōu)化toast內(nèi)容顯示的解決方法
做程序員的，基本一看api就知道，用這個可以取消上一個toast的顯示，然后顯示下一個，這樣就能解決出現(xiàn)的問題?？墒窃跍y試的過程中，發(fā)現(xiàn)卻沒有想象中的那么簡單，不信可以百度一下，很多很多人發(fā)現(xiàn)toast的cancel()方法不起作用2013-05-05
本篇文章主要介紹了android自定義開關控件-SlideSwitch的實例，實現(xiàn)了手機控件開關的功能，感興趣的小伙伴們可以參考一下。2016-11-11
Android 彈出Dialog時隱藏狀態(tài)欄和底部導航欄的方法
這篇文章主要介紹了Android 彈出Dialog時隱藏狀態(tài)欄和底部導航欄的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
Android自定義GestureDetector實現(xiàn)手勢ImageView
這篇文章主要為大家詳細介紹了Android自定義GestureDetector實現(xiàn)手勢ImageView的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家介紹了Android添加自定義下拉刷新布局阻尼滑動懸停彈動畫效果詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了Flutter 實現(xiàn)下拉刷新上拉加載的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
Android?Flutter中Offstage組件的使用教程詳解
這篇文章主要為大家詳細介紹了Android?Flutter中Offstage組件的使用教程，文中的示例代碼講解詳細，對我們了解Flutter有一定的幫助，需要的可以參考一下2023-02-02
這篇文章主要介紹了Flutter網(wǎng)絡請求庫DIO的基本使用，幫助大家更好的理解和學習使用Flutter，感興趣的朋友可以了解下2021-04-04
OnSharedPreferenceChangeListener詳解及出現(xiàn)不觸發(fā)解決辦法
本文主要介紹 Android OnSharedPreferenceChangeListener的知識，在Android應用開發(fā)過程中會遇到監(jiān)聽器不觸發(fā)事件問題，這里介紹了相應的解決辦法2016-08-08