效果图
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水波纹效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!