Android實現水波紋效果實例代碼
效果圖
attrs.xml
自定義屬性
<declare-styleable name="RippleAnimationView"> <attr name="ripple_anim_color" format="color" /> <!-- 水波紋填充類型 --> <attr name="ripple_anim_type" format="enum"> <enum name="fillRipple" value="0" /> <enum name="strokeRipple" value="1" /> </attr> <!-- 水波紋的半徑 --> <attr name="radius" format="integer" /> <!-- 水波紋邊框大小 --> <attr name="stroeWidth" format="integer" /> </declare-styleable>
RippleAnimationView.java
管理水波紋屬性以及動畫狀態
public class RippleAnimationView extends RelativeLayout { private Paint paint; private int radius; private int strokeWidth; private int rippleColor; private AnimatorSet animatorSet; public RippleAnimationView(Context context) { this(context, null); } public RippleAnimationView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public RippleAnimationView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs); } private void init(Context context, AttributeSet attrs) { paint = new Paint(); paint.setAntiAlias(true); TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RippleAnimationView); // 水波紋填充類型 int rippleType = array.getInt(R.styleable.RippleAnimationView_ripple_anim_type, 0); radius = array.getInteger(R.styleable.RippleAnimationView_radius, 54); strokeWidth = array.getInteger(R.styleable.RippleAnimationView_stroeWidth, 2); rippleColor = array.getColor(R.styleable.RippleAnimationView_ripple_anim_color, ContextCompat.getColor(context, R.color.colorAccent)); array.recycle(); // 設置畫筆線寬 paint.setStrokeWidth(UIUtils.getInstance().getWidth(strokeWidth)); if (rippleType == 0) { paint.setStyle(Paint.Style.FILL); } else { paint.setStyle(Paint.Style.STROKE); } paint.setColor(rippleColor); LayoutParams params = new LayoutParams( UIUtils.getInstance().getWidth(radius + strokeWidth), UIUtils.getInstance().getWidth(radius + strokeWidth)); params.addRule(CENTER_IN_PARENT, TRUE); // 縮放系數 float maxScale = UIUtils.getInstance().displayMetricsWidth / (2 * UIUtils.getInstance().getWidth( radius + strokeWidth )); // 延遲時間 int rippleDuration = 3500; int singleDelay = rippleDuration / 4; // 時間間隔 // 動畫集合 List<Animator> animatorList = new ArrayList<>(); // 實例化水波紋view for (int i = 0;i<4;i++){ RippleCircleView rippleCircleView = new RippleCircleView(this); addView(rippleCircleView,params); // 添加水波紋到集合 viewList.add(rippleCircleView); // 初始化屬性動畫 // x ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(rippleCircleView,"ScaleX", 1.0f,maxScale); scaleXAnimator.setRepeatCount(ObjectAnimator.INFINITE);// 無限循環 scaleXAnimator.setRepeatMode(ObjectAnimator.RESTART); scaleXAnimator.setStartDelay(i*singleDelay); scaleXAnimator.setDuration(rippleDuration); animatorList.add(scaleXAnimator); // y ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(rippleCircleView,"ScaleY", 1.0f,maxScale); scaleYAnimator.setRepeatCount(ObjectAnimator.INFINITE);// 無限循環 scaleYAnimator.setRepeatMode(ObjectAnimator.RESTART); scaleYAnimator.setStartDelay(i*singleDelay); scaleYAnimator.setDuration(rippleDuration); animatorList.add(scaleYAnimator); // alpha ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(rippleCircleView,"Alpha", 1.0f,0f); alphaAnimator.setRepeatCount(ObjectAnimator.INFINITE);// 無限循環 alphaAnimator.setRepeatMode(ObjectAnimator.RESTART); alphaAnimator.setStartDelay(i*singleDelay); alphaAnimator.setDuration(rippleDuration); animatorList.add(alphaAnimator); } animatorSet = new AnimatorSet(); animatorSet.setInterpolator(new AccelerateDecelerateInterpolator()); // 差值器:先加速,後減速 animatorSet.playTogether(animatorList); } private boolean animationRunning; private List<RippleCircleView> viewList = new ArrayList<>(); /** * 開啟動畫 */ public void startRippleAnimation(){ if (!animationRunning){ for (RippleCircleView rippleCircleView: viewList) { rippleCircleView.setVisibility(VISIBLE); } animatorSet.start(); animationRunning = true; } } /** * 結束動畫 */ public void stopRippleAnimation(){ if (animationRunning){ // 逆序播放(從外向內播放動畫) Collections.reverse(viewList); for (RippleCircleView rippleCircleView: viewList) { rippleCircleView.setVisibility(INVISIBLE); } animatorSet.end(); animationRunning = false; } } public int getStrokeWidth() { return strokeWidth; } public Paint getPaint() { return paint; } public boolean isAnimationRunning() { return animationRunning; } }
RippleCircleView.java
繪制水波紋
public class RippleCircleView extends View { private RippleAnimationView rippleAnimationView; public RippleCircleView(RippleAnimationView rippleAnimationView) { this(rippleAnimationView.getContext(),null); this.rippleAnimationView = rippleAnimationView; // 一開始隱藏 this.setVisibility(INVISIBLE); } public RippleCircleView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } public RippleCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { int radius = Math.min(getWidth(),getHeight()) / 2; // 畫圓 canvas.drawCircle(radius,radius,radius - rippleAnimationView.getStrokeWidth(), rippleAnimationView.getPaint()); } }
使用水波紋動畫
<com.wangyi.course.lession4.RippleAnimationView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/ripple_view" android:layout_width="match_parent" android:layout_height="match_parent" app:ripple_anim_color="#c0362e" app:stroeWidth="18" app:ripple_anim_type="strokeRipple" app:radius="150"> <ImageView android:id="@+id/iv_play" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:src="@drawable/ic_play" /> </com.wangyi.course.lession4.RippleAnimationView>
RippleAnimationView rippleAnimationView = findViewById(R.id.ripple_view); findViewById(R.id.iv_play) .setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (rippleAnimationView.isAnimationRunning()) { rippleAnimationView.stopRippleAnimation(); } else { rippleAnimationView.startRippleAnimation(); } } });
到此這篇關於Android實現水波紋效果實例代碼的文章就介紹到這瞭,更多相關Android水波紋效果內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Android實現網易雲推薦歌單界面
- 詳解Android如何自定義view實現圓形進度條
- Android自定義view實現圓形進度條效果
- Android繪制平移動畫的示例代碼
- Android開發之自定義UI組件詳解