Android实现水波纹效果实例代码
短信预约 -IT技能 免费直播动态提醒
效果图
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:class="lazy" data-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水波纹效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
